<template>
  <!-- 库存查询: 当前库存-->
  <mtp-table-scroll>
    <template #header>
      <Filter @search="updateColumn">
        <mtp-table-button class="btn-list-sticky" :buttons="buttons" @click="openComponent" />
      </Filter>
    </template>
    <template #default="{ scroll }">
      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList">
        <!-- 今日变动 = 今日入库量 - 今日出库量 -->
        <template #diffqty="{ record }">
          <a>{{ record.todayproduceinqty - record.todayproduceoutqty }}</a>
        </template>
      </a-table>
    </template>
  </mtp-table-scroll>
  <!-- 明细 -->
  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab"></mtp-table-detail>
  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
</template>

<script lang="ts">
import { ref } from 'vue';
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import MtpTableDetail from '@/common/components/tableDetail/index.vue';
import { queryTableList, MtpTableButton, contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import Filter from '../../components/filterTable/index.vue';
import { QueryAreaStockApply } from '@/services/go/ermcp/search-inventory/index';
import { Ermcp3AreaStock } from '@/services/go/ermcp/search-inventory/interface';
import { QueryAreaStock } from '@/services/go/ermcp/search-inventory';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import Description from '@/common/components/description/index.vue';
import { ComposeTableDetailParam } from '@/common/setup/table/interface';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { handleComposeTable_detail } from '@/common/setup/table/compose';
import { watch } from 'vue';
import { getTableButton } from '@/common/setup/table/button';
import { getDetailColumns } from './setup';
import { ColumnType } from '@/common/methods/table';

export default defineComponent({
  name: 'inventory_current',
  components: {
    MtpTableScroll,
    MtpTableDetail,
    Filter,
    contextMenu,
    add: defineAsyncComponent(() => import('../../components/add/index.vue')),
    MtpTableButton,
    Description,
  },
  setup() {
    // 按钮权限
    const buttons = getTableButton(['add']);
    // 底部明细标签
    const tabList = getTableButton(['add'], true);
    const columnsDetail = ref<ColumnType[]>([]);
    // 控制明细显示/隐藏
    const visible = ref(true);
    // 当前选中的标签
    const tabIndex = ref(0);

    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaStock>();

    // 获取列表数据
    const queryTableAction = () => queryTable(QueryAreaStock).then((res) => {
      if (res.length) {
        selectedRow.value = res[0];
      }
    });

    const param: ComposeTableDetailParam = {
      queryFn: queryTableAction, // 查询表格数据
      tableName: 'table_pcweb_current_inventory', // 表头key
      menuType: EnumRouterName.exposure_realtime, // 当前tab页对应的code
    };

    const {
      closeDrawer, // 控制 drawer 组件是否显示
      columns,
      updateColumn, //  表头数据
      detailTableList, // 明细表头数据
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格事件
      componentId,
      closeComponent,
      openComponent,
    } = handleComposeTable_detail<Ermcp3AreaStock>(param);

    // 切换明细
    function changeTab(index: number) {
      tabIndex.value = index;
      const { code, lable } = tabList[index];
      columnsDetail.value = getDetailColumns(code);
      switch (code) {
        case 'inventory_manager_inbound_details':
          // 入库明细
          queryResultLoadingAndInfo(QueryAreaStockApply, loading, { applystatus: '2', inouttype: '5,7' }).then((res) => {
            detailTableList.value = res;
          });
          break;
        case 'inventory_manager_outbound_details':
          // 出库明细
          queryResultLoadingAndInfo(QueryAreaStockApply, loading, { applystatus: '2', inouttype: '6,8' }).then((res) => {
            detailTableList.value = res;
          });
          break;
        default:
          console.error(`${lable}没有配置对应的code: ${code},`);
      }
    }

    watch(selectedRow, () => {
      detailTableList.value = [];
      if (tabList.length) {
        visible.value = true;
        changeTab(tabIndex.value);
      }
    })

    return {
      loading,
      tableList,
      visible,
      closeDrawer,
      columns,
      updateColumn,
      columnsDetail,
      detailTableList,
      expandedRowKeys,
      selectedRow,
      Rowclick,
      tabList,
      changeTab,
      queryTable,
      buttons,
      componentId,
      closeComponent,
      openComponent,
    };
  },
});
</script>