<template>
	<view style="width: 100%;">
		<!--		<view style="display: flex; align-items: center;">-->
		<!--			<view>{{ labels }}</view>-->
		<!--			<view style="color: #909399; margin-left: 5px;">-->
		<!--				<image src="YOUR_ARROW_RIGHT_ICON_URL" style="width: 16px; height: 16px;" />-->
		<!--			</view>-->
		<!--		</view>-->

		<u-action-sheet style="min-height: 200px" :show="show" @close="show = false">
			<view class="cu-bar bg-white">
				<view class="action text-blue" @tap="onClose">取消</view>
				<view class="action text-green" @tap="selectUsers">确定</view>
			</view>
			<!--			overflow-y: auto;  滚动效果-->
			<view style="max-height: 300px; overflow-y: auto;">
				<view v-for="item in data" :key="item.id" style="padding: 10px;">
					<view @tap="onItemClick(item)" style="display: flex; align-items: center;">
						<view
							style="flex: 1;text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
							{{ item.reportNo }}</view>
						<view v-if="item.checked" style="color: #409eff;">已选择</view>
					</view>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
import reimbursementApprovalService from '@/api/cw/reimbursementApproval/ReimbursementApprovalService'

export default {
	data() {
		return {
			show: false,
			labels: '',
			index: '',
			projectId: '',
			data: [],
			localMode: '', // 声明一个本地数据属性
		};
	},
	props: {
		value: String,
		placeholder: {
			type: String,
			default: '请选择项目'
		},
		readonly: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
	},
	mounted() {
		// this.loadData();
	},
	methods: {
		init(index, projectId) {
			this.show = true;
			if (!this.projectId) {
				this.index = index;
				this.projectId = projectId;
				//选项的选择模式，单选或多选，默认为多选
				this.localMode = 'single'
				this.loadData();
			}
		},
		onItemClick(item) {
			if (this.localMode === 'single') {
				this.data.forEach(node => {
					node.checked = node === item;
				});
			} else {
				item.checked = !item.checked;
			}
		},
		selectUsers() {
			let ids = this.data.filter(item => item.checked).map(item => item.id).join(',');
			let reportNo = this.data.filter(item => item.checked).map(item => item.reportNo).join(',');
			this.labels = reportNo;
			this.$emit('input', ids, reportNo, this.index);
			this.show = false;
		},
		loadData() {
			reimbursementApprovalService.reportNoList({ status: 5, projectId: this.projectId })
				.then(data => {
					this.data = data.records.map(item => ({ ...item, checked: false }));
					if (this.value) {
						let keys = this.value.split(',');
						this.data.forEach(node => {
							if (keys.includes(node.id)) {
								node.checked = true;
							}
						});
						this.labels = this.data.filter(node => node.checked).map(node => node.label).join(',');
					}
				})
				.catch(e => {
					throw e;
				});
		},
		onClose() {
			// 在关闭操作中清除已选择标记
			this.data.forEach(item => {
				item.checked = false;
			});
			this.labels = ''; // 清空标签
			this.show = false;
		},
	}
};
</script>
