<!-- 交易商管理-交易商管理-交易商管理-编辑 -->
<template>
    <app-drawer :title="t('investor.manage.user.edit.title')" width="900" v-model:show="show" :refresh="refresh"
        :loading="loading">
        <el-form ref="formRef" class="el-form--horizontal" label-width="140px" :model="formData.userinfoDetailVo"
            :rules="formRules" :show-message="false">
            <fieldset class="g-fieldset el-form--horizontal">
                <legend class="g-fieldset__legend">{{ t('common.baseinfo') }}</legend>
                <el-form-item :label="t('investor.manage.user.edit.userId')" prop="userId">
                    {{ formData.userAccountDetailVo.userId }}
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.accountName')" prop="accountName">
                    <el-input v-model="formData.userAccountDetailVo.accountName" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.memberUserName')" prop="memberUserName">
                    {{ formData.userAccountDetailVo.memberUserName }}
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.parentuserid')" prop="parentuserid">
                    <app-select-member ref="parentuseridRef" v-model="formData.userAccountDetailVo.parentuserid"
                        :params="{ usertype: '2,3' }" :placeholder="t('investor.manage.user.edit.tips2')" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.refereeUserName')" prop="refereeUserName">
                    {{ handleNoneValue(formData.userAccountDetailVo.refereeUserName) }}
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.isAuth')" prop="hasAuth">
                    <el-radio-group v-model="formData.userAccountDetailVo.hasAuth">
                        <template v-for="item in flagEnum.getEnumOptions()" :key="item.value">
                            <el-radio :label="item.label" :value="item.value" />
                        </template>
                    </el-radio-group>
                </el-form-item>
            </fieldset>
            <fieldset class="g-fieldset el-form--horizontal">
                <legend class="g-fieldset__legend">{{ isPerson ? t('investor.manage.user.edit.person') :
                    t('investor.manage.user.edit.company1') }}{{ t('investor.manage.user.edit.profile') }}</legend>
                <el-form-item :label="t('investor.manage.user.edit.cardTypeId')" prop="cardTypeId">
                    <app-enum code="certypeperson" v-model="formData.userinfoDetailVo.cardTypeId" v-if="isPerson" />
                    <app-enum code="certypecompany" v-model="formData.userinfoDetailVo.cardTypeId" v-else />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.cardNum')" prop="cardNum">
                    <el-input v-model="formData.userinfoDetailVo.cardNum" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <template v-if="!isPerson">
                    <el-form-item :label="t('investor.manage.user.edit.customerName')" prop="customerName">
                        <el-input v-model="formData.userinfoDetailVo.customerName" maxlength="50"
                            :placeholder="t('common.pleaseenter')" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.bizNature')" prop="bizNature" v-if="!isPerson">
                        <app-enum code="biznature" v-model="formData.userinfoDetailVo.bizNature" :empty-values="[0]" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.legalPersonName')" prop="legalPersonName">
                        <el-input v-model="formData.userinfoDetailVo.legalPersonName" maxlength="50"
                            :placeholder="t('common.pleaseenter')" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.contactName')" prop="contactName">
                        <el-input v-model="formData.userinfoDetailVo.contactName" maxlength="50"
                            :placeholder="t('common.pleaseenter')" />
                    </el-form-item>
                </template>
                <el-form-item :label="t('investor.manage.user.edit.sex')" prop="sex">
                    <app-enum code="Sex" type="radio" v-model="formData.userinfoDetailVo.sex" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.company')" prop="company" v-if="isPerson">
                    <el-input v-model="formData.userinfoDetailVo.company" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.mobile')" prop="mobile">
                    <el-input type="number" v-model="formData.userinfoDetailVo.mobile" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.telPhone')" prop="telPhone">
                    <el-input v-model="formData.userinfoDetailVo.telPhone" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item class="el-form-item--row" :label="t('investor.manage.user.edit.region')" prop="region">
                    <app-region class="el-form-item--col" v-model:country="formData.userinfoDetailVo.countryid"
                        v-model:province="formData.userinfoDetailVo.provinceid"
                        v-model:city="formData.userinfoDetailVo.cityid"
                        v-model:district="formData.userinfoDetailVo.districtid" />
                </el-form-item>
                <el-form-item class="el-form-item--row" :label="t('investor.manage.user.edit.address')" prop="address">
                    <el-input v-model="formData.userinfoDetailVo.address" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.postalCode')" prop="postalCode">
                    <el-input v-model="formData.userinfoDetailVo.postalCode" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item :label="t('investor.manage.user.edit.email')" prop="email">
                    <el-input v-model="formData.userinfoDetailVo.email" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <el-form-item class="el-form-item--row" :label="t('investor.manage.user.edit.wechat')" prop="wechat">
                    <el-input v-model="formData.userinfoDetailVo.wechat" maxlength="50"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
                <template v-if="isPerson">
                    <el-form-item :label="t('investor.manage.user.edit.cardFrontPhotoUrl')" prop="cardFrontPhotoUrl">
                        <app-upload v-model="uploadFiles.cardFrontPhotoUrl" :file-types="['image']"
                            :type-message="t('common.tips21')" :max-size="uploadConfig.maxFileSize" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.cardBackPhotoUrl')" prop="cardBackPhotoUrl">
                        <app-upload v-model="uploadFiles.cardBackPhotoUrl" :file-types="['image']"
                            :type-message="t('common.tips21')" :max-size="uploadConfig.maxFileSize" />
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item :label="t('investor.manage.user.edit.cardFrontPhotoUrl1')" prop="cardFrontPhotoUrl">
                        <app-upload v-model="uploadFiles.cardFrontPhotoUrl" :file-types="['image']"
                            :type-message="t('common.tips21')" :max-size="uploadConfig.maxFileSize" />
                    </el-form-item>
                    <el-form-item :label="config78 || t('investor.manage.user.edit.halfBodyPhotoUrl')"
                        prop="halfBodyPhotoUrl" v-if="config54 === '1'">
                        <app-upload v-model="uploadFiles.halfBodyPhotoUrl" :file-types="['image']"
                            :type-message="t('common.tips21')" :max-size="uploadConfig.maxFileSize" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.legalCardFrontPhotoUrl')"
                        prop="legalCardFrontPhotoUrl">
                        <app-upload v-model="uploadFiles.legalCardFrontPhotoUrl" :file-types="['image']"
                            :type-message="t('common.tips21')" :max-size="uploadConfig.maxFileSize" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.legalCardBackPhotoUrl')"
                        prop="legalCardBackPhotoUrl">
                        <app-upload v-model="uploadFiles.legalCardBackPhotoUrl" :file-types="['image']"
                            :type-message="t('common.tips21')" :max-size="uploadConfig.maxFileSize" />
                    </el-form-item>
                    <el-form-item :label="t('investor.manage.user.edit.otherUrl')" prop="otherUrl">
                        <div>
                            <app-upload v-model="uploadFiles.otherUrl" :max-size="uploadConfig.maxFileSize" />
                            <a href="/template/法人授权书模板.zip" target="_blank"
                                style="color: royalblue; text-decoration: underline;">{{ t('investor.manage.user.edit.template') }}</a>
                        </div>
                    </el-form-item>
                </template>
                <el-form-item class="el-form-item--row" :label="t('investor.manage.user.edit.remark')" prop="remark">
                    <el-input type="textarea" v-model="formData.userinfoDetailVo.remark" maxlength="200" :rows="3"
                        :placeholder="t('common.pleaseenter')" />
                </el-form-item>
            </fieldset>
        </el-form>
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
            <el-button type="primary" @click="onSubmit">{{ t('operation.submitaduit') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, PropType, onMounted, computed } from 'vue'
import { ElMessage, FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { handleNoneValue, parseFilePaths, extractFilePaths } from '@/filters'
import { uploadConfig } from '@/constants/common'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { getConfigValue } from '@/business/common'
import { investorEdit, queryInvestorListDetail } from '@/services/api/investor'
import { UserInfoType } from '@/constants/member'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppUpload from '@pc/components/base/upload/index.vue'
import AppEnum from '@pc/components/modules/enum/index.vue'
import AppRegion from '@pc/components/modules/region/index.vue'
import AppSelectMember from '@pc/components/modules/select-member/index.vue'
import { decryptAES } from '@/services/crypto'
import { i18n } from '@/stores'

const props = defineProps({
    record: {
        type: Object as PropType<Investor.InvestorListRsp>
    }
})

const flagEnum = useEnum('flag') // 是否认证

const { global: { t } } = i18n
const formRef = ref<FormInstance>()
const show = ref(true)
const refresh = ref(false)

const parentuseridRef = ref() // 所属机构组件实例

const uploadFiles = reactive<{
    cardFrontPhotoUrl: UploadUserFile[];
    cardBackPhotoUrl: UploadUserFile[];
    legalCardFrontPhotoUrl: UploadUserFile[];
    legalCardBackPhotoUrl: UploadUserFile[];
    halfBodyPhotoUrl: UploadUserFile[];
    otherUrl: UploadUserFile[];
}>({
    cardFrontPhotoUrl: [],
    cardBackPhotoUrl: [],
    halfBodyPhotoUrl: [],
    legalCardFrontPhotoUrl: [],
    legalCardBackPhotoUrl: [],
    otherUrl: []
})

const config54 = getConfigValue(54)
const config78 = getConfigValue(78)

// 是否个人
const isPerson = computed(() => formData.value.userinfoDetailVo.userinfoType === UserInfoType.Personal)

const formData = ref<Investor.InvestorEditReq>({
    userAccountDetailVo: {},
    userinfoDetailVo: {}
})

const { loading, run } = useRequest(queryInvestorListDetail, {
    manual: true,
    onSuccess: ((res) => {
        const { userinfoDetailVo, userAccountDetailVo } = res.data.oldResult

        userinfoDetailVo.cardNum = decryptAES(userinfoDetailVo.cardNum)
        userinfoDetailVo.mobile = decryptAES(userinfoDetailVo.mobile)
        userinfoDetailVo.telPhone = decryptAES(userinfoDetailVo.telPhone)
        userinfoDetailVo.wechat = decryptAES(userinfoDetailVo.wechat)
        userinfoDetailVo.email = decryptAES(userinfoDetailVo.email)

        uploadFiles.cardFrontPhotoUrl = parseFilePaths(userinfoDetailVo.cardFrontPhotoUrl)
        uploadFiles.cardBackPhotoUrl = parseFilePaths(userinfoDetailVo.cardBackPhotoUrl)
        uploadFiles.legalCardFrontPhotoUrl = parseFilePaths(userinfoDetailVo.legalCardFrontPhotoUrl)
        uploadFiles.legalCardBackPhotoUrl = parseFilePaths(userinfoDetailVo.legalCardBackPhotoUrl)
        uploadFiles.otherUrl = parseFilePaths(userinfoDetailVo.otherUrl)

        formData.value = res.data.oldResult
        parentuseridRef.value.onReset(userAccountDetailVo.parentuserid)
    }),
    onError: (err) => {
        ElMessage.error(err)
    }
})

// 表单验证规则
const formRules: FormRules = {
    accountName: [{
        required: true,
        validator: (rule, value, callback) => {
            if (formData.value.userAccountDetailVo.accountName) {
                callback()
            } else {
                callback(new Error(t('investor.manage.user.edit.tips1')))
            }
        },
    }],
    cardTypeId: [{ required: true }],
    cardNum: [{ required: true }],
    mobile: [{ required: true }]
}

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}

const onSubmit = () => {
    const rawData = { ...formData.value }
    rawData.userAccountDetailVo.modifyStatus = 3
    rawData.userinfoDetailVo.cardFrontPhotoUrl = extractFilePaths(uploadFiles.cardFrontPhotoUrl)
    rawData.userinfoDetailVo.cardBackPhotoUrl = extractFilePaths(uploadFiles.cardBackPhotoUrl)
    rawData.userinfoDetailVo.halfBodyPhotoUrl = extractFilePaths(uploadFiles.halfBodyPhotoUrl)
    rawData.userinfoDetailVo.legalCardFrontPhotoUrl = extractFilePaths(uploadFiles.legalCardFrontPhotoUrl)
    rawData.userinfoDetailVo.legalCardBackPhotoUrl = extractFilePaths(uploadFiles.legalCardBackPhotoUrl)
    rawData.userinfoDetailVo.otherUrl = extractFilePaths(uploadFiles.otherUrl)

    formRef.value?.validate((valid) => {
        if (valid) {
            loading.value = true
            investorEdit({
                data: rawData
            }).then(() => {
                ElMessage.success(t('common.tips3'))
                onCancel(true)
            }).catch((err) => {
                ElMessage.error(t('common.tips4') + err)
            }).finally(() => {
                loading.value = false
            })
        }
    })
}

onMounted(() => {
    const record = props.record
    if (record) {
        run({
            userid: record.userId,
            modifyFlag: record.modifyStatus
        })
    }
})
</script>