<script lang="ts" setup>
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
import { $t } from "@/common/languages";
import { formatDate } from "@/common/utils/format-utils";
import ExpandablePageableTable from "@/components/base/expandable-pageable-table/ExpandablePageableTable.vue";
import DefaultStatusSwitchColumn from "@/components/base/default-column/DefaultStatusSwitchColumn.vue";
import { useStatus } from "@/common/languages/mapping/base-info-mapping";
import { usePage } from "@/composables/use-page";
import { ref } from "vue";

/**
 * 必须要的变量
 */

const getPageUrl = "/production/productionreturn/getProductionReturnPage";
const getItemUrl = "/production/productionreturn/getProductionReturnItemList";
const approveUrl = "/production/productionreturn/approvingProductionReturn";
const rejectUrl = "/production/productionreturn/rejectProductionReturn";
/**
 * 基本不变通用变量
 */
const tableRef = ref<InstanceType<typeof ExpandablePageableTable> | null>(null);
const { getFormStatusLabel } = useStatus();
const { useApprove, useReject } = usePage(tableRef);
/**
 * 可以自定义的变量
 */

const approve = (row: any) => {
  useApprove(approveUrl, row.id);
};
const reject = (row: any) => {
  useReject(rejectUrl, row.id);
};
const operateButtonClick = (eventName: string, row: any) => {
  switch (eventName) {
    case "approve":
      approve(row);
      break;
    case "reject":
      reject(row);
      break;
  }
};
const authShowFunc = (row: any, button: globalThis.ButtonProp) => {
  if (row.formStatus === 0 && button.eventName === "reject") return false;
  if (row.formStatus === 1 && button.eventName === "approve") return false;
  return true;
};
</script>
<template>
  <ExpandablePageableTable
    :url="getPageUrl"
    ref="tableRef"
    :item-url="getItemUrl"
    item-id-key="id"
    item-id-name="returnId"
    item-field-name="returnItems"
  >
    <template #tool-button>
      <DefaultToolButton />
    </template>
    <template #columns>
      <el-table-column :label="$t('_prop.production.production_return.formCode')" prop="formCode" />
      <el-table-column :label="$t('_prop.production.production_return.storeName')" prop="storeName" />
      <el-table-column :label="$t('_prop.production.production_return.formMark')" prop="formMark" />
      <el-table-column :label="$t('_prop.common.createDate')" prop="createDate" :formatter="formatDate" />
      <DefaultStatusSwitchColumn status-param-name="formStatus" :status-label-mapping="getFormStatusLabel" />
      <DefaultOperateButtonColumn @operate-button-click="operateButtonClick" :auth-show-func="authShowFunc" />
    </template>
    <template #item-content="{ itemData }">
      <el-table :data="itemData" size="small" border stripe>
        <el-table-column :label="$t('_prop.warehouse.warehouse_item.partNumber')" prop="partNumber" />
        <el-table-column :label="$t('_prop.warehouse.warehouse_item.productSpecs')" prop="productSpecs" />
        <el-table-column :label="$t('_prop.production.production_return.returnQty')" prop="returnQty" />
      </el-table>
    </template>
  </ExpandablePageableTable>
</template>
