<template>
    <div class="wrapper">
        <span class="sqrk" @click="showModal">申请库({{ resNum }})</span>
        <span>
            <a-select ref="select" v-model:value="statusValue" style="width: 200px" :options="options"
                @change="handleChange">
            </a-select>
        </span>
        <span>
            <a-input-search v-model:value="keyWord" placeholder="请输入搜索内容" style="width: 200px" @search="onSearch" />
        </span>
        <div>
            <a-checkbox v-model:checked="checked1">全部</a-checkbox>
            <!-- <a-checkbox v-model:checked="checked2">测试数据1</a-checkbox>
            <a-checkbox v-model:checked="checked3">测试数据2</a-checkbox>
            <a-checkbox v-model:checked="checked4">测试数据3</a-checkbox> -->
        </div>

        <!-- <a-modal style="top: 50px" v-model:visible="visible" title="申请库" @ok="handleOk" width="1440px" :footer="null">
            <library></library>
        </a-modal> -->
        <!-- 弹出框 -->
        <ResCarModal v-if="visible" @closeModal="visible = false" />
    </div>
</template>


<script>
import { defineComponent, ref, computed, unref, getCurrentInstance, onMounted } from 'vue';
import library from "../../../library/index.vue";
import ResCarModal from './ResCarModal.vue';
import { getResInCar, clearResInCar } from '/@/api/resource/plat';
import { session } from '/@/utils/Memory';
import { message } from 'ant-design-vue';

export default defineComponent({
    name: 'Search',
    components: { library, ResCarModal },
    setup() {
        const statusValue = ref('1');
        const keyWord = ref('');
        const checked1 = ref(false);
        const checked2 = ref(false);
        const checked3 = ref(false);
        const checked4 = ref(false);
        const currentInstance = getCurrentInstance();
        const parentSetup = currentInstance.parent.setupState;
        const resNum = ref(0)

        onMounted(() => {
            getResData();
            eventBus.on('addResToCarEventBus', () => {
                getResData();
            })
        })
        const getResData = () => {
            getResInCar({
                userId: session.getItem('userId'),
            }).then((res) => {
                if (res.datas) {
                    let resData = res.datas.filter(item=>item.applyCarInfo.workflowType==='MAP'||item.applyCarInfo.workflowType==='SCENE'||item.applyCarInfo.workflowType==='FILE')
                    resNum.value = resData.length
                }
            })
        }

        const options = ref([
            {
                value: '1',
                label: '已审核',
            },
            {
                value: '2',
                label: '未审核',
            },
            {
                value: '3',
                label: '未通过',
            },
        ]);

        function onSearch() {
            parentSetup.getDataList(key.value)
        }

        const visible = ref(false);
        const showModal = () => {
            visible.value = true;
            // clearResInCar({
            //     userId: session.getItem('userId'),
            // }).then((res) => {
            //     if(res.datas){
            //         // resNum.value = res.datas.length
            //     }
            // })
        };
        const handleOk = (e) => {
            console.log(e);
            visible.value = false;
        };
        const handleChange = () => {

        }

        return {
            resNum,
            visible,
            showModal,
            handleOk,
            options,
            statusValue,
            keyWord,
            onSearch,
            checked1,
            checked2,
            checked3,
            checked4,
            handleChange,
            getResData
        };
    },
});
</script>
<style scoped lang="less">
.wrapper>div {
    float: right;
    height: 32px;
    padding: 5px 0;
}

.wrapper>span {
    display: inline-block;
    margin-right: 30px
}

.wrapper {
    width: 100%;
    height: 54px;
    border-radius: 4px;
    background: #f8f8f8;
    padding: 11px;
    margin-bottom: 20px;
}

.sqrk {
    cursor: pointer;
    width: 94px;
    height: 32px;
    background: #0671DD;
    color: #fff;
    line-height: 32px;
    display: block;
    text-align: center;
    border-radius: 4px;
}
</style>