<template>
    <z-paging ref="paging" v-model="list" paging-class="paging-btm-shadow" bgColor="#f7f7f7" safe-area-inset-bottom @query="query">
        <template #top>
            <ut-navbar title="请选择任务所使用的种源信息" :fixed="false"></ut-navbar>
        </template>
        <view class="d-flex a-c pd-24 pb-0 bg-#f7f7f7">
            <view class="min-w-170 flex1">
                <ut-action-sheet v-model="form.taskType" :tabs="[{ label: '全部', value: '' }, ...pt_seed_instore_type]" @change="changeSeach" title="选择原料类型">
                    <view class="d-flex search-select-item a-c">
                        <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(pt_seed_instore_type, form.taskType) || '全部' }}</view>
                        <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                    </view>
                </ut-action-sheet>
            </view>
            <view class="h-86 pl-20 w-100%">
                <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" margin="0" :border="false" placeholder="搜批次号、品种名、基地名" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            </view>
        </view>
        <template v-for="(item, index) in list" :key="index">
            <info-card />
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import InfoCard from './models/info-card.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_seed_instore_type } = toRefs<any>(proxy?.useDict('pt_seed_instore_type'));
const list = ref([]);
const paging = ref();
const form = ref({
    keyword: '',
    taskType: '',
});
const query = async (pageNo: number, pageSize: number) => {
    const params = {
        pageNo,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/storageSeed/page', params);
    const { rows } = res;
    paging.value.complete(rows);
};
const changeSeach = () => {
    paging.value.reload();
};
</script>
<style lang="scss" scoped>
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}
</style>
