<!-- 会员机构管理-机构管理-账户个性化设置 -->
<template>
    <div class="g-view-tree">
        <app-view>
            <el-tree ref="treeRef" :data="nodeList" node-key="id" :props="{ label: 'name' }"
                :default-expanded-keys="['-1', '-2']" @node-click="nodeClick" highlight-current />
        </app-view>
        <app-view>
            <div style="display: flex;justify-content: space-between;">
                <app-operation :data-list="getActionButtons(['member_institution_tradecfg_add'])"
                    @click="openComponent" />
                <app-operation
                    :data-list="getActionButtons(['member_institution_tradecfg_modify', 'member_institution_tradecfg_delete'])"
                    @click="openComponent" v-if="data" />
            </div>
            <template v-if="data">
                <app-table-details :title="t('member.institution.tradecfg.subtitle')" :data="currentInfo" :label-width="160" :cell-props="detailProps"
                    :column="2" />
                <app-table :data="data.druleList" :columns="ruleColumns">
                    <template #headerLeft>
                        <b>{{ t('member.institution.tradecfg.traderule') }}</b>
                    </template>
                    <!-- 平台 -->
                    <template #paramvalue="{ row }">
                        <span v-if="row.ruleid === 105">{{ feetypeEnum.getEnumTypeName(row.paramvalue) }}</span>
                        <span v-else>{{ row.paramvalue || 0 }}</span>
                    </template>
                    <!-- 个性化 -->
                    <template #cvalue="{ row }">
                        <span v-if="row.ruleid === 105">
                            {{ handleNoneValue(feetypeEnum.getEnumTypeName(row.cvalue)) }}
                        </span>
                        <span v-else>{{ handleNoneValue(row.cvalue) }}</span>
                    </template>
                </app-table>
                <app-table :data="data.dfeeList" :columns="feeColumns">
                    <template #headerLeft>
                        <b>{{ t('member.institution.tradecfg.tradefee') }}</b>
                    </template>
                    <!-- 平台 -->
                    <template #exchangevalue="{ row }">
                        <template v-if="row.feealgorithm">
                            <span>{{ scfRiskMode.getEnumTypeName(row.feealgorithm) }}：</span>
                            <span>{{ row.exchangevalue + (row.feealgorithm === 1 && '‱') }}</span>
                        </template>
                        <template v-else>
                            {{ handleNoneValue() }}
                        </template>
                    </template>
                    <!-- 个性化 -->
                    <template #cvalue="{ row }">
                        <template v-if="row.crithm">
                            <span>{{ scfRiskMode.getEnumTypeName(row.crithm) }}：</span>
                            <span>{{ row.cvalue + (row.crithm === 1 && '‱') }}</span>
                        </template>
                        <template v-else>
                            {{ handleNoneValue() }}
                        </template>
                    </template>
                </app-table>
            </template>
            <el-empty v-else />
        </app-view>
        <component :is="componentMap.get(componentId)" v-bind="{ record: toRaw(data) }" @closed="closeComponent"
            v-if="componentId" />
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, toRaw, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { handleNoneValue, buildTree } from '@/filters'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { useOperation } from '@/hooks/operation'
import { createTree, OrganDetailTradeConfigView } from '@/services/api/member'
import { CellProp } from '@pc/components/base/table-details/types'
import AppTable from '@pc/components/base/table/index.vue'
import AppOperation from '@pc/components/base/operation/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'
import { i18n } from '@/stores'

const { global: { t } } = i18n

const customerTypeEnum = useEnum('customerType')
const feetypeEnum = useEnum('feetype')
const scfRiskMode = useEnum('SCFRiskMode')
const traderule = useEnum('traderule')
const tradefee = useEnum('tradefee')

const treeRef = ref()
const nodeList = ref<(Member.CreateTreeRsp & { children: Member.CreateTreeRsp[]; })[]>([])
const selectedNode = ref<Node>()

const currentInfo = reactive({
    userName: '',
    accountName: '',
    goodsName: '',
    customerType: ''
})

const qs = computed<Member.TradeConfigViewReq>(() => {
    const data = selectedNode.value?.data
    return {
        userid: data?.userid,
        accountid: data?.accountid,
        marketid: data?.marketid,
        goodsid: data?.goodsid,
        tradetype: data?.tradetype,
        ruletype: 1
    }
})

const { componentMap, componentId, openComponent, closeComponent, getActionButtons } = useOperation<Member.TradeConfigViewRsp>({
    onClose: (componentId) => {
        getNodeList()
        if (componentId === 'member_institution_tradecfg_modify') {
            getDetails(qs.value)
        }
        if (componentId === 'member_institution_tradecfg_delete') {
            data.value = undefined
        }
    }
})

const { run: getNodeList } = useRequest(createTree, {
    onSuccess: (res) => {
        res.data.push(
            {
                accountid: 0,
                goodsid: 0,
                id: '-1',
                level: 0,
                marketid: 0,
                name: t('member.institution.tradecfg.name1'),
                pid: '0',
                tradetype: 1,
                userid: 0,
            },
            {
                accountid: 0,
                goodsid: 0,
                id: '-2',
                level: 0,
                marketid: 0,
                name: t('member.institution.tradecfg.name2'),
                pid: '0',
                tradetype: 2,
                userid: 0,
            }
        )
        nodeList.value = buildTree(res.data, 'id', 'pid', (node) => node.pid === '0')

        // 设置选中节点
        nextTick(() => {
            const data = selectedNode.value?.data
            if (data) {
                treeRef.value.setCurrentKey(data.id)
            }
        })
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const { data, run: getDetails } = useRequest(OrganDetailTradeConfigView, {
    manual: true,
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps = computed<CellProp[]>(() => [
    { prop: 'userName', formatLabel: () => (data.value?.tradetype === 1 ? 'member.institution.tradecfg.userName' : 'member.institution.tradecfg.userName1') },
    { prop: 'accountName', label: 'member.institution.tradecfg.accountName' },
    { prop: 'goodsName', label: 'member.institution.tradecfg.goodsName' },
    { prop: 'customerType', label: 'member.institution.tradecfg.customerType', formatValue: () => customerTypeEnum.getEnumTypeName(data.value?.paramid) },
])

const ruleColumns = computed<Model.TableColumn[]>(() => [
    { field: 'ruleid', label: 'member.institution.tradecfg.rulename', formatValue: (val) => traderule.getEnumTypeName(val) },
    { field: 'paramvalue', label: 'member.institution.tradecfg.paramvalue' },
    { field: 'cvalue', label: 'member.institution.tradecfg.cvalue' },
])

const feeColumns = computed<Model.TableColumn[]>(() => [
    { field: 'tradefeeid', label: 'member.institution.tradecfg.tradefeename', formatValue: (val) => tradefee.getEnumTypeName(val) },
    { field: 'exchangevalue', label: 'member.institution.tradecfg.exchangevalue' },
    { field: 'cvalue', label: 'member.institution.tradecfg.cvalue' },
])

const nodeClick = (data: Member.CreateTreeRsp, node: Node) => {
    if (data.goodsid) {
        selectedNode.value = node
        currentInfo.goodsName = node.label
        currentInfo.accountName = node.parent.label
        currentInfo.userName = node.parent.parent.label
        getDetails(qs.value)
    }
}
</script>