<template>
  <!-- 实时敞口-->
  <div class="exposure-real-time table-height"
       :loading="loading">
    <filterCustomTable @search="updateColumn">
    </filterCustomTable>
    <a-table :columns="columns"
             class="topOrderTable"
             :pagination="false"
             :expandedRowKeys="expandedRowKeys"
             :customRow="Rowclick"
             rowKey="key"
             :data-source="tableList"
             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
      <!-- <template #DiffSpotQty="{ record }">
        <span>{{ record.DiffSpotQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template> -->
      <!-- <template #DiffHedgeQty="{ record }">
        <span>{{ record.DiffHedgeQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #TotalFutureQty="{ record }">
        <span>{{ record.TotalFutureQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #DiffFutuQty="{ record }">
        <span>{{ record.DiffFutuQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #DiffExposoureQty="{ record }">
        <span>{{ record.DiffExposoureQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #DiffQty="{ record }">
        <span>{{ record.DiffQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #hedgeqty="{ record }">
        <span>{{ record.hedgeqty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #arbitrageqty="{ record }">
        <span>{{ record.arbitrageqty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #DiffArbitrageQty="{ record }">
        <span>{{ record.DiffArbitrageQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #needarbitrageqty="{ record }">
        <span>{{ record.needarbitrageqty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #TotalNeedHedgeQty="{ record }">
        <span>{{ record.TotalNeedHedgeQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #DiffSpotHedgeQty="{ record }">
        <span>{{ record.diffSpotHedgeQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template>
      <template #OriTotalSpotQty="{ record }">
        <span>{{ record.oriTotalSpotQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
      </template> -->
    </a-table>
    <!-- 明细 -->
    <Description v-if="visible"
                 @close="closeDrawer"
                 @changeTab="changeTab"
                 :tabList="tabList">
      <a-table :columns="columnsDetail"
               class="topTable"
               :pagination="false"
               rowKey="key"
               :data-source="detailTableList"
               :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
        <!-- 套保品种/代码 -->
        <template #middlegoodsname="{ record }">
          <span>{{ record.middlegoodsname + "/" +  record.middlegoodscode}}</span>
        </template>

        <!-- 类型 -->
        <template #contracttype="{ record }">
          <span>{{ getPlanContractType(record.contracttype) }}</span>
        </template>
      </a-table>
    </Description>
  </div>
</template>

<script lang="ts">
import { defineComponent, watchEffect } from 'vue';
import filterCustomTable from '../../components/filterTable/index.vue';
import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosition } from '@/services/go/ermcp/exposure/index';
import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
import Description from '@/common/components/description/index.vue';
import { queryTableList } from '@/common/setup/table';
import { ComposeTableDetailParam } from '@/common/setup/table/interface';
import { TabList } from '@/common/components/description/interface';
import { handleComposeTable_detail } from '@/common/setup/table/compose';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { formatValue } from '@/common/methods';
import { formatNumber } from '@/common/methods/format';
import { getBizTypeName, getContractTypeName, getLogType } from '@/common/constants/enumsName';
import { getPlanContractType } from '@/views/business/plan/setup';

export default defineComponent({
    name: EnumRouterName.exposure_realtime,
    components: {
        Description,
        filterCustomTable,
    },
    setup() {
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>(true, 2);
        // 获取列表数据
        const queryTableAction = () => queryTable(QueryActualExposure);
        const param: ComposeTableDetailParam = {
            queryFn: queryTableAction, // 查询表格数据
            tableName: 'table_pcweb_exposure', // 表头key
            tableFilterKey: ['MiddleGoodsName'], // 表格过滤字段
            menuType: EnumRouterName.exposure_realtime, // 当前tab页对应的code
        };
        const {
            visible,
            closeDrawer, // 控制 drawer 组件是否显示
            columns,
            updateColumn, //  表头数据
            columnsDetail,
            registerColumnDetail,
            detailTableList, // 明细表头数据
            expandedRowKeys,
            selectedRow,
            Rowclick, // 表格事件
            tabList,
        } = handleComposeTable_detail<ErmcpRealExposureModel>(param);

        // 切换明细
        function changeTab(index: number, current: TabList) {
            const { code, lable } = current;
            let fn = null;
            if (code === 'exposure_realtime_spot_details') {
                // 现货明细信息
                // 注册表头
                registerColumnDetail('table_pcweb_exposure_detail', []);
                fn = QueryActualExposureDetail;

                queryResultLoadingAndInfo(fn, loading, { middlegoodsid: selectedRow.value?.MiddleGoodsID }).then((res) => {
                    detailTableList.value = res;
                });
            } else if (code === 'exposure_realtime_futures_details') {
                // 期货明细
                // 注册表头
                registerColumnDetail('table_pcweb_exposure_futures_detail', []);
                fn = QueryAutualExposurePosition;
                queryResultLoadingAndInfo(fn, loading, { middleGoodsId: selectedRow.value?.MiddleGoodsID }).then((res) => {
                    detailTableList.value = res;
                });
            } else {
                console.error(`${lable}没有配置对应的code: ${code},`);
                return;
            }
        }
        watchEffect(() => {
            if (visible.value) {
                if (tabList.value.length) {
                    changeTab(0, tabList.value[0]);
                }
            }
        });

        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType };
    },
});
</script>

<style lang="less">
.exposure-real-time {
    position: relative;
    overflow: hidden;
    .bottomTable {
        width: 100%;
        .flex;
        flex-direction: column;
        .topTable {
            height: calc(100% - 46px);
            .ant-table {
                background-color: transparent;
            }
        }
    }
}
</style>;
