<template>
  <!-- 交易账户 -->
  <div class="account_info_trade 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"></use>
        </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"></use>
          </svg>
          <svg class="icon svg-icon" aria-hidden="true" v-else>
            <use xlink:href="#icon-shouqi2"></use>
          </svg>
        </template>
        <a-collapse-panel>
          <template #header>
            <a-row class="headRow">
              <a-col :span="12"> {{ item.rolename }}({{ item.userlist.length }}) </a-col>
              <a-col :span="12">
                <mtp-table-button :buttons="secondBtn" :record="item" @click="openComponent" />
              </a-col>
            </a-row>
          </template>
          <a-collapse class="busyCollapse" v-for="(sub, i) in item.userlist" :key="i + '11'" :bordered="false">
            <a-collapse-panel :show-arrow="false">
              <template #header>
                <a-row class="contRow">
                  <a-col :span="12">{{ sub.loginname }}-{{ sub.logincode }}</a-col>
                  <a-col :span="12">{{ getRoleTypeName(sub.loginstatus) }}</a-col>
                </a-row>
              </template>
              <mtp-table-button :buttons="handleBtnList(thirdBtn,sub)" :record="sub" @click="openSecondBtnAction" />
            </a-collapse-panel>
          </a-collapse>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <component :is="componentId" v-if="componentId" :accountList="accountList" :tableList="tableList" :firstBtnData="firstSelectedData" :selectedData="selectedData" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { initData } from '@/common/methods';
import { defineAsyncComponent, defineComponent, MtpTableButton } from '@/common/export/commonTable';
import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
import { getRoleTypeName, useSelectedData, handleBtnList } from '../setup';
import { getAreaUserName } from '@/services/bus/user';
import { handleTableList } from '../setup';
import { ErmcpLoginUser, ErmcpTaAccount, ErmcpTaAccountEx } from '@/services/go/ermcp/account/interface';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { QueryAccMgrTaaccount } from '@/services/go/ermcp/account';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { handlerManagerList } from '@/common/setup/user';
import { getTableButton } from '@/common/setup/table/button';
import { Ref, ref } from 'vue';

export default defineComponent({
  name: 'account_info_trade',
  components: {
    MtpTableButton,
    filterCustomTable,
    detail: defineAsyncComponent(() => import('../../compoments/detail-trader/index.vue')),
    account_trade_modify: defineAsyncComponent(() => import('../../compoments/modify-traders/index.vue')),
    account_trade_add: defineAsyncComponent(() => import('../../compoments/add-traders/index.vue')),
    account_trade_child_add: defineAsyncComponent(() => import('../../compoments/add-child-traders/index.vue')),
    account_trade_child_locked: defineAsyncComponent(() => import('../../compoments/locked-trader/index.vue')),
    account_trade_child_unlocked: defineAsyncComponent(() => import('../../compoments/unlocked-trader/index.vue')),
    account_trade_child_cancel: defineAsyncComponent(() => import('../../compoments/cancel-trader/index.vue')),
    account_trade_child_reset: defineAsyncComponent(() => import('../../compoments/reset-trader/index.vue')),
    account_trade_child_modify: defineAsyncComponent(() => import('../../compoments/modify-child-traders/index.vue')),
  },
  setup() {
    // 加载状态
    const loading = ref<boolean>(false);
    const { tableList, queryTable } = handlerManagerList(loading, 2);

    const firstBtn = getTableButton(['account_trade_add']);
    const secondBtn = getTableButton(['account_trade_modify', 'account_trade_child_add']);
    const thirdBtn = getTableButton(['account_trade_add', 'account_trade_modify', 'account_trade_child_add'], true);

    // 获取列表数据
    function queryTableAction() {
      handleTableList(queryTable, tableList);
    }

    // 授权期货账户
    const accountList = ref<ErmcpTaAccount[]>([]);
    // 弹窗选中的数据
    const selectedData = ref<ErmcpLoginUser>();
    // 控制异步组件
    const { componentId, closeComponent, openComponent } = handleModalComponent<ErmcpLoginUser>(queryTableAction, selectedData as Ref<ErmcpLoginUser>);

    // 处理点击 二级按钮时候 选中的数据
    const { firstSelectedData, openSecondBtnAction } = useSelectedData(tableList, openComponent);

    initData(() => {
      queryTableAction();
      // 处理授权期货账户
      queryResultLoadingAndInfo(QueryAccMgrTaaccount, loading).then((res) => {
        accountList.value.length = 0;
        res.forEach((el: ErmcpTaAccountEx) => {
          const { subacclist } = el;
          subacclist.forEach((e) => {
            if (e.tradestatus === 1) {
              //交易状态 - 1:正常
              accountList.value.push(e);
            }
          });
        });
      });
    });
    // 查询
    function search(value: any) { }

    return {
      selectedData,
      firstBtn,
      secondBtn,
      thirdBtn,
      loading,
      search,
      tableList,
      accountList,
      getRoleTypeName,
      handleBtnList,
      getAreaUserName,
      componentId,
      closeComponent,
      openComponent,
      openSecondBtnAction,
      firstSelectedData,
    };
  },
});
</script>

<style lang="less">
.account_info_trade {
    .tltLeft {
        padding-left: 12px;
    }
    .btn-list {
        .btnPrimary.ant-btn {
            height: 26px;
            line-height: 26px;
        }
        // .operBtn.ant-btn {
        //   margin-top: 0;
        //   margin-left: 0;
        // }
    }
    .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>
