<!-- 交易商管理-开户管理-交易商开户-详情-审核 -->
<template>
    <app-drawer :title="t('common.alert')" width="480" v-model:show="show" :loading="loading" :refresh="refresh">
        <div class="g-text-message" v-if="auditflag === 1">{{ t('investor.user.open.details.tips1') }}</div>
        <el-form ref="formRef" label-width="100px" :model="formData" :rules="formRules" :show-message="false" v-else>
            <el-form-item label="不通过原因" prop="msg">
                <el-input type="textarea" v-model="formData.msg" maxlength="200" :rows="5" placeholder="请输入" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="show = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { reactive, shallowRef, PropType, computed } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { investorProcess } from '@/services/api/investor'
import { i18n } from '@/stores'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    record: {
        type: Object as PropType<Investor.InvestorRsp>,
        required: true
    },
    auditflag: {
        type: Number,
        required: true
    }
})

const emit = defineEmits(['update:modelValue'])

const t = i18n.global.t
const formRef = shallowRef<FormInstance>()
const loading = shallowRef(false)
const refresh = shallowRef(false)

const show = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

const formData = reactive<Investor.InvestorProcessReq>({
    auditflag: props.auditflag,
    auditid: props.record.userId,
    msg: ''
})

// 表单验证规则
const formRules: FormRules = {
    msg: [{ required: true }],
}

const onSubmit = () => {
    const run = () => {
        loading.value = true
        investorProcess({
            data: {
                ...formData,
                auditflag: props.auditflag
            }
        }).then(() => {
            ElMessage.success(t('investor.user.open.details.tips2'))
            refresh.value = true
        }).catch((err) => {
            ElMessage.error(t('investor.user.open.details.tips3') + err)
        }).finally(() => {
            loading.value = false
            show.value = false
        })
    }
    if (formRef.value) {
        formRef.value.validate((valid) => {
            if (valid) {
                run()
            }
        })
    } else {
        run()
    }
}
</script>