<template>
    <view class="paging-swiper-content">
        <!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
        <!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
        <z-paging ref="paging" v-model="list" @query="query" :auto="false" safe-area-inset-bottom :fixed="false">
            <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
            <view class="d-flex a-c pd2-10-24">
                <view class="min-w-240 flex1">
                    <ut-action-sheet v-model="form.res" :tabs="typeNums" @change="onRefresh" 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(typeNums, form.res) || '全部' }}</view>
                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="ml-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="onRefresh" margin="0" :border="false" :placeholder="placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                </view>
            </view>
            <view class="pd2-10-24">
                <template v-for="(item, index) in list" :key="index">
                    <view class="b-radius bg-#fff pd4-46-20-20-36 p-rtv mb-20" @click.stop="$u.route({ url: '/audit/plant/base/audit-detail/index', params: { id: item.id, type: '1' } })">
                        <view class="mb-10">
                            <view class="c-#333 f-s-34 f-w-5 pb-5">{{ item?.baseName }}</view>
                            <view class="c-#999 f-s-24">{{ selectDictResInfo(form.applyType, item?.resInfo)?.ratedDate || '' }}获评</view>
                        </view>
                        <view class="d-flex pb-5">
                            <view class="w-50%">
                                <text class="c-#666 f-s-28">获评品种：</text>
                                <text class="c-#333 f-s-28 f-w-5">{{ selectDictResInfo(form.applyType, item?.resInfo)?.medicineName || '-' }}</text>
                            </view>
                            <view class="w-50%">
                                <text class="c-#666 f-s-28">基地面积：</text>
                                <text class="c-#333 f-s-28 f-w-5">{{ item?.gapInfo?.area }}{{ item?.gapInfo?.areaUnit || '亩' }}</text>
                            </view>
                        </view>
                        <view class="pb-20">
                            <text class="c-#666 f-s-28">基地地址：</text>
                            <text class="c-#333 f-s-28 f-w-5">{{ item?.gapInfo?.adcodeName }}{{ item?.gapInfo?.address }}</text>
                        </view>
                        <view class="d-flex">
                            <view class="flex1 ov-hd"></view>
                            <view>
                                <up-button
                                    v-if="selectDictResInfo(form.applyType, item?.resInfo)?.res == '0'"
                                    color="#306EFE"
                                    :customStyle="{
                                        fontSize: '30rpx',
                                        height: '68rpx',
                                        width: '180rpx',
                                    }"
                                    >去审核</up-button
                                >
                                <up-button
                                    v-else
                                    color="#F7F7F7"
                                    :customStyle="{
                                        fontSize: '30rpx',
                                        height: '68rpx',
                                        width: '180rpx',
                                        color: '#306EFE',
                                    }"
                                    >详情</up-button
                                >
                            </view>
                        </view>
                        <view class="status-tag" :class="{ [`bg-res-${selectDictResInfo(form.applyType, item?.resInfo)?.res}`]: true }">{{ selectDictLabel(tabs, selectDictResInfo(form.applyType, item?.resInfo)?.res) }}</view>
                        <image class="gap_tag_item_logo" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/audit/plant/gap_tag_item_logo.png" mode="widthFix" />
                    </view>
                </template>
            </view>
        </z-paging>
    </view>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const props = defineProps<{
    current?: string | number;
    tabIndex?: string | number;
}>();
const list = ref<any[]>([]);
const paging = ref();
const placeholder = ref('搜企业、基地名称、品种');
const tabs = ref([
    { label: '全部', value: '' },
    { label: '审核通过', value: '1' },
    { label: '审核不通过', value: '2' },
    { label: '待审核', value: '0' },
]);
const form = ref({
    keyword: '',
    res: '0',
    applyType: '1'
});
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    if (pageNum === 1) {
        getBaseCount();
    }
    const res = await useClientRequest.get<any>('/plt-api/app/base/querySwyqList', params);
    if (!res || res.code !== 200) return;
    const { rows } = res;
    paging.value.complete(rows);
};
// 获取resInfo里面的值
const selectDictResInfo = (type: string, resInfo: any[]) => {
    const item = resInfo.find((item) => item.type === type);
    return item;
};
const typeNums = ref<Array<{ label: string; value: string }>>([]);
// 获取统计信息
const getBaseCount = async () => {
    try {
        const res = await useClientRequest.get('/plt-api/app/base/baseApprovalCount', form.value);
        if (res?.code === 200) {
            console.log(res);
            typeNums.value = res.data?.map((item: any) => {
                return {
                    label: `${item.name}(${item.num})`,
                    value: item.type,
                };
            });
        }
    } catch (error) {
        console.error('获取地块统计信息失败:', error);
    }
};
const onRefresh = () => {
    paging.value?.reload();
};

// 首次进入当前swiper时自动加载一次，之后仅手动刷新
const loadedOnce = ref(false);
const isActive = () => (props.current ?? '').toString() === (props.tabIndex ?? '0').toString();

onMounted(() => {
    if (!loadedOnce.value && isActive()) {
        loadedOnce.value = true;
        onRefresh();
    }
    uni.$on('refreshGapBaseListAudit', () => {
        onRefresh();
    });
});

watch(
    () => props.current,
    () => {
        if (!loadedOnce.value && isActive()) {
            loadedOnce.value = true;
            onRefresh();
        }
    }
);
</script>
<style lang="scss" scoped>
@import '@/assets/styles/audit/plant/theme.scss';
.paging-swiper-content {
    height: 100%;
}
.status-tag {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4rpx 24rpx;
    font-size: 20rpx;
    color: #fff;
    border-radius: 0 16rpx 0 20rpx;
}
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}
.gap_tag_item_logo {
    position: absolute;
    width: 97rpx;
    height: 94rpx;
    left: 0;
    top: 0;
}
</style>
