<template>
  <Filter @update="search" @search="updateColumn" :tableList="tableList"></Filter>
  <!-- 现货报表 -->
  <mtp-table-scroll>
    <template #default="{ scroll }">
      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :rowClassName="rowClassName"
        :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record, index) => index"
        :data-source="tableList">
        <template #curaverageprice="{ record }">
          <span>{{ record.curaverageprice.toFixed(2) }}</span>
        </template>
        <template #oriaverageprice="{ record }">
          <span>{{ record.oriaverageprice.toFixed(2) }}</span>
        </template>
        <template #oriamount="{ record }">
          <span>{{ record.oriamount.toFixed(2) }}</span>
        </template>
        <template #todaybuyamount="{ record }">
          <span>{{ record.todaybuyamount.toFixed(2) }}</span>
        </template>
        <template #todaybuyaverageprice="{ record }">
          <span>{{ record.todaybuyaverageprice.toFixed(2) }}</span>
        </template>
        <template #todaysellaverageprice="{ record }">
          <span>{{ record.todaysellaverageprice.toFixed(2) }}</span>
        </template>
        <template #actualpl="{ record }">
          <span>{{ record.actualpl.toFixed(2) }}</span>
        </template>
        <template #curspotprice="{ record }">
          <span>{{ record.curspotprice.toFixed(2) }}</span>
        </template>
        <template #floatpl="{ record }">
          <span>{{ record.floatpl.toFixed(2) }}</span>
        </template>
        <template #curmarketvalue="{ record }">
          <span>{{ record.curmarketvalue.toFixed(2) }}</span>
        </template>
      </a-table>
    </template>
  </mtp-table-scroll>
  <!-- 明细 -->
  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible"
    @change="changeTab">
    <template #curaverageprice="{ record }">
      <span>{{ record.curaverageprice.toFixed(2) }}</span>
    </template>
    <template #oriaverageprice="{ record }">
      <span>{{ record.oriaverageprice.toFixed(2) }}</span>
    </template>
    <template #oriamount="{ record }">
      <span>{{ record.oriamount.toFixed(2) }}</span>
    </template>
    <template #todaybuyamount="{ record }">
      <span>{{ record.todaybuyamount.toFixed(2) }}</span>
    </template>
    <template #todaybuyaverageprice="{ record }">
      <span>{{ record.todaybuyaverageprice.toFixed(2) }}</span>
    </template>
    <template #todaysellaverageprice="{ record }">
      <span>{{ record.todaysellaverageprice.toFixed(2) }}</span>
    </template>
    <template #actualpl="{ record }">
      <span>{{ record.actualpl.toFixed(2) }}</span>
    </template>
    <template #curspotprice="{ record }">
      <span>{{ record.curspotprice.toFixed(2) }}</span>
    </template>
    <template #floatpl="{ record }">
      <span>{{ record.floatpl.toFixed(2) }}</span>
    </template>
    <template #curmarketvalue="{ record }">
      <span>{{ record.curmarketvalue.toFixed(2) }}</span>
    </template>
  </mtp-table-detail>
</template>

<script lang="ts">
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import Filter from '../../components/filterTable/index.vue';
import { defineComponent, queryTableList } from '@/common/export/table';
import { handleInitTypeAndTime } from '@/views/report/setup';
import { QryAreaSpotplReport } from '@/services/go/ermcp/report';
import { AreaSpotplReportReq, Ermcp3AreaSpotPLReport } from '@/services/go/ermcp/report/interface';
import { TypeAndTime } from '@/views/report/interface';
import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
import { ref, watch } from 'vue';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getTableButton } from '@/common/setup/table/button';
import MtpTableDetail from '@/common/components/tableDetail/index.vue';

export default defineComponent({
  name: 'spot-report',
  components: {
    MtpTableScroll,
    MtpTableDetail,
    Filter,
  },
  setup() {
    let cycletime = '';
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpotPLReport>();
    // 控制明细显示/隐藏
    const visible = ref(true);
    // 获取列表数据
    const queryTableAction = () => {
      const { getInitTime, getInitType } = handleInitTypeAndTime();
      cycletime = getInitTime();
      const param: AreaSpotplReportReq = {
        cycletype: getInitType(),
        cycletime,
        querytype: 1,
        sumflag: 1,
      };
      // 获取列表数据
      queryTable(QryAreaSpotplReport, param).then((res) => {
        if (res.length) {
          selectedRow.value = res[0];
        } else {
          changeTab(tabIndex.value)
        }
      });
    };
    const param: ComposeTableDetailParam = {
      queryFn: queryTableAction, // 查询表格数据
      tableName: 'table_pcweb_spot_report', // 表头key
      menuType: EnumRouterName.spot_report_spot, // 当前tab页对应的code
    };
    const {
      columns,
      updateColumn, //  表头数据
      columnsDetail,
      registerColumnDetail,
      detailTableList, // 明细表头数据
      expandedRowKeys,
      selectedRow,
      rowClassName,
      Rowclick, // 表格事件
    } = handleComposeTable_detail<Ermcp3AreaSpotPLReport>(param);
    const chaceSearchValue = ref<TypeAndTime>();

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

    // 切换明细
    function changeTab(index: number) {
      const { code, lable } = tabList[index];
      tabIndex.value = index;
      detailTableList.value = [];
      visible.value = true;

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

      if (selectedRow.value) {
        const data = selectedRow.value as Ermcp3AreaSpotPLReport;
        const { cycletype, currencyid, deliverygoodsid } = data;
        const param: AreaSpotplReportReq = {
          querytype: 2,
          cycletype,
          cycletime,
          deliverygoodsid,
          currencyid,
          sumflag: 1,
          userid: chaceSearchValue.value?.userid,
        };
        // 查询明细数据
        queryResultLoadingAndInfo(QryAreaSpotplReport, loading, param).then((res) => {
          detailTableList.value = res;
        });
      }
    }

    function search(value: TypeAndTime) {
      detailTableList.value = [];
      chaceSearchValue.value = value;
      cycletime = value.cycletime;
      const obj = Object.assign(value, { querytype: 1, sumflag: 1 });
      queryTable(QryAreaSpotplReport, obj).then((res) => {
        if (res.length) {
          selectedRow.value = res[0];
        }
      });
    }

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

    return {
      loading,
      tableList,
      visible,
      updateColumn,
      search,
      columns,
      columnsDetail,
      detailTableList,
      expandedRowKeys,
      selectedRow,
      rowClassName,
      Rowclick,
      tabList,
      changeTab,
    };
  },
});
</script>