<template>
    <div class="excelData" :style="{ height: height, overflow: 'auto' }">
        <el-empty v-if="!data.length" description="暂无数据" />
        <el-checkbox-group size="small" v-model="excelCheckIds" v-if="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 data"
                :key="item.name">
                <span
                    class="whitespace-nowrap cursor-pointer font-bold text-[12px] align-middle inline-flex items-center"
                    @click.stop="funExcelChange(item)">
                    <img :src="CSV_C" alt="" v-if="currentId === item.id">
                    <img :src="CSV" alt="" v-else>
                    <span class="excelName" :style="excelSpanSty(item)">{{ item.name }}</span>
                </span>
            </el-checkbox>
        </el-checkbox-group>
        <div v-else>
            <div class="excelDataNoCheck" :class="theme ? 'excelW' : 'excelB'" v-for="item in data" :key="item.name"
                @click="funExcelChange(item)">
                <!-- <el-icon>
                    <Document />
                </el-icon> -->
                <img :src="CSV_C" alt="" v-if="currentId === item.id">
                <img :src="CSV" alt="" v-else>
                <span class="excelName" :style="excelSpanSty(item)">{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import CSV from '@/assets/menuImg/CSV.png'
    import CSV_C from '@/assets/menuImg/CSV_C.png'
    export default {
        props: {
            data: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            height: {
                type: String,
                default: () => {
                    return '';
                },
            },
            showCheckbox: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
            checkIds: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            theme: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
        },
        data() {
            return {
                CSV: CSV,
                CSV_C: CSV_C,
                excelCheckIds: [],
                currentId: ''
            }
        },
        watch: {
            checkIds(newVal, oldVal) {
                this.excelCheckIds = newVal
            }
        },
        methods: {
            excelSpanSty(item) {
                if (this.theme) {
                    if (this.currentId === item.id) {
                        return 'color: #5473E8'
                    } else {
                        return 'color:#000'
                    }
                } else {
                    if (this.currentId === item.id) {
                        return 'color: #fff'
                    } else {
                        return 'color:#C3C3C4'
                    }
                }
            },
            funExcelChange(obj) {
                this.currentId = obj.id
                this.$emit('excelChange', obj)
            },
            funCheckChange(checkArr) {
                this.$emit('checkChange', {
                    checkArr,
                    data: this.data
                }) //抛出当前选择checkIds,  和当前的childs数据项
            }
        }
    }
</script>
<style lang="less">
    .excelData {

        .excelDataNoCheck {
            line-height: 25px;
            height: 25px;
            width: calc(100% - 10px);
            font-size: 14px;
            color: #b7b7b7;

            margin-bottom: 5px;
            border: 1px solid rgba(203, 204, 209, 0.5);
            cursor: pointer;

            .el-icon {
                margin-right: 5px;
                color: #504bb5;
            }

            img {
                width: 20px;
                height: 20px;
                position: relative;
                top: 3px;
            }

            .excelName {
                position: relative;
                top: -2px;
                margin-left: 10px;
            }
        }

        .excelW {
            background: #fff;
        }
    }
</style>