<!-- 交易商管理-个性化管理-交易商个性化 -->
<template>
    <app-view>
        <template #header>
            <el-form ref="formRef" class="el-form--filter" :model="qs" :rules="formRules" :show-message="false">
                <el-form-item :label="t('investor.custom.tradecfg.usergroupid')" prop="usergroupid">
                    <el-select v-model="selectedGroup" value-key="id" :validate-event="false" @change="onGroupChange">
                        <template v-for="item in groupList" :key="item.id">
                            <el-option :label="item.name" :value="item" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item :label="t('investor.custom.tradecfg.marketid')" prop="marketid">
                    <el-select v-model="selectedMarket" value-key="id" :validate-event="false" @change="onMarketChange">
                        <template v-for="item in marketList" :key="item.id">
                            <el-option :label="item.name" :value="item" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item :label="t('investor.custom.tradecfg.goodsid')" prop="goodsid">
                    <el-select v-model="selectedGoods" value-key="id" :validate-event="false">
                        <template v-for="item in goodsList" :key="item.id">
                            <el-option :label="item.name" :value="item" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">{{ t('operation.search') }}</el-button>
                </el-form-item>
            </el-form>
        </template>
        <div style="display: flex;justify-content: space-between;">
            <app-operation :data-list="getActionButtons(['investor_custom_tradecfg_add'])" @click="openComponent" />
            <app-operation
                :data-list="getActionButtons(['investor_custom_tradecfg_modify', 'investor_custom_tradecfg_delete'])"
                @click="openComponent" v-if="data" />
        </div>
        <template v-if="data">
            <app-table-details :title="t('common.baseinfo')" :data="data" :label-width="160" :cell-props="detailProps"
                :column="3" />
            <app-table :data="data.druleList" :columns="ruleColumns">
                <template #headerLeft>
                    <b>{{ t('investor.custom.tradecfg.subtitle') }}</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 #dvalue="{ row }">
                    <span v-if="row.ruleid === 105">
                        {{ handleNoneValue(feetypeEnum.getEnumTypeName(row.dvalue)) }}
                    </span>
                    <span v-else>{{ handleNoneValue(row.dvalue) }}</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('investor.custom.tradecfg.subtitle1') }}</b>
                </template>
                <!-- 商品设置值 -->
                <template #exchangevalue="{ row }">
                    <template v-if="row.feealgorithm">
                        <span v-if="row.feealgorithm === 1">{{ parseTenThousand(row.exchangevalue) }}</span>
                        <span v-else>{{ row.exchangevalue }}</span>
                    </template>
                    <template v-else>
                        {{ handleNoneValue() }}
                    </template>
                </template>
                <!-- 会员设置值 -->
                <template #dvalue="{ row }">
                    <template v-if="row.drithm">
                        <span v-if="row.drithm === 1">{{ parseTenThousand(row.dvalue) }}</span>
                        <span v-else>{{ row.dvalue }}</span>
                    </template>
                    <template v-else>
                        {{ handleNoneValue() }}
                    </template>
                </template>
                <!-- 个性化 -->
                <template #cvalue="{ row }">
                    <template v-if="row.crithm">
                        <span v-if="row.crithm === 1">{{ parseTenThousand(row.cvalue) }}</span>
                        <span v-else>{{ row.cvalue }}</span>
                    </template>
                    <template v-else>
                        {{ handleNoneValue() }}
                    </template>
                </template>
            </app-table>
        </template>
        <el-empty v-else />
        <component :is="componentMap.get(componentId)" v-bind="{ record: toRaw(data) }" @closed="closeComponent"
            v-if="componentId" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed, nextTick, toRaw } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { parseTenThousand, handleNoneValue } from '@/filters'
import { getFeeAlgorithmName } from '@/constants/order'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { useOperation } from '@/hooks/operation'
import { getInvestorTree, tradeConfigView } from '@/services/api/investor'
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 { componentMap, componentId, openComponent, closeComponent, getActionButtons } = useOperation<Model.TradeConfigViewRsp>({
    onClose: (componentId) => {
        getNodeList()
        if (componentId === 'investor_custom_tradecfg_modify') {
            onSearch()
        }
        if (componentId === 'investor_custom_tradecfg_delete') {
            qs.value = {}
            data.value = undefined
        }
    }
})

