<template>
    <z-paging-swiper>
        <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <template #top>
            <view class="ov-hd" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999" id="topup-navbar">
                <up-navbar :fixed="false" bg-color="transparent">
                    <template #left>
                        <view class="c-#333 f-s-36 f-w-500">GAP/三无一全获评信息审核应用</view>
                    </template>
                </up-navbar>
                <image class="base_index_bg" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/audit/plant/base_index_bg.png" />
            </view>
        </template>
        <image class="base_index_bg" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/audit/plant/base_index_bg.png" />
        <view class="swiper-content d-flex flex-cln">
            <template>
                <up-navbar :fixed="false" bg-color="transparent">
                    <template #left><span></span></template>
                </up-navbar>
                <view class="pd2-16-24">
                    <view class="d-flex">
                        <view class="pd-10 d-flex a-c p-rtv flex1 ov-hd">
                            <span class="mr-10 f-s-32 c-#333 f-w-500">Hi,{{ name }}</span>
                            <span class="f-s-24 c-#ccc">{{ setCipByNum(phone ?? null, 3, 4) }}</span>
                        </view>
                        <view>
                            <image class="w-254 h-151" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/audit/plant/base_index_logo_right.png" mode="widthFix" />
                        </view>
                    </view>
                    <ut-tabs :tabs="tabs" v-model="viewType"></ut-tabs>
                </view>
            </template>
            <!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
            <swiper class="flex1 ov-hd" :current="viewType" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
                <swiper-item class="swiper-item">
                    <!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
                    <!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
                    <GapBase :current="viewType" :tabIndex="0"></GapBase>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
                    <!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
                    <SwyqBase :current="viewType" :tabIndex="1"></SwyqBase>
                </swiper-item>
            </swiper>
        </view>
    </z-paging-swiper>
</template>
<script setup lang="ts">
import { setCipByNum } from '@/utils/public';
import { useInfoStore } from '@/store';
import GapBase from './models/gap-base.vue';
import SwyqBase from './models/swyq-base.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const infoStore = useInfoStore();
// 获取用户信息
const name = computed(() => infoStore.userInfo?.name || '');
const phone = computed(() => infoStore.userInfo?.phone || '');
// 证书文件类型
const tabs = ref([
    { label: 'GAP信息', value: '0' },
    { label: '三无一全信息', value: '1' },
]);

const viewType = ref('0');
const swiperTransition = (e: any) => {};
const swiperAnimationfinish = (e: any) => {
    viewType.value = e.detail.current.toString();
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/audit/plant/theme.scss';
.temp_flag {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #c5c6c6;
    color: #fff;
    font-size: 20rpx;
    padding: 4rpx 16rpx;
    border-radius: 0 16rpx 0 16rpx;
}
.base_index_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    height: 430rpx;
    z-index: -1;
}
.swiper-content {
    height: 100vh;
    overflow: hidden;
}
</style>
