<template>
    <div class="kyc-tip-bar-wrap" v-if="show" >
        <div class="kyc-tip-info">
            <svg-icon color="#0f3675" icon-class="kyc-user" class="kyc-tip-icon" />
            <span class="kyc-tip-text">{{ t('form.personalData.kyc.tip') }}</span>
        </div>
        <div class="kyc-tip-btn">
            <el-button type="primary" size="large" @click="openStep" >{{ t('form.personalData.kyc.infoBtn') }}</el-button>
            <router-link to="/profile" v-slot="{ navigate }" style="margin-left: 12px;" >
                <el-button class="dark-btn" size="large" @click="navigate" >{{ t('form.personalData.kyc.actionBtn') }}</el-button>
            </router-link>
        </div>
    </div>
    <kyc-step v-model:show="showStep" />
</template>

<script setup>
import { isHttp } from '@/utils/validate'
import { useLocale } from 'element-plus'
import { getPersonalAuthStatus } from '@/api/common'
import { onMounted, defineModel } from 'vue';
import useAppStore from '@/store/modules/app'
import kycStep from './kycStep.vue';

const { t } = useLocale()
const show = ref(false)
const showStep = ref(false)
const status = defineModel('status')

const props = defineProps({
  action: {
    type: String,
    default: null
  },
  link: {
    type: String,
    default: null
  }
});

function go(key) {
    if (!key) {
        return
    }
    if (isHttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
    } else {
        router.push({ path: key });
    }
}

function openStep() {
    showStep.value = true
}

onMounted(() => {
    getPersonalAuthStatus().then(resp => {
        if (resp.data) {
            const { data } = resp
            show.value = data.address != 1 || data.identity != 1 || data.email != 1
        } else {
            show.value = true
        }
        useAppStore().setKycStatus(!show.value)
        status.value = !show.value
    })
})
</script>

<style lang="scss" scoped>
.kyc-tip-bar-wrap {
    margin-bottom: 15px;
    width: 100%;
    height: 100px;
    background: rgba(37, 192, 229, 0.1);
    padding: 0 37px 0 37px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .kyc-tip-info {
        flex-grow: 0;
        // flex-shrink: 0;
        display: flex;
        align-items: flex-start;
    }

    .kyc-tip-icon {
        width: 32px;
        height: 32px;
        margin-right: 20px;

        // fill: rgba(15, 54, 117, 1);
    }

    .kyc-tip-text {
        color: rgba(15, 54, 117, 1);
        font-size: 18px;
        line-height: 32px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .kyc-tip-btn {
        flex-shrink: 0;
    }

    :deep(.el-button) {
        font-size: 22px;
        height: 50px;
        padding-left: 32px;
        padding-right: 32px;
    }
}
</style>