<template>
  <div class="koi-flex">
    <KoiCard>
      <el-form :model="queryParams" inline>
        <el-form-item label="月份">
          <el-date-picker
            v-model="queryParams.month"
            type="month"
            placeholder="选择月份"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="queryParams.model" placeholder="请输入型号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格头部按钮 -->
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-upload
            action="/api/import"
            :show-file-list="false"
            :before-upload="beforeUpload"
          >
            <el-button icon="Upload" plain type="primary">导入销量</el-button>
          </el-upload>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="Download" plain type="success" @click="handleExport">导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="delete" plain type="danger" :disabled="multiple">批量删除</el-button>
        </el-col>
        <KoiToolbar v-model:showSearch="showSearch" @refreshTable="getList"></KoiToolbar>
      </el-row>

      <div class="h-20px"></div>
      <el-table
        v-loading="loading"
        :data="tableList"
        :header-cell-style="{ background: '#f1f1f1' }"
        border
        empty-text="暂时没有数据哟"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="型号" prop="model" show-overflow-tooltip />
        <el-table-column align="center" label="创建时间" prop="createTime" show-overflow-tooltip width="180px" />
        <el-table-column align="center" label="当月销量" prop="currentSales" width="140px" />
        <el-table-column align="center" label="当月预测销量" prop="predictSales" width="140px" />
        <el-table-column align="center" label="近三月平均销量" prop="avgSales" width="140px" />
        <el-table-column align="center" label="当前剩余代销数量" prop="remainingStock" width="140px" />
        <el-table-column align="center" label="销量趋势" width="140px">
          <template #default="{ row }">
            <el-tag :type="getTrendType(row.trend)">{{ row.trendText }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="补货数量" prop="replenishmentQty" width="140px" />
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
<!--            <el-tooltip content="补货" placement="top" v-if="row.trend === 'stable'">-->
<!--              <el-button circle icon="Van" plain type="success" @click="handleConfirm(row)"></el-button>-->
<!--            </el-tooltip>-->
            <el-tooltip content="删除" placement="top">
              <el-button circle icon="delete" plain type="danger"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-20px"></div>
      <!-- 分页 -->
      <Pagination :getList="getList" :queryParams="queryParams" :total="total"/>
    </KoiCard>
  </div>
</template>

<script setup name="inventoryBoard">
import { ref, reactive } from 'vue'

// 查询参数
const queryParams = reactive({
  month: null,
  model: '',
  pageNum: 1,
  pageSize: 10
})

const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const tableList = ref([
  {
    model: 'XS2024001',
    currentSales: 100,
    predictSales: 207,
    avgSales: 180,
    remainingStock: 150,
    trend: 'stable',
    trendText: '销量平稳',
    replenishmentQty: 210,
    createTime: '2025-03-10'
  },
  {
    model: 'XS2024002',
    currentSales: 80,
    predictSales: 165,
    avgSales: 220,
    remainingStock: 100,
    trend: 'decrease',
    trendText: '销量下滑',
    replenishmentQty: 0,
    createTime: '2025-03-10'
  }
])

// 获取趋势类型
const getTrendType = (trend) => {
  const types = {
    increase: 'success',
    decrease: 'danger',
    stable: 'primary'
  }
  return types[trend] || ''
}

// 文件上传前的处理
const beforeUpload = (file) => {
  // 实现文件上传前的验证
}

// 其他方法保持不变...
const getList = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const resetQuery = () => {
  queryParams.month = null
  queryParams.model = ''
  getList()
}

const handleExport = () => {
  // 实现导出功能
}

const handleConfirm = (row) => {
  // 实现确认补货功能
}

const ids = ref([]); // 选择数组
const multiple = ref(true); // 非多个禁用
/** 是否多选 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.recordId);
  multiple.value = !selection.length; // 多选
};
</script>

<style scoped lang="scss">
</style>
