<template>
  <!-- 敞口: 期货头寸-->
  <mtp-table-scroll>
    <template #header>
      <filterCustomTable @search="updateColumn" @update="queryTableAction"></filterCustomTable>
    </template>
    <template #default="{ scroll }">
      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :pagination="false" :rowKey="(record,index)=>index" :data-source="tableList"></a-table>
    </template>
  </mtp-table-scroll>
  <!-- 明细 -->
  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
    <!-- 买卖方向 -->
    <template #buyorsell="{ record }">
      <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
    </template>
    <!-- 开屏方向 -->
    <template #channelbuildtype="{ record }">
      <span>{{ getChannelBuildName(record.channelbuildtype) }}</span>
    </template>
  </mtp-table-detail>
</template>

<script lang="ts">
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import { defineComponent, watch, ref } from 'vue';
import filterCustomTable from './filter.vue';
import { QueryExposureHedgePositionDetail, QueryExposureHedgePosition } from '@/services/go/ermcp/exposure/index';
import { ErmcpHedgePosition } from '@/services/go/ermcp/exposure/interface';
import { queryTableList } from '@/common/setup/table';
import { ComposeTableDetailParam } from '@/common/setup/table/interface';
import { handleComposeTable_detail } from '@/common/setup/table/compose';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getBuyOrSellName, getChannelBuildName } from '@/common/constants/enumsName';
import { getTableButton } from '@/common/setup/table/button';
import { useColumn } from './setup';
import MtpTableDetail from '@/common/components/tableDetail/index.vue';
import moment from 'moment';

export default defineComponent({
  name: EnumRouterName.exposure_futures,
  components: {
    MtpTableScroll,
    filterCustomTable,
    MtpTableDetail,
  },
  setup() {
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<ErmcpHedgePosition>();
    // 控制明细显示/隐藏
    const visible = ref(true);
    // 用户id
    const userId = ref(0);
    // 获取列表数据
    const queryTableAction = (userid = 0) => {
      userId.value = userid;
      queryTable(QueryExposureHedgePosition, userid).then((res) => {
        if (res.length) {
          selectedRow.value = res[0];
        }
      })
    }
    const param: ComposeTableDetailParam = {
      queryFn: queryTableAction, // 查询表格数据
      tableName: 'table_pcweb_exposure_futuresposition', // 表头key
      menuType: EnumRouterName.exposure_futures, // 当前tab页对应的code
    };
    const {
      registerColumnDetail,
      detailTableList, // 明细表头数据
      expandedRowKeys,
      selectedRow,
      Rowclick,
    } = handleComposeTable_detail<ErmcpHedgePosition>(param);

    // 底部明细标签
    const tabList = getTableButton(['position_futures_details']);
    // 当前选中的标签
    const tabIndex = ref(0);

    // 切换明细
    function changeTab(index: number) {
      tabIndex.value = index;
      detailTableList.value = [];
      visible.value = true;

      const { code, lable } = tabList[index];
      if (code === 'position_futures_details') {
        // 现货明细
        // 注册表头
        registerColumnDetail('table_pcweb_exposure_futuresposition_detail');
      } else {
        console.error(`${lable}没有配置对应的code: ${code},`);
        return;
      }

      if (selectedRow.value) {
        const goodsId = selectedRow.value.goodsid;
        if (goodsId) {
          queryResultLoadingAndInfo(QueryExposureHedgePositionDetail, loading, { userid: userId.value, goodsId }).then((res) => {
            // 日期降序排序
            detailTableList.value = res.sort((a, b) => moment(b.tradetime).valueOf() - moment(a.tradetime).valueOf());
          });
        }
      }
    }

    watch(selectedRow, () => changeTab(tabIndex.value))

    return { ...useColumn(), queryTableAction, loading, tableList, visible, changeTab, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, getBuyOrSellName, getChannelBuildName };
  },
});
</script>