<script setup lang="ts">
import { ref } from "vue";
import { useStockRecords } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "~icons/ep/refresh";
import View from "~icons/ep/view";
import Close from "~icons/ep/close";

defineOptions({
  name: "StockRecords"
});

const formRef = ref();
const tableRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  statusMap,
  stockTypeMap,
  detailVisible,
  detailLoading,
  detailRecord,
  detailItems,
  onSearch,
  resetForm,
  handleCancel,
  handleViewDetail,
  handleSizeChange,
  handleCurrentChange
} = useStockRecords();
</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="设备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-[180px]!"
        >
          <el-option label="进行中" :value="1" />
          <el-option label="已完成" :value="2" />
          <el-option label="已取消" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri/search-line')"
          :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 v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(View)"
              @click="handleViewDetail(row)"
            >
              详情
            </el-button>
            <el-popconfirm
              v-if="row.status === 1"
              title="是否确认取消该上货记录?"
              @confirm="handleCancel(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  :size="size"
                  :icon="useRenderIcon(Close)"
                >
                  取消
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="上货记录详情"
      width="680px"
      destroy-on-close
    >
      <el-descriptions :column="2" border size="small" v-if="detailRecord">
        <el-descriptions-item label="记录ID">{{ detailRecord.id }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="(statusMap[detailRecord.status] || {}).type" size="small">
            {{ (statusMap[detailRecord.status] || {}).text || '未知' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="设备ID">{{ detailRecord.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ detailRecord.deviceName || detailRecord.device_name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="上货类型">{{ stockTypeMap[detailRecord.stockType] || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="上货员">{{ detailRecord.stockerName }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ detailRecord.stockerPhone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailRecord.createTime }}</el-descriptions-item>
      </el-descriptions>

      <div class="detail-items-title">明细列表</div>
      <el-table :data="detailItems" v-loading="detailLoading" size="small" max-height="300">
        <el-table-column prop="productName" label="商品" min-width="140" show-overflow-tooltip />
        <el-table-column prop="quantity" label="数量" width="70" align="center" />
        <el-table-column prop="beforeStock" label="补货前" width="80" align="center">
          <template #default="{ row }">{{ row.beforeStock != null ? row.beforeStock : '-' }}</template>
        </el-table-column>
        <el-table-column prop="afterStock" label="补货后" width="80" align="center">
          <template #default="{ row }">{{ row.afterStock != null ? row.afterStock : '-' }}</template>
        </el-table-column>
      </el-table>
      <div class="detail-empty" v-if="!detailLoading && detailItems.length === 0">暂无明细</div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}

.detail-items-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 20px 0 12px;
}

.detail-empty {
  text-align: center;
  padding: 24px 0;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>
