<template>
    <div class="custom_check_box">
        <div class="search_tab_head" v-if="props.showOperation && !props.disabled">
            <FormSearchGroup 
                :formDisabled="formDisabled"
                @searchChange="(params,key)=>HandleSearchChange(params,key)"
                :searchList="searchList"/>
        </div>

        <div class="data_area">
            <slot></slot>
            
            <Table  
                class="search_content"
                :pageSize="200"
                :currentPage="1"
                :totalNum="0"
                :tableData="props.selectList" 
                :tableColumns="tableColumns"
                :hidePagination="true"
            >
                <template #header-label>
                    已选：{{ props.selectList.length }}人
                </template>
                <template #operation="{row}">
                    <div class="table_row_option">
                        <span :class="{'el_button_delete':!formDisabled && (!row.deleteStatus), 'editor_disable':formDisabled || row.deleteStatus}" @click="(formDisabled || row.deleteStatus) ? '' : HandlePoepleDelete(row)">删除</span>
                    </div>
                </template>

            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import FormSearchGroup from './FormSearchGroup.vue';

import Table from '@/baseComponents/Table.vue'

interface SelectItem {
    label:String,
    value:String
}

interface SearchItm {
    key:String,
    type:'input'|'select'|'datePicker'|'radio',
    placeholder:String,
    defaultValue?:any,
    options?:{
        label:String,
        value:String,
        disabled?:Boolean
    }[] 
}
const props = defineProps({
    selectList:{
        required:true,
        type:Array<SelectItem>
    },
    disabled:{
        required:false,
        type:Boolean
    },
    formDisabled:{
        type:Boolean,
        default:false
    },
  
    showOperation:{
        type:Boolean,
        default:true
    },
    searchList:{
        type:Array<SearchItm>,
        default:()=>{
            return [{
                key:'peopleName',
                type:'input',
                placeholder:'请输入关键词搜索'
            }]
        }
    }
})

const emit  = defineEmits(['boxSearchChange','deletePeopleChange'])


const tableColumns = ref([
    {
        name:'label',
        label:'教师姓名',
        width:'60',
        customHeader:true
    },
    {
        name:'value',
        label:'教师id',
        width:'60',
        hidden:true,
    },
    {
        name:'deleteStatus',   //0 可删  1 不可删
        label:'是否可删',
        width:'60',
        hidden:true,
    },
    {
        name:'operation',
        label:'',
        width:'20',
        custom:true
    },
])
const checkedList = ref([])

const HandlePoepleDelete = (params)=>{
    console.log('当前行信息',params)
    emit('deletePeopleChange',params.value)
    // row.value  id
    // row.label
}


const  HandleSearchChange = (params,key)=>{
    console.log('searchParams',params,key)
    // 要变更搜索列表，传到父组件去变更
    emit('boxSearchChange',params,key)

}


watch(()=>props.selectList,(newVal)=>{
    console.log('盒子列表变化了',newVal)
    checkedList.value = []
})

</script>


<style lang="scss" scoped>

.custom_check_box{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:10px;
    line-height: 1.5 !important;
    .simple_filter{
        gap:20px;
        :deep(.el-select){
            width: 160px;
        }
    }

    .search_tab_head{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .check_btn{
            display: flex;
            align-items: center;
            gap:20px;
            >span{
                display: flex;
                align-items: center;
                &:nth-child(1){
                    gap:8px;
                }
            }
        }
    }

    .data_area{
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;

        .search_content{
            flex:1 1;
            border-radius: 6px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap:10px;
            min-height:50px;
            max-height: calc(32px * 3 + 2 * 10px + 20px );
            overflow: auto;

            :deep(.el-table__header-wrapper){
                .el-table__header{
                    width: 100% !important;
                }
                .el-table__header thead{
                    height: 40px !important;
                }
                tr th.el-table__cell {
                    border-left: none;
                    border-right: none;
                    border-top:none;
                    font-size: 14px;
                    font-weight: 400;
                    color:#666666;
                }
            }
            :deep(.el-table__inner-wrapper){
                .el-table__cell{
                    height: 40px;
                }
            }
        }
    }
}



</style>