<template>
    <!-- 期货账户 -->
    <div class="account_info_futures" :loading="loading">
        <filterCustomTable @search="search"></filterCustomTable>
        <div class="tltLeft">
            <span class="blue">
                <svg class="icon svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-shuzhuangtu" />
                </svg>
                {{getUserName()}}
            </span>
            <BtnList :btnList="firstBtn" />
        </div>
        <a-collapse
            class="spotCollapse"
            v-for="(item, i) in tableList"
            :key="i + '11'"
            :bordered="false"
        >
            <template #expandIcon="props">
                <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
                    <use xlink:href="#icon-shouqi1" />
                </svg>
                <svg class="icon svg-icon" aria-hidden="true" v-else>
                    <use xlink:href="#icon-shouqi2" />
                </svg>
            </template>
            <a-collapse-panel>
                <template #header>
                    <a-row class="headRow">
                        <a-col :span="12">
                            {{item.mainAcc.accountname}} {{ '-' + item.mainAcc.hedgeaccountcode}}
                            ({{item.subacclist.length}}）{{item.mainAcc.fcname}}
                        </a-col>
                        <a-col :span="12">
                            <BtnList :btnList="secondBtn" @onClick="secondeClick(item)" />
                        </a-col>
                    </a-row>
                </template>
                <a-collapse class="futureCollapse" accordion :bordered="false">
                    <a-collapse-panel
                        :show-arrow="false"
                        v-for="(sub, i) in item.subacclist"
                        :key="i + '11'"
                    >
                        <template #header>
                            <a-row class="contRow">
                                <a-col :span="12">{{sub.accountname}}-{{sub.accountid}}</a-col>
                                <a-col :span="12">{{getTaAccountStatus(sub.tradestatus)}}</a-col>
                            </a-row>
                        </template>
                        <BtnList
                            :btnList="getBtnList(sub.tradestatus)"
                            @onClick="thirdClick(item, sub)"
                        />
                    </a-collapse-panel>
                </a-collapse>
            </a-collapse-panel>
        </a-collapse>
        <Add @refresh="queryTable" />
        <AddChild
            :selectedData="firstData"
            :userList="userList"
            :marginList="marginList"
            :feeList="feeList"
            @updateTrader="queryUserList"
            @refresh="queryTable"
        />
        <Modify :selectedData="firstData" @refresh="queryTable" />
        <ModifyChild
            @refresh="queryTable"
            :userList="userList"
            :marginList="marginList"
            :feeList="feeList"
            :secondeData="secondeData"
            :selectedData="firstData"
        />
        <Detail
            :selectedData="firstData"
            :secondeData="secondeData"
            :userList="userList"
            :marginList="marginList"
            :feeList="feeList"
        />
        <Cancel
            @refresh="queryTable"
            :userList="userList"
            :marginList="marginList"
            :feeList="feeList"
            :secondeData="secondeData"
            :selectedData="firstData"
        />
        <Credit @refresh="queryTable" :selectedData="firstData" :secondeData="secondeData" />
    </div>
</template>

<script lang="ts">
import { defineComponent, initData, _getBtnList, contextMenu, BtnList } from '@/common/export/table';
import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
import { getAccountStatus, getTaAccountStatus, handleModalData } from '../setup';
import { handleTradeTemplate, queryTableList } from './setup';
import { getUserName } from '@/services/bus/user';
import Add from '../../compoments/add-futures/index.vue';
import AddChild from '../../compoments/add-child-futures/index.vue';
import Modify from '../../compoments/modify-futures/index.vue';
import ModifyChild from '../../compoments/modify-futures-son/index.vue';
import Detail from '../../compoments/detail-futures/index.vue';
import Cancel from '../../compoments/cancel-futures/index.vue';
import Credit from '../../compoments/credit-futures/index.vue';
import { ErmcpTaAccountEx } from '@/services/go/ermcp/account/interface';
import { ref } from 'vue';
import { handlerManagerList } from '@/common/setup/user';

export default defineComponent({
    name: 'account_info_futures',
    components: {
        contextMenu,
        BtnList,
        filterCustomTable,
        Add,
        AddChild,
        Modify,
        ModifyChild,
        Detail,
        Cancel,
        Credit,
    },
    setup() {
        const { loading, tableList, queryTable } = queryTableList();
        const [firstBtn, secondBtn, thirdBtn] = _getBtnList('account_info_futures', true).value;
        // 交易用户
        const { tableList: userList, queryTable: queryUserList } = handlerManagerList(loading, 2);
        // 交易模板
        const { marginList, feeList, queryTemplate } = handleTradeTemplate();
        initData(() => {
            queryTable();
            queryUserList();
            queryTemplate();
        });
        const firstData = ref<ErmcpTaAccountEx | null>(null);
        const secondeData = ref<ErmcpTaAccountEx | null>(null);
        function secondeClick(item: ErmcpTaAccountEx) {
            firstData.value = item;
        }
        function thirdClick(item: ErmcpTaAccountEx, sub: ErmcpTaAccountEx) {
            firstData.value = item;
            secondeData.value = sub;
        }
        function getBtnList(type: number) {
            if (type === 1) {
                // 1:正常
                return thirdBtn;
            } else {
                return thirdBtn.filter((el) => {
                    return el.lable === '详情';
                });
            }
        }
        // 查询
        function search(value: any) {}

        return {
            firstData,
            secondeData,
            secondeClick,
            thirdClick,
            loading,
            search,
            tableList,
            getTaAccountStatus,
            getUserName,
            queryTable,
            getBtnList,
            firstBtn,
            secondBtn,
            thirdBtn,
            userList,
            marginList,
            feeList,
            queryUserList,
        };
    },
});
</script>

<style lang="less">
.account_info_futures {
    .tltLeft {
        padding-left: 12px;
    }
    .btn-list {
        .btnPrimary.ant-btn {
            height: 26px;
            line-height: 26px;
        }
    }
    .ant-collapse.spotCollapse.ant-collapse-borderless {
        padding-left: 43px;
        padding-right: 43px;
        .btnPrimary.ant-btn {
            margin-top: -3px;
        }
    }
    .ant-collapse.busyCollapse {
        .operBtn.ant-btn {
            margin-top: 0;
            margin-bottom: 0;
            height: 26px;
            line-height: 26px;
        }
    }
    .ant-row.headRow {
        .ant-col:nth-child(2) {
            text-align: right;
            .operBtn.ant-btn {
                float: right;
                margin-top: -3px;
                margin-bottom: 10px;
                height: 26px;
                line-height: 27px;
            }
        }
    }
}
</style>
