<template>
  <!-- 期货账户 -->
  <div class="account_info_futures account_info_container" :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>
        {{ getAreaUserName() }}
      </span>
      <mtp-table-button :buttons="firstBtn" @click="openComponent" />
    </div>
    <div class="a-collapse-container">
      <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">
                <mtp-table-button :buttons="secondBtn" :record="item" @click="openComponent" />
              </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>
              <mtp-table-button :buttons="thirdBtn" :record="sub" @click="openSecondBtnAction" />
            </a-collapse-panel>
          </a-collapse>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <component :is="componentId" v-if="componentId" :selectedData="selectedData" :firstSelectedData="firstSelectedData" :userList="userList" :marginList="marginList" :feeList="feeList" @update="queryUserList" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { BtnListType } from '@/common/components/btnList/interface';
import { defineAsyncComponent, defineComponent, MtpTableButton } from '@/common/export/commonTable';
import { initData } from '@/common/methods';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { getTableButton } from '@/common/setup/table/button';
import { handlerManagerList } from '@/common/setup/user';
import { getAreaUserName } from '@/services/bus/user';
import { ErmcpTaAccount, ErmcpTaAccountEx } from '@/services/go/ermcp/account/interface';
import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
import { ref, Ref } from 'vue';
import { getTaAccountStatus } from '../setup';
import { handleTradeTemplate, queryTableList } from './setup';

export default defineComponent({
    name: 'account_info_futures',
    components: {
        MtpTableButton,
        filterCustomTable,
        detail: defineAsyncComponent(() => import('../../compoments/detail-futures/index.vue')), // 详情
        account_futures_add: defineAsyncComponent(() => import('../../compoments/add-futures/index.vue')), // 新增账户
        account_futures_child_add: defineAsyncComponent(() => import('../../compoments/add-child-futures/index.vue')), // 新增子账户
        account_futures_modify: defineAsyncComponent(() => import('../../compoments/modify-futures/index.vue')), // 修改账户
        account_futures_child_modify: defineAsyncComponent(() => import('../../compoments/modify-futures-son/index.vue')), // 修改子账号
        account_futures_child_cancel: defineAsyncComponent(() => import('../../compoments/cancel-futures/index.vue')), // 注销
        account_futures_child_credit: defineAsyncComponent(() => import('../../compoments/credit-futures/index.vue')), // 授信
    },
    setup() {
        const { loading, tableList, queryTable } = queryTableList();

        const firstBtn = getTableButton(['account_futures_setting', 'account_futures_add']);
        const secondBtn = getTableButton(['account_futures_modify', 'account_futures_child_add']);
        const thirdBtn = getTableButton(['account_futures_child_modify', 'account_futures_child_credit', 'account_futures_child_cancel', 'detail']);

        // 交易用户
        const { tableList: userList, queryTable: queryUserList } = handlerManagerList(loading, 2);
        // 交易模板
        const { marginList, feeList, queryTemplate } = handleTradeTemplate();
        initData(() => {
            queryTable();
            queryUserList();
            queryTemplate();
        });

        function getBtnList(type: number) {
            if (type === 1) {
                // 1:正常
                return thirdBtn;
            } else {
                return thirdBtn.filter((el) => {
                    return el.lable === '详情';
                });
            }
        }

        // 弹窗选中的数据
        const selectedData = ref<ErmcpTaAccount>();
        // 控制异步组件
        const { componentId, closeComponent, openComponent } = handleModalComponent<ErmcpTaAccount>(() => {}, selectedData as Ref<ErmcpTaAccount>);
        // 处理点击 二级按钮时候 选中的数据
        // 一级 对应的选中数据
        const firstSelectedData = ref<ErmcpTaAccountEx>();
        // 二级按钮 打开，处理选中上一层数据
        function openSecondBtnAction(item: BtnListType, second: ErmcpTaAccount) {
            tableList.value.forEach((el) => {
                el.subacclist.forEach((sub) => {
                    if (second.userid === sub.userid) {
                        firstSelectedData.value = el;
                    }
                });
            });
            openComponent(item, second);
        }

        // 查询
        function search(value: any) {}

        return {
            loading,
            search,
            tableList,
            getTaAccountStatus,
            getAreaUserName,
            queryTable,
            getBtnList,
            firstBtn,
            secondBtn,
            thirdBtn,
            userList,
            marginList,
            feeList,
            queryUserList,
            componentId,
            closeComponent,
            openComponent,
            selectedData,
            firstSelectedData,
            openSecondBtnAction,
        };
    },
});
</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>
