<template>
  <!-- 现货报表 -->
  <div class="table-detail-container table-height"
       :loading="loading">
    <Filter @update="search"
            @filter="updateColumn"></Filter>
    <a-table :columns="columns"
             class="topOrderTable"
             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
             :pagination="false"
             :expandedRowKeys="expandedRowKeys"
             :customRow="Rowclick"
             rowKey="key"
             :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>
    <!-- 明细 -->
    <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 #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>
    </Description>
  </div>
</template>

<script lang="ts">
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 Description from '@/common/components/description/index.vue';
import { ref, watchEffect } from 'vue';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { TabList } from '@/common/components/description/interface';
import { EnumRouterName } from '@/common/constants/enumRouterName';

export default defineComponent({
    name: 'spot-report',
    components: {
        Filter,
        Description,
    },
    setup() {
        let cycletime = '';
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpotPLReport>();
        // 获取列表数据
        const queryTableAction = () => {
            const { getInitTime, getInitType } = handleInitTypeAndTime();
            cycletime = getInitTime();
            const param: AreaSpotplReportReq = {
                cycletype: getInitType(),
                cycletime,
                querytype: 1,
            };
            // 获取列表数据
            queryTable(QryAreaSpotplReport, param);
        };
        const param: ComposeTableDetailParam = {
            queryFn: queryTableAction, // 查询表格数据
            tableName: 'table_pcweb_spot_report', // 表头key
            tableFilterKey: ['deliverygoodsname', 'wrstandardname', 'brandname'], // 表格过滤字段
            menuType: EnumRouterName.spot_report_spot, // 当前tab页对应的code
        };
        const {
            visible,
            closeDrawer, // 控制 drawer 组件是否显示
            columns,
            updateColumn, //  表头数据
            columnsDetail,
            registerColumnDetail,
            detailTableList, // 明细表头数据
            expandedRowKeys,
            selectedRow,
            Rowclick, // 表格事件
            tabList,
        } = handleComposeTable_detail<Ermcp3AreaSpotPLReport>(param);
        const chaceSearchValue = ref<TypeAndTime>();

        // 切换明细
        function changeTab(index: number, current: TabList) {
            const { code, lable } = current;
            const data = selectedRow.value as Ermcp3AreaSpotPLReport;
            const { cycletype, currencyid, deliverygoodsid } = data;
            const param: AreaSpotplReportReq = {
                querytype: 2,
                cycletype,
                cycletime,
                deliverygoodsid,
                currencyid,
                userid: chaceSearchValue.value?.userid,
            };
            if (code === 'spot_report_spot_detail') {
                // 现货明细
                // 注册表头
                registerColumnDetail('table_pcweb_spot_report_details', []);
            } else {
                console.error(`${lable}没有配置对应的code: ${code},`);
                return;
            }
            // 查询明细数据
            queryResultLoadingAndInfo(QryAreaSpotplReport, loading, param).then((res) => {
                detailTableList.value = res;
            });
        }
        watchEffect(() => {
            if (visible.value) {
                if (tabList.value.length) {
                    changeTab(0, tabList.value[0]);
                }
            }
        });
        function search(value: TypeAndTime) {
            chaceSearchValue.value = value;
            cycletime = value.cycletime;
            const obj = Object.assign(value, { querytype: 1 });
            queryTable(QryAreaSpotplReport, obj);
        }

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

<style lang="less">
.spot-report {
}
</style>;
