<script setup lang="ts" name="excel">
import { ref, watch } from 'vue';
const props = withDefaults(defineProps<{
	data: { name: string, id: string }[],
	height?: string | number,
	showCheckbox?: boolean,
	checkIds?: string[]
}>(), {
	data: () => [],
	height: '400px',
	showCheckbox: false,
	checkIds: () => []
})
const excelCheckIds = ref<string[]>([])
const currentId = ref('')
const emits = defineEmits(['excelChange', 'checkChange'])
const funExcelChange = (obj: any) => {
	currentId.value = obj.id
	emits('excelChange', obj)
}
watch(() => props.checkIds, (newVal, oldVal) => {  //监听外部checkIds 赋值当前全选
	excelCheckIds.value = newVal
})
const funCheckChange = (checkArr) => {
	emits('checkChange', { checkArr, data: props.data })  //抛出当前选择checkIds,  和当前的childs数据项
}
</script>
<template>
	<div class="overflow-auto shadow rounded-[6px] shadow-blue-500 pl-[6px] pt-[6px] pb-[6px]"
		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
		<el-empty v-if="!props.data.length" description="暂无数据" />
		<el-checkbox-group size="small" v-model="excelCheckIds" v-if="props.showCheckbox" @change="funCheckChange">
			<el-checkbox :class="{'!bg-[rgb(236,245,255)]': currentId === item.id}" size="small" class="hover:bg-[rgb(245,247,250)] !mr-0 py-[3px]" :label="item.id" v-for="item in props.data" :key="item.name">
				<span class="whitespace-nowrap cursor-pointer font-bold text-[12px] align-middle inline-flex items-center"
					@click.stop="funExcelChange(item)"><el-icon class="mr-[4px] !text-[rgb(71,179,71)]"><Document /></el-icon>{{ item.name }}</span>
			</el-checkbox>
		</el-checkbox-group>
		<div v-else>
			<div
				class="hover:bg-[rgb(245,247,250)] font-bold whitespace-nowrap text-[#606266] px-[8px] py-[3px] w-full cursor-pointer leading-[10px] inline-flex items-center h-[24px] text-[12px]"
				v-for="item in props.data" :key="item.name" :class="{'!bg-[rgb(236,245,255)]': currentId === item.id}" @click="funExcelChange(item)"><el-icon class="mr-[4px] !text-[rgb(71,179,71)]"><Document /></el-icon>{{ item.name }}</div>
		</div>
	</div>
</template>