<!-- 会员机构管理-机构管理-做市会员管理-详情 -->
<template>
    <app-drawer title="详情" width="900" v-model:show="show" :loading="loading" :refresh="refresh">
        <app-table-details :title="t('member.institution.marketer.details.subtitle')" :data="data?.organ" :label-width="160" :cell-props="detailProps1" :column="2" />
        <app-table-details title="默认做市商资金账户" :data="data?.roleNight[0]" :label-width="160" :cell-props="detailProps2" :column="1" />
        <app-table-details title="风险率信息" :data="marker" :label-width="160" :cell-props="detailProps3" :column="2" />
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { i18n } from '@/stores'
import { useRequest } from '@/hooks/request'
import { CellProp } from '@pc/components/base/table-details/types'
import { useEnum } from '@/hooks/enum'
import { queryRoleDetail } from '@/services/api/member'
import { getRiskRatioTypeForMarketer } from '@/services/api/investor'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'

const props = defineProps({
    record: {
        type: Object as PropType<Member.OrganRoleRsp>,
        required: true
    }
})

const { global: { t } } = i18n

const flagEnum = useEnum('flag') // 确认状态
const customerTypeEnum = useEnum('customerType')
const marketerTypeEnum = useEnum('marketerType') // 风险率类型

const show = shallowRef(true)
const refresh = shallowRef(false)
const loading = shallowRef(false)
const marker = shallowRef<Investor.RiskRatioTypeForMarketerRsp>()

const { data } = useRequest(queryRoleDetail, {
    params: {
        rolename: 'marketer',
        userid: props.record.userid
    },
    onError: (err) => {
        ElMessage.error(err)
    },
    onSuccess: (res) => {
        getRiskRatioTypeForMarketer({
            data: {
                riskcontrolmode: 2,
                customertype: res.data.customertype.customertype
            }
        }).then((data) => {
            marker.value = data.data
        })
    }
})

const detailProps1: CellProp[] = [
    { prop: 'accountname', label: 'member.institution.marketer.details.accountname' },
    { prop: 'userName', label: 'member.institution.marketer.details.userName', formatValue: () => {
        return data.value?.users.username
    } },
    { prop: 'customertype', label: '客户类别:', formatValue: () => customerTypeEnum.getEnumTypeName(data.value?.customertype.customertype) }
]

const detailProps2: CellProp[] = [
    { prop: 'enumdicname', label: '*币种'},
    { prop: 'reckonaccountid', label: '*资金账户' }
]

const detailProps3 = computed<CellProp[]>(() => {
    const { notesaferatio } = marker.value ?? {}
    return [
        { prop: 'riskcontrolmode', label: 'member.institution.marketer.details.riskcontrolmode', formatValue: (val) => val === 1 ? t('member.institution.marketer.details.riskcontrolmode1') : t('member.institution.marketer.details.riskcontrolmode2') },
        { prop: 'customertype', label: 'member.institution.marketer.details.customertype1', formatValue: (val) => marketerTypeEnum.getEnumTypeName(val) },
        { prop: 'riskratiocalcmode', label: 'member.institution.marketer.details.riskratiocalcmode', formatValue: (val) => val === 1 ? t('member.institution.marketer.details.riskratiocalcmode1') : t('member.institution.marketer.details.riskratiocalcmode2') },
        { prop: 'notemarginriskratio', label: 'member.institution.marketer.details.notemarginriskratio', formatValue: (val) => val + '%', show: !notesaferatio },
        { prop: 'addmarginriskratio', label: 'member.institution.marketer.details.addmarginriskratio', formatValue: (val) => val + '%', show: !notesaferatio },
        { prop: 'cutriskratio', label: 'member.institution.marketer.details.cutriskratio', formatValue: (val) => val + '%', show: !notesaferatio },
        { prop: 'cutbackriskratio', label: 'member.institution.marketer.details.cutbackriskratio', formatValue: (val) => val + '%', show: !notesaferatio },
        { prop: 'notesaferatio', label: 'member.institution.marketer.details.notesaferatio', formatValue: (val) => val + '%', show: !!notesaferatio },
        { prop: 'addsaferatio', label: 'member.institution.marketer.details.addsaferatio', formatValue: (val) => val + '%', show: !!notesaferatio },
        { prop: 'recoversaferatio', label: 'member.institution.marketer.details.recoversaferatio', formatValue: (val) => val + '%', show: !!notesaferatio },
        { prop: 'cutsaferatio', label: 'member.institution.marketer.details.cutsaferatio', formatValue: (val) => val + '%', show: !!notesaferatio },
        { prop: 'isdefault', label: 'member.institution.marketer.details.isdefault', formatValue: (val) => flagEnum.getEnumTypeName(val) },
        { prop: 'markets', label: 'member.institution.marketer.details.markets' },
    ]
})

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

</script>