<template>
    <div class="seach-box" :class="{ 'seach-history-h': show }">
        <div class="seach-info-box">
            <div class="select-module-box">
                <div class="top-box" @click="checkList.list.splice(0, checkList.list.length)">
                    <img src="../../assets/homeImage/topTitleIcon.svg"
                        v-show="!checkList.list || (checkList.list && !checkList.list.length)" class="img" alt="">
                    <div class="none-btn" v-show="(checkList.list && checkList.list.length)"></div>
                    <span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限
                    </span>
                </div>
                <div style="padding-top:10px;">
                    <el-checkbox-group v-model="checkList.list">
                        <el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="seach-check-btn-box">
                <div class="true-btn seach-btn" @click="selectSeach(checkList.list)">选好了</div>
                <div class="seach-btn" @click="closeBtn">取消</div>
            </div>
        </div>
    </div>
</template>
    
<script setup>
import { reactive ,ref,watchEffect,watch,defineExpose} from 'vue';
//props
const props = defineProps({
    list: {
        type: Array,
        default: function () {
            return []
        }
    },
    show: {
        type: Boolean,
        default: false
    },
    closeSeach: {
        type: Function,
    },
    selectSeach: {
        type: Function
    },
    watchData: {
        type: Function,
        default:()=>{
            return ()=>{}
        }
    },
    clearList:{
        type:Boolean,
        default:true
    }
})
let list =reactive([])
let show =null
let closeSeach = props.closeSeach
let selectSeach = props.selectSeach
let watchData= props.watchData

//所选选项
let checkList = reactive({list:[]})

//监听刷新
watchEffect(() => {
    show = props.show
    list.splice(0,list.length)
    list.push(...props.list)
    // console.log(show)
    if(show&&props.clearList){
        checkList.list=[]
    }
})

watch(()=>checkList.list,(nval,avl)=>{
    watchData(nval)
})

//取消
let closeBtn=()=>{
    // checkList.list.splice(0,checkList.list.length)
    closeSeach()
}

//设置参数
let setCheckData=(data)=>{
    console.log(checkList.list)
    checkList.list=data
}

defineExpose({
    setCheckData
})

</script>
<style scoped>
.seach-history-h {
    max-height: 500px !important;
    transition: max-height 0.5s ease-in-out;
}

.seach-box {
    width: 100%;
    max-height: 0;
    overflow: hidden;

    .seach-info-box {
        width: 100%;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 16px;
        /* -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); */

        .seach-check-btn-box {
            width: 100%;
            border-top: 1px solid #ebebeb;
            padding: 20px 20px 25px 20px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;

            .seach-btn {
                width: 100px;
                height: 40px;
                background: inherit;
                background-color: rgba(98, 177, 255, 0);
                box-sizing: border-box;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(170, 170, 170, 1);
                border-radius: 150px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 15px;
                color: #555555;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }

            .true-btn {
                background-color: rgba(98, 177, 255, 1);
                border: 1px solid rgba(98, 177, 255, 1);
                color: #FFFFFF;
                margin-left: 10px;
            }
        }

        .select-module-box {
            padding: 25px 20px 20px 20px;

            .top-box {
                display: flex;
                align-items: center;
                border-bottom: 1px dashed #ebebeb;
                padding-bottom: 20px;
                cursor: pointer;
            }

            .none-btn {
                width: 14px;
                height: 14px;
                border: 1px solid #d9d9d9;
                border-radius: 50%;
                margin-right: 10px;
            }

            .none-title {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #7F7F7F;
                line-height: 20px;
            }
        }

        .img {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }

        .title {
            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
            font-weight: 650;
            font-style: normal;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
        }
    }
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
    color: #000000;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
    background:#50e3c2;
    border-color:#50e3c2;
}
</style>
    