<template>
  <!-- 交易账号通用详情-->
  <Des :list="desList"></Des>
</template>

<script lang="ts">
import { defineComponent, PropType, watchEffect } from 'vue';
import { ErmcpLoginUserEx, ErmcpTaAccount, ErmcpTaAccountEx } from '@/services/go/ermcp/account/interface';
import { Des, handleDesList } from '@/common/components/commonDes';

export default defineComponent({
    name: 'futures-comom-detail',
    components: {
        Des,
    },
    props: {
        selectedData: {
            type: Object as PropType<ErmcpTaAccountEx>,
            default: {},
        },
        secondeData: {
            default: {},
            type: Object as PropType<ErmcpTaAccount>,
        },
        userList: {
            type: Array as PropType<ErmcpLoginUserEx[]>,
            default: [],
        },
    },
    setup(props) {
        const { desList, getDesList } = handleDesList();
        function getRoleName() {
            const item = props.userList.find((e) => e.roleid === props.secondeData?.relateduserid);
            return item ? item.rolename : '--';
        }
        watchEffect(() => {
            if (props.selectedData) {
                const { secondeData, selectedData } = props;
                const data = props.selectedData;
                getDesList([
                    { label: '所属期货账户', value: selectedData.mainAcc?.accountname },
                    { label: '账户名称', value: secondeData.accountname },
                    { label: '期货保证金', value: secondeData.trademargintmpname },
                    { label: '期货手续费', value: secondeData.tradefeetmpname },
                    { label: '指定交易用户', value: getRoleName() },
                ]);
            }
        });
        return {
            desList,
        };
    },
});
</script>

<style lang="less">
</style>;
