<template>
	<!-- 指定审批成员 -->
	<div style="width: 410px">
		<div
			style="
				margin: 16px 0 12px 0;
				font-size: 12px;
				color: rgba(92, 92, 92, 1);
			"
		>
			审批人审核
		</div>
		<Table
			:tableData="tableData"
			:columns="columns"
			:tableOptions="{
				maxHeight: '200',
			}"
			:isCheckend="true"
			@select="selectRow"
			@select-all="selectRow"
			ref="tRef"
		/>
	</div>
</template>

<script setup>
import { msg } from '@/utils/lodash/msg.js';
import Table from '../../components/Table/index.vue';
import { toRefs, onMounted, nextTick, ref } from 'vue';
const props = defineProps({
	tableData: {
		type: Array,
		default: [],
		required: true,
	},
	// selectRow: {
	// 	type: Function,
	// },
	checkIds: {
		type: Array,
	},
});

const emits = defineEmits(['selectRow']);
const state = toRefs(props);
const { tableData, checkIds } = state;
const tRef = ref(null);
const selectData = ref([]);
const columns = [
	{
		label: '员工名称',
		prop: 'name',
		disabled: false,
		style: 'width:200px',
	},
	{
		label: '手机号码',
		prop: 'telephone',
		disabled: false,
		style: 'width:200px',
	},
];

const init = () => {
	let ids = [];
	if (checkIds.value.length) {
		checkIds.value.forEach((item) => {
			ids.push(item.approverId);
		});
		selectData.value = tableData.value.filter((item) => {
			if (ids.includes(item.id)) {
				return item;
			}
		});
	}
};
init();

const selectRow = (val) => {
	//console.log(val, '=val=');
	// if (val.length > 20) {
	// 	msg('warning', '指定成员审批不能超过20人!');
	// 	return;
	// }
	selectData.value = val;
	emits('selectRow', val);
};
onMounted(() => {
	nextTick(() => {
		let ids = [];
		checkIds.value.forEach((item) => {
			ids.push(item.approverId);
		});
		let items = tableData.value.filter((item) => {
			return ids.includes(item.id);
		});
		if (items.length) {
			items.forEach((item) => {
				tRef.value.setSelectCheck(item);
			});
		}
	});
});
const getMemBerData = () => {
	return {
		selectData: selectData.value,
	};
};
defineExpose({
	getMemBerData,
});
</script>

<style lang="scss" scoped>
@import '../../index.scss';
</style>
