<!-- 账号管理-资金账户管理-银行签约信息-解约 -->
<template>
    <app-drawer :title="t('account.fundacct.sign.cancel.title')" width="900" v-model:show="show" :refresh="refresh" :loading="loading">
        <app-table-details :title="t('common.baseinfo')" :data="formData" :label-width="200" :cell-props="detailProps1" :column="2" />
        <app-table-details :title="t('common.extendinfo')" :data="formData.extend" :label-width="200" :cell-props="detailProps2"
            :column="2" v-if="expandableList.length" />
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
            <el-button type="primary" @click="onSubmit(1)" v-if="selectedItem.canBindCard === 1">{{ t('account.fundacct.sign.cancel.broker') }}</el-button>
            <el-button type="primary" @click="onSubmit(2)">{{ t('account.fundacct.sign.cancel.unbind') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, reactive, PropType, toRaw, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { decryptAES } from '@/services/crypto'
import { useRequest } from '@/hooks/request'
import { getSignBankById, dealAccountSign } from '@/services/api/account'
import { queryBooleanForAmount } from '@/services/api/bank'
import { CellProp } from '@pc/components/base/table-details/types'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'
import { i18n } from '@/stores'

const props = defineProps({
    selectedItem: {
        type: Object as PropType<Model.AccountSignRsp>,
        required: true
    }
})

const { global: { t } } = i18n
const show = shallowRef(true)
const refresh = shallowRef(false)

const formData = reactive<Partial<Model.DealAccountSignReq>>({
    extend: {}
})

// 查询签约详情
const { loading } = useRequest(getSignBankById, {
    params: {
        accountcode: props.selectedItem.accountCode,
        applyexchticket: props.selectedItem.applyexchticket,
        cusbankid: props.selectedItem.cusbankid,
    },
    onSuccess: ((res) => {
        const { bankAccountsign, extendInfo } = res.data
        formData.certtype = Number(bankAccountsign.cardtype)
        formData.certid = decryptAES(bankAccountsign.cardno)
        formData.bankaccountname = decryptAES(bankAccountsign.bankaccountname)
        formData.accounttype = bankAccountsign.accounttype
        formData.accountcode = bankAccountsign.accountcode
        formData.mobilephone = decryptAES(bankAccountsign.mobilephone)
        formData.bankaccountno = decryptAES(bankAccountsign.bankaccountno)
        formData.cusbankid = bankAccountsign.cusbankid
        formData.openbankaccid = bankAccountsign.bankid
        formData.exbankname = bankAccountsign.bankname
        formData.extend = extendInfo
        formData.operatetype = 2

        getExpandableList({
            cusbankid: formData.cusbankid,
            usabletype: formData.accounttype
        })
    }),
    onError: ((err) => {
        ElMessage.error(err)
    })
})

// 查询扩展信息
const { dataList: expandableList, run: getExpandableList } = useRequest(queryBooleanForAmount, {
    manual: true,
    params: {
        extendbiztype: '1',
    }
})

const detailProps1: CellProp[] = [
    { prop: 'accounttype', label: 'account.fundacct.sign.cancel.accounttype', formatValue: (val) => val === 1 ? 'account.fundacct.sign.cancel.person' : 'account.fundacct.sign.cancel.companny' },
    { prop: 'certtype', label: 'account.fundacct.sign.cancel.certtype' },
    { prop: 'cusbankid', label: 'account.fundacct.sign.cancel.cusbankid', formatValue: () => props.selectedItem.cusBankName },
    { prop: 'certid', label: 'account.fundacct.sign.cancel.certid' },
    { prop: 'exbankname', label: 'account.fundacct.sign.cancel.exbankname' },
    { prop: 'bankaccountno', formatLabel: () => formData.accounttype === 1 ? 'account.fundacct.sign.cancel.bankaccountno' : 'account.fundacct.sign.cancel.bankaccountno1' },
    { prop: 'bankaccountname', label: 'account.fundacct.sign.cancel.bankaccountname' },
    { prop: 'mobilephone', label: 'account.fundacct.sign.cancel.mobilephone' },
]

const detailProps2 = computed<CellProp[]>(() => expandableList.value.map((e) => ({
    prop: e.fieldcode,
    label: e.fieldname
})))

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

const onSubmit = (flag: number) => {
    ElMessageBox.confirm(
        flag === 1 ? t('account.fundacct.sign.cancel.tips1') : t('account.fundacct.sign.cancel.tips2'),
        t('common.alert')
    ).then(() => {
        const rawData = toRaw(formData)
        loading.value = true

        if (flag === 1) {
            rawData.type = 0
            rawData.operatetype = 5
        } else {
            rawData.type = 1
            rawData.operatetype = 2
        }

        dealAccountSign({
            data: rawData
        }).then(() => {
            ElMessage.success(t('common.tips3'))
            onCancel(true)
        }).catch((err) => {
            ElMessage.error(t('common.tips4') + err)
        }).finally(() => {
            loading.value = false
        })
    })
}
</script>