const customerTypeEnum = useEnum('customerType')
const feetypeEnum = useEnum('feetype')

const { global: { t } } = i18n
const formRef = shallowRef<FormInstance>()
const qs = shallowRef<Partial<Model.TradeConfigViewReq>>({})
const info = shallowRef<Partial<{
    groupName: string,
    marketName: string,
    goodsName: string
}>>({})

const selectedGroup = shallowRef<Model.InvestorTreeRsp>() // 选中的分组对象
const selectedMarket = shallowRef<Model.InvestorTreeRsp>() // 选中的市场对象
const selectedGoods = shallowRef<Model.InvestorTreeRsp>() // 选中的商品对象

// 分组列表
const groupList = computed(() => nodeList.value.filter((e) => e.pid === '-1'))
// 市场列表
const marketList = computed(() => nodeList.value.filter((e) => e.pid === selectedGroup.value?.id))
// 商品列表
const goodsList = computed(() => nodeList.value.filter((e) => e.pid === selectedMarket.value?.id))

const { dataList: nodeList, run: getNodeList } = useRequest(getInvestorTree, {
    onError: (err) => {
        ElMessage.error(err)
    }
})

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

const detailProps: CellProp[] = [
    { prop: 'usergroupid', label: 'investor.custom.tradecfg.usergroupid1', formatValue: () => info.value.groupName },
    { prop: 'marketid', label: 'investor.custom.tradecfg.marketid1', formatValue: () => info.value.marketName },
    { prop: 'goodsid', label: 'investor.custom.tradecfg.goodsid1', formatValue: () => info.value.goodsName },
    { prop: 'paramid', label: 'investor.custom.tradecfg.paramid', formatValue: (val) => customerTypeEnum.getEnumTypeName(val) },
    { prop: 'marketmarginvaluedisplay', label: 'investor.custom.tradecfg.marketmarginvaluedisplay' },
]

const ruleColumns = computed<Model.TableColumn[]>(() => [
    { field: 'rulename', label: 'investor.custom.tradecfg.rulename' },
    { field: 'paramvalue', label: 'investor.custom.tradecfg.paramvalue' },
    { field: 'dvalue', label: 'investor.custom.tradecfg.dvalue', show: qs.value.usergroupid !== 0 },
    { field: 'cvalue', label: 'investor.custom.tradecfg.cvalue' },
])

const feeColumns = computed<Model.TableColumn[]>(() => [
    { field: 'tradefeename', label: 'investor.custom.tradecfg.tradefeename' },
    { field: 'feealgorithm', label: 'investor.custom.tradecfg.feealgorithm', formatValue: (val) => getFeeAlgorithmName(val) },
    { field: 'exchangevalue', label: 'investor.custom.tradecfg.exchangevalue' },
    { field: 'dvalue', label: 'investor.custom.tradecfg.dvalue', show: qs.value.usergroupid !== 0 },
    { field: 'cvalue', label: 'investor.custom.tradecfg.cvalue' },
])

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

// 选择分组
const onGroupChange = () => {
    selectedMarket.value = undefined
    selectedGoods.value = undefined
}

// 选择市场
const onMarketChange = () => {
    selectedGoods.value = undefined
}

const onSearch = () => {
    qs.value = {
        usergroupid: selectedGroup.value?.usergroupid,
        marketid: selectedMarket.value?.marketid,
        goodsid: selectedGoods.value?.goodsid,
    }
    nextTick(() => {
        formRef.value?.validate((valid) => {
            if (valid) {
                info.value = {
                    groupName: selectedGroup.value?.name,
                    marketName: selectedMarket.value?.name,
                    goodsName: selectedGoods.value?.name,
                }
                run(qs.value)
            } else {
                data.value = undefined
            }
        })
    })
}
</script>