<template>
  <el-dialog
    v-model="dialogVisible"
    title="质检详情"
    width="80%"
    :close-on-click-modal="false"
  >
    <el-descriptions :column="3" border>
      <el-descriptions-item label="批号">
        {{ formData.workOrderCode }}
      </el-descriptions-item>
      <el-descriptions-item label="产品名称">
        {{ formData.productName }}
      </el-descriptions-item>
      <el-descriptions-item label="产量(吨)">
        {{ formData.weight }}
      </el-descriptions-item>
      <el-descriptions-item label="质检时间">
        {{ formatDateTime(formData.inspectionTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="质检员">
        {{ formData.inspectorName }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatDateTime(formData.createTime) }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider content-position="left">甜菊糖检验指标</el-divider>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="never" class="mb-4">
          <template #header>
            <span class="card-header">主要成分</span>
          </template>
          <el-descriptions :column="1" size="small">
            <el-descriptions-item label="甜菊糖糖苷(%)">
              {{ formatPercent(formData.steviaGlycosidesPercent) }}
            </el-descriptions-item>
            <el-descriptions-item label="水分(%)">
              {{ formatPercent(formData.steviaMoisture) }}
            </el-descriptions-item>
            <el-descriptions-item label="灰份(%)">
              {{ formatPercent(formData.steviaAshPercent) }}
            </el-descriptions-item>
            <el-descriptions-item label="PH值">
              {{ formatDecimal(formData.steviaPhValue) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="never" class="mb-4">
          <template #header>
            <span class="card-header">甜菊糖苷组分</span>
          </template>
          <el-descriptions :column="1" size="small">
            <el-descriptions-item label="RD">
              {{ formatDecimal(formData.steviaRd) }}
            </el-descriptions-item>
            <el-descriptions-item label="RA">
              {{ formatDecimal(formData.steviaRa) }}
            </el-descriptions-item>
            <el-descriptions-item label="STV">
              {{ formatDecimal(formData.steviaStv) }}
            </el-descriptions-item>
            <el-descriptions-item label="RF">
              {{ formatDecimal(formData.steviaRf) }}
            </el-descriptions-item>
            <el-descriptions-item label="RC">
              {{ formatDecimal(formData.steviaRc) }}
            </el-descriptions-item>
            <el-descriptions-item label="DA">
              {{ formatDecimal(formData.steviaDa) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="never" class="mb-4">
          <template #header>
            <span class="card-header">其他指标</span>
          </template>
          <el-descriptions :column="1" size="small">
            <el-descriptions-item label="RV">
              {{ formatDecimal(formData.steviaRv) }}
            </el-descriptions-item>
            <el-descriptions-item label="RB">
              {{ formatDecimal(formData.steviaRb) }}
            </el-descriptions-item>
            <el-descriptions-item label="SB">
              {{ formatDecimal(formData.steviaSb) }}
            </el-descriptions-item>
            <el-descriptions-item label="比吸光">
              {{ formatDecimal(formData.steviaSpecificAbsorbance) }}
            </el-descriptions-item>
            <el-descriptions-item label="透光率(%)">
              {{ formatPercent(formData.steviaTransmittance) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-divider v-if="formData.remark" content-position="left">备注信息</el-divider>
    <el-input
      v-if="formData.remark"
      v-model="formData.remark"
      type="textarea"
      :rows="3"
      readonly
      placeholder="无备注信息"
    />

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

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

const dialogVisible = ref(false)
const formData = ref<FinishedProductQuality>({} as FinishedProductQuality)

/** 打开弹窗 */
const open = (data: FinishedProductQuality) => {
  formData.value = { ...data }
  dialogVisible.value = true
}

/** 格式化重量 */
const formatWeight = (weight: number) => {
  if (!weight) return '-'
  return (weight / 1000).toFixed(3) // 转换为吨，保留3位小数
}

/** 格式化百分比 */
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 formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return formatDate(new Date(dateTime),'YYYY-MM-DD HH:mm:ss')
}

defineExpose({
  open
})
</script>

<style scoped>
.card-header {
  font-weight: bold;
  color: #409eff;
}

.mb-4 {
  margin-bottom: 16px;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
}

:deep(.el-card__header) {
  padding: 12px 20px;
  background-color: #f5f7fa;
}
</style>
