<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useReplenishmentOrder } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "~icons/ep/refresh";
import Search from "~icons/ep/search";
import Delete from "~icons/ep/delete";
import Upload from "~icons/ep/upload";
import Check from "~icons/ep/check";
import Close from "~icons/ep/close";
import View from "~icons/ep/view";
import RefreshRight from "~icons/ep/refresh-right";
import CreateDialog from "./components/CreateDialog.vue";

defineOptions({
  name: "ReplenishmentOrderList"
});

const router = useRouter();
const formRef = ref();
const tableRef = ref();
const createDialogRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  shopOptions,
  selectedRows,
  onSearch,
  resetForm,
  handleDelete,
  handleSubmitToErp,
  handleRetrySync,
  handleComplete,
  handleCancel,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  batchSubmitToErp,
  batchCancel,
  batchDelete
} = useReplenishmentOrder();

function handleCreate() {
  createDialogRef.value?.open();
}

function handleViewDetail(row: any) {
  router.push({
    path: "/inventory/replenishment-order/detail",
    query: { id: row.id }
  });
}

function onCreated() {
  onSearch();
}
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="补货单号：" prop="orderNo">
        <el-input v-model="form.orderNo" placeholder="请输入补货单号" clearable class="w-[180px]!" />
      </el-form-item>
      <el-form-item label="门店：" prop="shopId">
        <el-select v-model="form.shopId" placeholder="请选择门店" clearable class="w-[160px]!">
          <el-option v-for="s in shopOptions" :key="s.id" :label="s.name" :value="s.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备ID：" prop="deviceId">
        <el-input v-model="form.deviceId" placeholder="请输入设备ID" clearable class="w-[180px]!" />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select v-model="form.status" placeholder="请选择" clearable class="w-[140px]!">
          <el-option label="草稿" :value="0" />
          <el-option label="已提交ERP" :value="1" />
          <el-option label="已同步ERP" :value="2" />
          <el-option label="已完成" :value="3" />
          <el-option label="已取消" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="onSearch">搜索</el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="设备补货单"
      :columns="columns"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-button type="primary" @click="handleCreate">新建补货单</el-button>
        <el-button
          type="warning"
          :disabled="!selectedRows.some((r: any) => r.status === 0)"
          @click="batchSubmitToErp"
        >
          批量提交ERP
        </el-button>
        <el-button
          type="danger"
          :disabled="!selectedRows.some((r: any) => r.status === 0 || r.status === 1)"
          @click="batchCancel"
        >
          批量取消
        </el-button>
        <el-button
          type="danger"
          :disabled="!selectedRows.some((r: any) => r.status === 0)"
          :icon="useRenderIcon(Delete)"
          @click="batchDelete"
        >
          批量删除
        </el-button>
      </template>

      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          border
          adaptive
          align-whole="center"
          row-key="id"
          show-overflow-tooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small'"
          :header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
          @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-button link type="primary" :size="size" :icon="useRenderIcon(View)" @click="handleViewDetail(row)">详情</el-button>
            <el-button v-if="row.status === 0" link type="warning" :size="size" :icon="useRenderIcon(Upload)" @click="handleSubmitToErp(row)">提交ERP</el-button>
            <el-button v-if="row.status === 1" link type="primary" :size="size" :icon="useRenderIcon(RefreshRight)" @click="handleRetrySync(row)">重试同步</el-button>
            <el-button v-if="row.status === 2" link type="success" :size="size" :icon="useRenderIcon(Check)" @click="handleComplete(row)">完成</el-button>
            <el-button v-if="row.status === 0 || row.status === 1" link type="danger" :size="size" :icon="useRenderIcon(Close)" @click="handleCancel(row)">取消</el-button>
            <el-button v-if="row.status === 0" link type="danger" :size="size" :icon="useRenderIcon(Delete)" @click="handleDelete(row)">删除</el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <CreateDialog ref="createDialogRef" @success="onCreated" />
  </div>
</template>
