<template>
    <div class="user-views">
        <el-card class="user-views-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>{{ $t('user.account.realname.name authentication') }}</span>
                    <span>
                        <el-tag size="small" type="warning">
                            {{ realNameStatusText }}
                        </el-tag>
                    </span>
                </div>
            </template>
            <div class="user-realname">
                <el-form :model="state.form" :rules="state.rules" label-position="top" ref="formRef"
                         @keyup.enter="onSubmit(formRef)">

                    <div class="identity-tips">
                        <div class="title">
                            {{ $t('user.account.realname.identity authentication tips') }}
                        </div>
                        <div class="tips-item-title">
                            <el-icon>
                                <Bell/>
                            </el-icon>
                            注意事项:
                            <div class="tips-item-content">
                                1.每个证件只能绑定一个账号；
                            </div>
                            <div class="tips-item-content">
                                2.证件照不清晰或与输入的信息不匹配,将导致实名认证被驳回；
                            </div>
                            <div class="tips-item-content">
                                3.您提供的证件信息将受到严格保护，仅用于身份验证,未经本人许可不会用于其他用途；
                            </div>
                            <div class="tips-item-content">
                                4.除原证件无效（如：改名、移民）等特殊情况外，实名认证审核通过后将不能修改。
                            </div>
                        </div>
                        <div class="tips-item-title">
                            <el-icon>
                                <WarningFilled/>
                            </el-icon>
                            证件要求:
                            <div class="tips-item-content">
                                需上传本人二代身份证正面照片(人像面一张)；
                            </div>
                        </div>
                    </div>

                    <el-divider/>
                    <el-form-item :label="$t('user.account.realname.Fill in information')"/>

                    <FormItem size="small"
                              :label="t('user.account.realname.Real name')"
                              type="string"
                              v-model="state.form.real_name"
                              prop="real_name"
                              :placeholder="t('Please input field', { field: t('user.account.realname.Real name') })"
                    />
                    <FormItem size="small"
                              :label="t('user.account.realname.Identity number')"
                              type="string"
                              v-model="state.form.identity"
                              prop="identity"
                              :placeholder="t('Please input field', { field: t('user.account.realname.Identity number') })"
                    />

                    <FormItem size="small" :label="$t('user.account.realname.Identity images Upload')"
                              :input-attr="{
                            'hide-select-file': true,
                              }"
                              type="image" v-model="state.form.identity_img" prop="identity_img"/>

                    <el-form-item class="submit-buttons">
                        <el-button @click="onResetForm(formRef)">{{ $t('Reset') }}</el-button>
                        <el-button type="primary" :loading="state.formSubmitLoading" @click="onSubmit(formRef)">{{
                                $t('Submit')
                            }}
                        </el-button>
                    </el-form-item>
                    <div>
                        <el-alert
                            title="飞手注意"
                            type="info"
                            description="如果您是飞手，完成实名认证之后可以继续进行飞手认证，以解锁更专业的飞行许可。"
                            show-icon
                        />
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed} from 'vue'
import { FormInstance, FormItemRule } from 'element-plus'
import { onResetForm } from '/@/utils/common'
import { buildValidatorData } from '/@/utils/validate'
import { postRealname } from '/@/api/frontend/user'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useUserInfo } from '/@/stores/userInfo'
import { Bell, WarningFilled } from '@element-plus/icons-vue'

const { t } = useI18n()
const userInfo = useUserInfo()
const formRef = ref<FormInstance>()

const state: {
    formSubmitLoading: boolean
    form: {
        real_name: string
        identity: string
        identity_img: string
    }
    // form:anyObj
    rules: Partial<Record<string, FormItemRule[]>>
} = reactive({
    formSubmitLoading: false,
    form: userInfo.$state,
    rules: {
        real_name: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.realname.Real name'),
            })],
        identity: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.realname.Identity number'),
            })],
        identity_img: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.realname.Identity images Upload'),
            })],
    },
})

const realNameStatusText = computed(() => {
    const status = userInfo.$state.real_name_status
    switch (status) {
        case 0:
            return t('user.account.realname.Unverified')
        case 1:
            return t('user.account.realname.Verified')
        case 2:
            return t('user.account.realname.Refused')
        default:
            return t('user.account.realname.Unverified')
    }
})

const onSubmit = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            state.formSubmitLoading = true
            postRealname(state.form).then(() => {
                state.formSubmitLoading = false
            }).catch(() => {
                state.formSubmitLoading = false
            })
        }
    })
}

</script>
<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-realname {
    max-width: 100%;
    //max-height: 100%;
}

.right-title {
    color: var(--el-text-color-secondary);
}

.identity-tips {
    background: #f4f4f4;
    border-radius: 4px;
    padding: 8px;
    font-weight: 400;
    margin-bottom: 10px;

    .title {
        color: #00a1d6;
        font-size: 13px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }

    .tips-item-title {
        color: var(--el-text-color-secondary);
        font-size: 11px;
        align-content: center;
        flex-wrap: wrap;
        margin-bottom: 8px;

        .tips-item-content {
            font-size: 10px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }
    }
}

.submit-buttons :deep(.el-form-item__content) {
    justify-content: flex-end;
}

:deep(.el-upload-list--picture-card) {
    --el-upload-list-picture-card-size: 100px;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 100px;
}

.captcha-box {
    margin-left: auto;

    .el-button {
        width: 100%;
    }
}

:deep(.ba-verification-dialog) .el-dialog__body {
    padding-bottom: 10px;
}

@media screen and (max-width: 1024px) {
    :deep(.ba-change-bind-dialog) {
        --el-dialog-width: 50% !important;
    }
}

@media screen and (max-width: 768px) {
    :deep(.ba-change-bind-dialog) {
        --el-dialog-width: 70% !important;
    }
}

@media screen and (max-width: 600px) {
    :deep(.ba-change-bind-dialog) {
        --el-dialog-width: 92% !important;
    }
}

@media screen and (max-width: 480px) {
    :deep(.ba-change-bind-dialog) {
        --el-dialog-width: 100% !important;
    }
}

</style>
