<template>
  <!-- 提货查询 -->
  <div class="platinum_pick_query_tab">
    <Filter @search="updateColumn" />
    <a-table :columns="columns" class="srcollYTable" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
      <!-- 额外的展开行 -->
      <template #expandedRowRender="{ record }">
        <mtp-table-button class="btn-list-sticky" :buttons="handleBtn(record)" :record="record" @click="openComponent" />
      </template>
      <!-- 提货状态 -->
      <template #takeorderstatus="{ record }">
        <a>{{ getPickUpStateName(record.takeorderstatus) }}</a>
      </template>
      <!-- 提货/ 收货人-->
      <template #takemode="{ record }">
        <a>{{ getTakeStateName(record.takemode)}}</a>
      </template>
      <!-- 物流信息 -->
      <template #expresscompany="{ record }">
        <a>{{ record.expresscompany + "-" + record.expressnum}}</a>
      </template>

      <!-- 商品数量 -->
      <template #qty="{ record }">
        <a>{{ record.qty + record.enumdicname}}</a>
      </template>

      <!-- 地址 -->
      <template #address="{ record }">
        <a>{{ record.provincename + record.cityname + record.districtname + record.address}}</a>
      </template>

      <template #userinfotype="{ record }">
        <a>{{ record.userinfotype === 1 ? '个人' : '企业' }}</a>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="handleBtn(selectedRow)"> </contextMenu>
    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"> </component>
  </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getPickUpStateName, getTakeStateName } from '@/common/constants/enumsName';
import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, handleComposeTable, MtpTableButton, queryTableList } from '@/common/export/commonTable';
import { getTableButton } from '@/common/setup/table/button';
import { queryTradeGoodsPickup } from '@/services/go/ermcp/qhj';
import { QhjTradeGoodsPickup } from '@/services/go/ermcp/qhj/interface';
import Filter from '../../compoments/filter/index.vue';

export default defineComponent({
  name: 'platinum_pick_query_tab',
  components: {
    Filter,
    contextMenu,
    MtpTableButton,
    detail: defineAsyncComponent(() => import('./compoments/detail/index.vue')), // 详情
    complete_stocking: defineAsyncComponent(() => import('./compoments/complete_stocking/index.vue')), // 完成备货
    upload_logistics: defineAsyncComponent(() => import('./compoments/upload_logistics/index.vue')), // 上传物流
    confirm_pickup: defineAsyncComponent(() => import('./compoments/confirm_pickup/index.vue')), // 确认收货
    confirm_receipt: defineAsyncComponent(() => import('./compoments/query_receipt/index.vue')), // 确认收货
  },
  setup() {
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<QhjTradeGoodsPickup>();

    const queryTableAction = () => {
      queryTable(queryTradeGoodsPickup);
    };
    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
      tableName: 'table_pcweb_qhj_pickup_query',
    };
    // 1:备货中  完成备货
    // 2:待取货(自提) 确认取货
    // 4:待收货(邮寄) 上传物流信息、确认收货
    function handleBtn(record: QhjTradeGoodsPickup) {
      if (!record) return;
      const { takeorderstatus } = record;
      const buttons = getTableButton();
      if (takeorderstatus === 1) {
        // 1:备货中  完成备货
        return buttons.filter((e) => e.code === 'complete_stocking' || e.code === 'detail');
      } else if (takeorderstatus === 2) {
        // 2:待取货(自提) 确认取货
        return buttons.filter((e) => e.code === 'confirm_pickup' || e.code === 'detail');
      } else if (takeorderstatus === 4) {
        // 4:待收货(邮寄) 上传物流信息、确认收货
        return buttons.filter((e) => e.code === 'complete_stocking' || e.code === 'detail' || e.code === 'confirm_receipt');
      } else {
        return [];
      }
    }
    return {
      ...handleComposeTable<QhjTradeGoodsPickup>(param),
      loading,
      tableList,
      getPickUpStateName,
      getTakeStateName,
      handleBtn,
    };
  },
});
</script>