<template>
    <div class="user-views">
        <el-card class="user-views-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>飞手认证</span>
                    <span>
                        <el-tag size="small" type="warning">
                            {{ certificateStatusText }}
                        </el-tag>
                    </span>
                </div>
            </template>
            <div class="user-certification">
                <el-form :model="state.form" :rules="state.rules" label-position="top" ref="formRef"
                         @keyup.enter="onSubmit(formRef)">
                    <el-space fill>
                        <el-alert
                            type="info"
                            description="如果您拥有飞行执照，完成实名认证之后请尽快进行飞手认证，以解锁更专业的飞行许可。"
                            show-icon
                        />
                        <el-form-item size="small" :label="$t('user.account.certification.Certified Real name')">
                            <el-input
                                v-model="state.form.real_name"
                                disabled
                                prop="real_name"
                            />
                        </el-form-item>
                        <el-form-item size="small" :label="$t('user.account.certification.Certified identity')">
                            <el-input
                                v-model="state.form.identity"
                                disabled
                                prop="identity"
                            />
                        </el-form-item>
                    </el-space>

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

                    <el-form-item size="small" :label="$t('user.account.certification.mobile')">
                        <el-input v-model="state.form.mobile"
                                  type="string"
                                  prop="mobile"
                        >
                            <template #prepend>+86</template>
                        </el-input>

                    </el-form-item>
                    <FormItem size="small"
                              :label="t('user.account.certification.License type')"
                              v-model="state.form.license_type"
                              type="select"
                              :data="{
                                  content:{0:'无',1:'AOPA',2:'ASFC',3:'大疆UTC'},
                                  childrenAttr:{border: true},
                              }"
                              prop="license_type"
                    />
                    <FormItem size="small"
                              :label="$t('user.account.certification.License images Upload')"
                              v-model="state.form.pilot_license"
                              type="image"
                              :input-attr="{
                            'hide-select-file': true,
                              }"
                              prop="pilot_license"/>
                    <el-form-item size="small">
                        <el-col :span="6">
                            <FormItem size="small"
                                      :label="$t('user.account.certification.city')"
                                      v-model="state.form.city"
                                      type="city"
                                      prop="city"
                            />
                        </el-col>
                        <el-col :span="18">
                            <FormItem size="small"
                                      :label="$t('user.account.certification.address')"
                                      v-model="state.form.address"
                                      type="string"
                                      prop="address"
                            />
                        </el-col>
                    </el-form-item>
                    <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>
                </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 { postLicense } from '/@/api/frontend/user'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useUserInfo } from '/@/stores/userInfo'

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

const state: {
    formSubmitLoading: boolean
    // form: {
    //     license_type: number
    //     pilot_license: string
    // }
    form: anyObj
    rules: Partial<Record<string, FormItemRule[]>>
} = reactive({
    formSubmitLoading: false,
    form: userInfo.$state,
    rules: {
        mobile: [
            buildValidatorData({
                name: 'mobile',
                title: t('user.account.certification.mobile'),
            }),
        ],
        license_type: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.certification.License type'),
            })],
        pilot_license: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.certification.License images Upload'),
            })],
        city: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.certification.city'),
            })],
        // address: [
        //     buildValidatorData({
        //         name: 'required',
        //         title: t('user.account.certification.address'),
        //     })],
    },
})

const certificateStatusText = computed(() => {
    const certifiedStatus = userInfo.$state.certified
    if (certifiedStatus == 0) {
        return '未审核'
    } else if (certifiedStatus == 1) {
        return '已审核'
    } else if (certifiedStatus == 2) {
        return '已拒绝'
    }
    return ''
})

// console.log(certificateStatus.value)

const onSubmit = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            state.formSubmitLoading = true
            postLicense(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);
}


.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>
