<template>
    <view class="ksqulc">
        <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" refresher-only @onRefresh="onRefresh" scroll-with-animation>
            <template #top>
                <ut-navbar :title="`标记为${selectDictLabel(pt_base_form, formRes.type)}基地`" :fixed="false" border></ut-navbar>
            </template>
            <view class="p-rtv">
                <view ref="baseRef" class="pd-24" id="base12345">
                    <view class="startline-title">证明材料</view>
                </view>
                <view v-if="form" class="pd-24 bg-#fff mb-10 p-rtv">
                    <image class="base_res_logo w-160 h-160" :src="`https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/common/base_res_logo${formRes?.res}.png`" mode="widthFix" />
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">获评品种：</span>
                        <span class="c-#333">{{ formRes.medicineName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">获评时间：</span>
                        <span class="c-#333">{{ formRes.ratedDate || '-' }}</span>
                    </view>
                    <view v-if="formRes.certFile" class="f-s-30 pd2-16-0 info-border-bottom">
                        <view class="f-s-30 c-#666 mb-10">官方公示证明材料</view>
                        <ut-album :urls="formRes.certFile"></ut-album>
                    </view>
                    <view v-if="formRes.certUrl" class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">官方公示网址：</span>
                        <span class="c-#333">{{ formRes.certUrl || '-' }}</span>
                    </view>
                </view>
                <view ref="baseRef" class="pd-24" id="base12345">
                    <view class="startline-title">所标记的基本信息如下</view>
                </view>
                <view class="pd-24 bg-#fff mb-10">
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地名称：</span>
                        <span class="c-#333">{{ form?.baseInfo?.baseName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地类型：</span>
                        <span class="c-#333">{{ selectDictLabel(pt_base_type, form?.baseInfo?.baseType) || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <view class="f-s-30 c-#666 mb-10">基地范围：</view>
                        <view class="bg-#f7f7f7 d-flex ov-hd p-rtv">
                            <image @click="previewImage([form?.baseInfo?.gapInfo?.basePic])" class="w-full" v-if="form?.baseInfo?.gapInfo?.basePic" preview :src="form?.baseInfo?.gapInfo?.basePic" mode="'widthFix'"></image>
                            <view v-else class="w-full h-120 d-flex a-c j-c c-999">暂无基地范围</view>
                        </view>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地面积：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.area || '-' }}{{ form?.baseInfo?.gapInfo?.areaUnit || mapUnitByBaseType[form?.baseInfo?.baseType || '1'] }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地所在地区：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.adcodeName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">详细地址：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.address || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地经纬度：</span>
                        <span class="c-#333">E{{ form?.baseInfo?.gapInfo?.lng || '-' }}, N{{ form?.baseInfo?.gapInfo?.lat || '-' }}</span>
                    </view>
                </view>
            </view>
            <template v-if="formRes.res == '2'" #bottom>
                <view class="pd-20">
                    <view v-if="formRes?.msg" class="mb-16 c-#FC333F f-s-24">审核未通过原因：{{ formRes?.msg || '-' }}</view>
                    <up-button type="primary" @click="$u.route({ type: 'redirect', url: '/plant/base/mark-base/index', params: { id: did, type: formRes.type } })">去修改</up-button>
                </view>
            </template>
        </z-paging>
    </view>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { getUrlParams, recursiveDecodeURIComponent } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {  pt_base_type, pt_base_form } = toRefs<any>(proxy?.useDict( 'pt_base_type', 'pt_base_form' ));

const paging = ref<any>(null);
const mapUnitByBaseType: any = {
    '1': '亩',
    '2': '平方米',
    '3': '平方米',
};
const form = ref<any>(null);
const formRes = ref<any>({
    type: '',
    medicineCode: undefined,
    medicineName: '',
    ratedDate: '',
    certFile: '',
    certUrl: '',
});

const did = ref('');
// 根据id获取基地详情
// 根据id获取基地详情
const getDetailById = async (id: string) => {
    const res = await useClientRequest.get(`/plt-api/app/base/getInfoAllById/${id}`);
    if (!res || res.code !== 200) return;
    form.value = res.data || {};
    res?.data?.baseInfo?.resInfo?.forEach((item: any) => {
        if (item?.type === formRes.value.type) {
            formRes.value = {
                ...item
            }
        }
    });
};
const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};
// 判断节点是否在可视区域内如果在则切换tab createIntersectionObserver

// 判断节点是否在可视区域内如果在则切换tab createIntersectionObserver
onLoad((options: any) => {
    did.value = options?.id || getUrlParams(recursiveDecodeURIComponent(options?.q))?.id || '';
    formRes.value.type = options?.type || getUrlParams(recursiveDecodeURIComponent(options?.q))?.type || '';
    getDetailById(did.value);
});
</script>
<style lang="scss" scoped>
.z-paging-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

.btn-aree-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.plot-item {
    border: 1rpx solid rgba($u-primary, 0.4);
    border-radius: 10rpx;
}
.gap-info-card {
    border: 1rpx solid rgba($u-primary, 0.4);
}

.base_res_logo {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}
</style>
