<template>
    <view class="popup">
        <view class="clock">
            <text :class="['iconfont', parseIcon]" :style="setStyle"></text>
        </view>
        <view class="desc">
            <text class="text">{{ setDesc }}</text>
            <text class="strong" :style="setStyle">{{ parseAuthStatusText }}</text>
        </view>
        <view :class="['know', setClassName]" @click="handleClick">{{ setBtnText }}</view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, unref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { Recordable } from '@/config/interface'
import { AuthEnum, authEnumMap } from '@/enums/appEnums'
import { navigateTo } from '@/utils/util'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const fields: Recordable<number, any> = {
    [AuthEnum.NO_AUTH]: {
        name: 'icon-clock',
        color: '#2077FE',
        class: 'success',
        title: authEnumMap[AuthEnum.PEDDING],
        btnText: '我知道了',
        path: '/pages/profile/profile',
        desc: '信息资料已提交'
    },
    [AuthEnum.PEDDING]: {
        name: 'icon-clock',
        color: '#2077FE',
        class: 'success',
        title: authEnumMap[AuthEnum.PEDDING],
        btnText: '我知道了',
        path: '/pages/profile/profile',
        desc: ''
    },
    [AuthEnum.FAILED]: {
        name: 'icon-shibai',
        color: '#F56C6C',
        class: 'failed',
        title: authEnumMap[AuthEnum.FAILED],
        btnText: '重新认证',
        path: '/bundle/pages/identify/index?type=failed',
        desc: `拒绝理由：${unref(userInfo).refuseReason}`
    }
}

const authStatus = computed(() => unref(userInfo).authenticationStatus)
const parseAuthStatusText = computed(() => fields[unref(authStatus)].title)
const parseIcon = computed(() => fields[unref(authStatus)].name)
const setStyle = computed(() => ({ color: fields[unref(authStatus)].color }))
const setClassName = computed(() => fields[unref(authStatus)].class)
const setBtnText = computed(() => fields[unref(authStatus)].btnText)
const setDesc = computed(() => fields[unref(authStatus)].desc)

/**地址跳转 */
const handleClick = () => {
    navigateTo({ path: fields[unref(authStatus)].path }, 'reLaunch')
}
onLoad(async () => {
    if (unref(authStatus) === AuthEnum.FAILED) await userStore.getUser()
    uni.setNavigationBarTitle({
        title: fields[unref(authStatus)].title
    })
})
</script>

<style lang="scss" scoped>
.popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60rpx 30rpx 40rpx;

    .clock {
        width: 140rpx;
        height: 140rpx;
        margin-top: 20rpx;

        .iconfont {
            font-size: 140rpx;
        }
    }

    .desc {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.8;
        margin: 20rpx 0;

        .text {
            font-size: 28rpx;
            color: #999;
            word-break: break-all;
        }
    }

    .know {
        width: 100%;
        padding: 20rpx 0;
        color: #fff;
        border-radius: 999px;
        text-align: center;
        font-size: 28rpx;

        &.failed {
            background-color: #f56c6c;
        }

        &.success {
            background-color: #2077fe;
        }
    }
}
</style>
