<template>
  <Dialog title="选择库存批次" v-model="dialogVisible" width="1600px">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="批号" prop="workOrderCode">
          <el-input
            v-model="queryParams.workOrderCode"
            placeholder="请输入批号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            class="!w-240px"
          >
            <el-option label="已入库" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="产量范围(吨)" prop="weightRange">
          <el-input
            v-model="queryParams.weightMin"
            placeholder="最小值"
            clearable
            class="!w-100px"
            style="margin-right: 10px"
          />
          <el-input
            v-model="queryParams.weightMax"
            placeholder="最大值"
            clearable
            class="!w-100px"
          />
        </el-form-item>
        <el-form-item label="甜菊糖糖苷(%)" prop="steviaGlycosidesPercentRange">
          <el-input
            v-model="queryParams.steviaGlycosidesPercentMin"
            placeholder="最小值"
            clearable
            class="!w-100px"
            style="margin-right: 10px"
          />
          <el-input
            v-model="queryParams.steviaGlycosidesPercentMax"
            placeholder="最大值"
            clearable
            class="!w-100px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table
        v-loading="loading"
        :data="list"
        :stripe="true"
        :show-overflow-tooltip="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="批号" align="center" prop="workOrderCode" min-width="120" />
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="产量(吨)" align="center" prop="weight" min-width="100">
          <template #default="scope">
            {{ scope.row.weight }}
          </template>
        </el-table-column>
        <el-table-column label="甜菊糖糖苷(%)" align="center" prop="steviaGlycosidesPercent" min-width="120">
          <template #default="scope">
            {{ formatPercent(scope.row.steviaGlycosidesPercent) }}
          </template>
        </el-table-column>
        <el-table-column label="RD" align="center" prop="steviaRd" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaRd) }}
          </template>
        </el-table-column>
        <el-table-column label="RA" align="center" prop="steviaRa" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaRa) }}
          </template>
        </el-table-column>
        <el-table-column label="STV" align="center" prop="steviaStv" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaStv) }}
          </template>
        </el-table-column>
        <el-table-column label="RF" align="center" prop="steviaRf" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaRf) }}
          </template>
        </el-table-column>
        <el-table-column label="RC" align="center" prop="steviaRc" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaRc) }}
          </template>
        </el-table-column>
        <el-table-column label="DA" align="center" prop="steviaDa" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaDa) }}
          </template>
        </el-table-column>
        <el-table-column label="RV" align="center" prop="steviaRv" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaRv) }}
          </template>
        </el-table-column>
        <el-table-column label="RB" align="center" prop="steviaRb" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaRb) }}
          </template>
        </el-table-column>
        <el-table-column label="SB" align="center" prop="steviaSb" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaSb) }}
          </template>
        </el-table-column>
        <el-table-column label="水分(%)" align="center" prop="steviaMoisture" min-width="100">
          <template #default="scope">
            {{ formatPercent(scope.row.steviaMoisture) }}
          </template>
        </el-table-column>
        <el-table-column label="灰份(%)" align="center" prop="steviaAshPercent" min-width="100">
          <template #default="scope">
            {{ formatPercent(scope.row.steviaAshPercent) }}
          </template>
        </el-table-column>
        <el-table-column label="PH" align="center" prop="steviaPhValue" min-width="80">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaPhValue) }}
          </template>
        </el-table-column>
        <el-table-column label="比吸光" align="center" prop="steviaSpecificAbsorbance" min-width="100">
          <template #default="scope">
            {{ formatDecimal(scope.row.steviaSpecificAbsorbance) }}
          </template>
        </el-table-column>
        <el-table-column label="透光率(%)" align="center" prop="steviaTransmittance" min-width="100">
          <template #default="scope">
            {{ formatPercent(scope.row.steviaTransmittance) }}
          </template>
        </el-table-column>
        <el-table-column
          label="质检时间"
          align="center"
          prop="inspectionTime"
          :formatter="dateFormatter"
          width="160px"
        />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>

    <template #footer>
      <el-button @click="handleConfirm" type="primary" :disabled="selectedBatches.length === 0">
        确定选择 ({{ selectedBatches.length }})
      </el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { getWarehousedFinishedProductQualityPage, FinishedProductQuality } from '@/api/mes/quality/productquality'

/** 库存批次选择弹窗 */
defineOptions({ name: 'StockBatchSelectionDialog' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const list = ref<FinishedProductQuality[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const selectedBatches = ref<FinishedProductQuality[]>([]) // 选中的批次
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  workOrderCode: undefined,
  status: 3, // 默认只显示已入库的批次
  weightMin: undefined,
  weightMax: undefined,
  steviaGlycosidesPercentMin: undefined,
  steviaGlycosidesPercentMax: undefined,
  inspectionTime: [],
  createTime: [],
})
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await getWarehousedFinishedProductQualityPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  queryParams.status = 3 // 重置后仍然默认显示已入库
  handleQuery()
}

/** 处理选择变化 */
const handleSelectionChange = (selection: FinishedProductQuality[]) => {
  selectedBatches.value = selection
}

/** 确认选择 */
const emit = defineEmits(['success'])
const handleConfirm = () => {
  if (selectedBatches.value.length === 0) {
    message.warning('请至少选择一个批次')
    return
  }

  emit('success', selectedBatches.value)
  dialogVisible.value = false
}

/** 打开弹窗 */
const open = (existingBatchIds: string[] = []) => {
  dialogVisible.value = true
  selectedBatches.value = []
  getList()
}

/** 格式化百分比 */
const formatPercent = (value: number) => {
  if (value === null || value === undefined) return '-'
  return value.toFixed(2)
}

/** 格式化小数 */
const formatDecimal = (value: number) => {
  if (value === null || value === undefined) return '-'
  return value.toFixed(2)
}

/** 获取状态标签类型 */
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0: return 'warning' // 待检
    case 1: return 'info'    // 检验中
    case 2: return 'success' // 已完成
    case 3: return 'success' // 已入库
    case 4: return 'danger'  // 已出库
    default: return ''
  }
}

/** 获取状态标签文本 */
const getStatusLabel = (status: number) => {
  switch (status) {
    case 0: return '待检'
    case 1: return '检验中'
    case 2: return '已完成'
    case 3: return '已入库'
    case 4: return '已出库'
    default: return '未知'
  }
}

defineExpose({ open })
</script>
