<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="info">
                            申请列表
                        </el-tag>
                    </span>
                </div>
            </template>
            <div class="user-applyFor">
                <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-row :gutter=20>
                            <el-col :span="12">
                                <el-form-item size="small" :label="$t('user.account.applyFor.User name')">
                                    <el-input
                                        v-model="state.form.username"
                                        disabled
                                        prop="username"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item size="small" :label="$t('user.account.applyFor.ApplyFor Real name')">
                                    <el-input
                                        v-model="state.form.real_name"
                                        disabled
                                        prop="real_name"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item size="small" :label="$t('user.account.applyFor.ApplyFor identity')">
                            <el-input
                                v-model="state.form.identity"
                                disabled
                                prop="identity"
                            />
                        </el-form-item>
                        <el-form-item size="small" :label="t('user.account.applyFor.License type')">
                            <el-input
                                v-model="licenseTypeText"
                                disabled
                                prop="license_type"
                            />
                        </el-form-item>
                        <FormItem size="small"
                                  :label="$t('user.account.applyFor.License images Upload')"
                                  v-model="state.form.pilot_license"
                                  type="image"
                                  :input-attr="{
                            'hide-select-file': true,
                              }"
                                  prop="pilot_license"
                                  v-if="state.form.pilot_license !== null && state.form.license_type != 0"
                        />
                    </el-space>
                    <FormItem size="small"
                              :label="$t('user.account.applyFor.Select flight type')"
                              v-model="state.form.flight_type"
                              type="select"
                              :data="{
                                      content:flightTypeContent,
                                      childrenAttr:{border:true},
                                  }"
                              prop="flight_type"
                    />
                    <el-form-item size="small">
                        <el-col :span="6">
                            <el-form-item :label="$t('user.account.applyFor.city')">
                                <el-input size="small"
                                          v-model="state.form.city"
                                          disabled
                                          prop="city"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="18">
                            <FormItem size="small"
                                      :label="$t('user.account.applyFor.Fill in departure')"
                                      v-model="state.form.departure_point"
                                      type="string"
                                      prop="departure_point"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="24">
                            <div style="height: 330px">
                                <el-amap :zoom="12" :center="[121.466808,30.814218]"
                                >
                                    <!--<el-amap-marker :position="markerDeparturePosition"/>-->
                                </el-amap>
                            </div>
                        </el-col>
                    </el-form-item>

                    <el-form-item size="small" :label="$t('user.account.applyFor.Fill in flight range')">
                        <el-input v-model="state.form.planned_range"
                                  prop="planned_range">
                            <template #append>m</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item size="small" :label="$t('user.account.applyFor.Fill in flight height')">
                        <el-input v-model="state.form.planned_height"
                                  prop="planned_height">
                            <template #append>m</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item size="small">
                        <el-col :span="6">
                            <FormItem
                                :label="$t('user.account.applyFor.Brand')"
                                v-model="state.form.aircraft_brand"
                                type="select"
                                :data="{
                                content:{0:'DJI',1:'纵横',2:'Parrot',3:'Autel',4:'3DR',5:'其他'},
                                childrenAttr:{border:true},
                                }"
                                prop="aircraft_brand"
                            />
                        </el-col>
                        <el-col :span="18">
                            <FormItem
                                :label="$t('user.account.applyFor.Fill in Aircraft SerialNumber')"
                                v-model="state.form.aircraft_sn"
                                type="string"
                                prop="aircraft_sn"
                            />
                        </el-col>
                    </el-form-item>

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

                    <!--<el-row :gutter=20>-->
                    <!--    <el-col :span="12">-->
                    <!--        <FormItem size="small"-->
                    <!--                  :label="$t('user.account.applyFor.Start time')"-->
                    <!--                  v-model="state.form.start_planning"-->
                    <!--                  type="datetime"-->
                    <!--                  value-format="yyyy-MM-dd HH:mm:ss"-->
                    <!--                  :picker-options="{minuteStep: 60}"-->
                    <!--                  prop="start_planning"-->
                    <!--        />-->
                    <!--    </el-col>-->
                    <!--    <el-col :span="12">-->
                    <!--        <FormItem size="small"-->
                    <!--                  :label="$t('user.account.applyFor.End time')"-->
                    <!--                  v-model="state.form.end_planning"-->
                    <!--                  type="time"-->
                    <!--                  value-format="HH:mm:ss"-->
                    <!--                  prop="end_planning"-->
                    <!--        />-->
                    <!--    </el-col>-->
                    <!--</el-row>-->

                    <el-row size="small" :gutter=20>
                        <el-col :span="12">
                            <el-form-item size="small" :label="$t('user.account.applyFor.Responsible person')">
                                <el-input
                                    v-model="state.form.real_name"
                                    disabled
                                    prop="real_name"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item size="small" :label="$t('user.account.applyFor.Responsible person mobile')">
                                <el-input
                                    v-model="state.form.mobile"
                                    disabled
                                    prop="mobile"
                                >
                                    <template #prepend>+86</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <FormItem size="small"
                              :label="$t('user.account.applyFor.Fill in Staff Name')"
                              v-model="state.form.staff"
                              type="string"
                              prop="staff"
                    />

                    <FormItem size="small"
                              :label="$t('user.account.applyFor.Staff License images Upload')"
                              v-model="state.form.staff_license"
                              type="image"
                              :input-attr="{
                            'hide-select-file': true,
                              }"
                              prop="staff_license"
                              v-if="state.form.staff !== null"
                    />

                    <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 { postApplyFor } from '/@/api/frontend/user'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useUserInfo } from '/@/stores/userInfo'
// import { ElAmap } from '@vuemap/vue-amap' // FIXME: 目前是全局引入的，后续需要优化

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

const state: {
    formSubmitLoading: boolean
    form: anyObj
    rules: Partial<Record<string, FormItemRule[]>>
} = reactive({
    formSubmitLoading: false,
    form: userInfo.$state,
    rules: {
        departure_point: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.applyFor.Fill in departure'),
            })],
        planned_range: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.applyFor.Fill in flight range'),
            }),
            buildValidatorData({
                name: 'number',
                title: t('user.account.applyFor.Fill in flight range'),
            }),
        ],
        planned_height: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.applyFor.Fill in flight range'),
            }),
            buildValidatorData({
                name: 'number',
                title: t('user.account.applyFor.Fill in flight range'),
            }),
        ],
        aircraft_sn: [
            buildValidatorData({
                name: 'required',
                title: t('user.account.applyFor.Fill in departure'),
            })],
    },
})

const licenseTypeText = computed(() => {
    const licenseType = userInfo.$state.license_type
    if (licenseType == 1) { // licsense_type number => string
        return 'AOPA'
    } else if (licenseType == 2) {
        return 'ASFC'
    } else if (licenseType == 3) {
        return '大疆UTC'
    } else if (licenseType == 4) {
        return '其他'
    } else if (licenseType == 0) {
        return '无'
    }
    return ''
})

const flightTypeContent = computed(() => {
    const licenseType = userInfo.$state.license_type
    if (licenseType == 0) {
        return { 0: '摄影' }
    } else {
        return { 0: '摄影', 1: '巡检', 2: '测绘' }
    }
})

// const defaultPosition = [121.447841, 31.197945]
// 为什么defaultPosition 不显示地图
// const defaultPosition = ref([121.447841, 31.197945])
// 设置 defaultPosition 为地图的中心，坐标为上海市的经纬度
const defaultPosition = [121.474361, 30.799474]
const markerDeparturePosition = ref(defaultPosition)

console.log(state.form)

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