<template>
    <div class="wrapper">
        <span class="sqrk">申请入库(1)</span>
        <span>
            <a-select ref="select" v-model:value="value" style="width: 200px" :options="options" @focus="focus"
                @change="handleChange">
            </a-select>
        </span>
        <span>
            <a-input-search v-model:value="key" 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>
    </div>
</template>


<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
export default defineComponent({
    name: 'Search',
    components: {},
    setup() {
        const value = ref<string>('1');
        const key = ref<string>('');
        const checked1 = ref<boolean>(false);
        const checked2 = ref<boolean>(false);
        const checked3 = ref<boolean>(false);
        const checked4 = ref<boolean>(false);
            
        const options = ref<SelectTypes['options']>([
            {
                value: '1',
                label: '已审核',
            },
            {
                value: '2',
                label: '未审核',
            },
            {
                value: '3',
                label: '未通过',
            },
        ]);

        function onSearch() {

        }

        return {
            options,
            value,
            key,
            onSearch,
            checked1,
            checked2,
            checked3,
            checked4,
        };
    },
});
</script>
<style scoped>
.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 {
    width: 94px;
    height: 32px;
    background: #0671DD;
    color: #fff;
    line-height: 32px;
    display: block;
    text-align: center;
    border-radius: 4px;
}
</style>