<template>
  <!-- 交易账户 -->
  <div class="account_info_trade"
       :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>
        {{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"></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">
              <BtnList :btnList="secondBtn"
                       @onClick="btnClick(item)" />
            </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>
            <BtnList :btnList="sub.btnList"
                     @onClick="btnClick(item, sub)" />
          </a-collapse-panel>
        </a-collapse>
      </a-collapse-panel>
    </a-collapse>
    <Add @refresh="handleBtnAction" />
    <AddChild @refresh="handleBtnAction"
              :accountList="accountList"
              :selectedData="firstBtnData" />
    <Modify @refresh="handleBtnAction"
            :selectedData="firstBtnData" />
    <Locked @refresh="handleBtnAction"
            :firstBtnData="firstBtnData"
            :accountList="accountList"
            :tableList="tableList"
            :selectedData="secondBtnData" />
    <Unlocked @refresh="handleBtnAction"
              :firstBtnData="firstBtnData"
              :accountList="accountList"
              :tableList="tableList"
              :selectedData="secondBtnData" />
    <Cancel @refresh="handleBtnAction"
            :accountList="accountList"
            :firstBtnData="firstBtnData"
            :tableList="tableList"
            :selectedData="secondBtnData" />
    <Reset @refresh="handleBtnAction"
           :accountList="accountList"
           :tableList="tableList"
           :selectedData="secondBtnData" />
    <Detail :selectedData="secondBtnData"
            :accountList="accountList"
            :firstBtnData="firstBtnData"
            :tableList="tableList" />
    <ModifyChild @refresh="handleBtnAction"
                 :accountList="accountList"
                 :firstBtnData="firstBtnData"
                 :tableList="tableList"
                 :selectedData="secondBtnData" />
  </div>
</template>

<script lang="ts">
import { defineComponent, initData, getBtnList, contextMenu, BtnList, _getBtnList } from '@/common/export/table';
import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
import { getRoleTypeName, handleBtnClickData } from '../setup';
import { getUserName } from '@/services/bus/user';
import Modify from '../../compoments/modify-traders/index.vue';
import Add from '../../compoments/add-traders/index.vue';
import AddChild from '../../compoments/add-child-traders/index.vue';
import Locked from '../../compoments/locked-trader/index.vue';
import Unlocked from '../../compoments/unlocked-trader/index.vue';
import Cancel from '../../compoments/cancel-trader/index.vue';
import Reset from '../../compoments/reset-trader/index.vue';
import Detail from '../../compoments/detail-trader/index.vue';
import ModifyChild from '../../compoments/modify-child-traders/index.vue';
import { handleModalData, handleTableList } from '../setup';
import { ErmcpLoginUser, ErmcpLoginUserEx, ErmcpTaAccount, ErmcpTaAccountEx } from '@/services/go/ermcp/account/interface';
import { ref } from 'vue';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { QueryAccMgrTaaccount } from '@/services/go/ermcp/account';
import { handlerManagerList } from '@/common/setup/user';

export default defineComponent({
    name: 'account_info_trade',
    components: {
        contextMenu,
        BtnList,
        filterCustomTable,
        Modify,
        Add,
        AddChild,
        Locked,
        Unlocked,
        Cancel,
        Reset,
        Detail,
        ModifyChild,
    },
    setup() {
        // 加载状态
        const loading = ref<boolean>(false);
        const { tableList, queryTable } = handlerManagerList(loading, 2);
        const [firstBtn, secondBtn, thirdBtn] = _getBtnList('account_info_trade', true).value;
        // 新增弹窗
        const { selectedData: addModelData, openAction } = handleModalData<ErmcpLoginUserEx>();
        // 修改 重置密码、详情等弹窗
        const { selectedData: moreModelData, openAction: moreOptenAction } = handleModalData<ErmcpLoginUser>();
        // 处理根据状态显示对应按钮
        function handleBtnAction() {
            handleTableList(queryTable, tableList, thirdBtn);
        }
        const { firstBtnData, secondBtnData, btnClick } = handleBtnClickData();
        // 授权期货账户
        const accountList = ref<ErmcpTaAccount[]>([]);

        initData(() => {
            handleBtnAction();
            // 处理授权期货账户
            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 {
            firstBtnData,
            btnClick,
            firstBtn,
            secondBtnData,
            secondBtn,
            thirdBtn,
            loading,
            search,
            tableList,
            getRoleTypeName,
            getUserName,
            addModelData,
            openAction,
            moreModelData,
            moreOptenAction,
            handleBtnAction,
            accountList,
        };
    },
});
</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>
