<!-- 质检信息详情弹窗 -->
<template>
  <Dialog
    title="质检信息详情"
    v-model="dialogVisible"
    :appendToBody="true"
    :scroll="true"
    width="1400"
    class="quality-dialog"
  >
    <div v-loading="loading">
      <el-descriptions
        v-if="qualityData"
        :column="3"
        border
        class="mb-6 quality-basic-info"
        size="large"
      >
        <el-descriptions-item label="质检编号">
          {{ qualityData.code }}
        </el-descriptions-item>
        <el-descriptions-item label="工单编号">
          {{ qualityData.workOrderCode }}
        </el-descriptions-item>
        <el-descriptions-item label="产品名称">
          {{ qualityData.productName }}
        </el-descriptions-item>
        <el-descriptions-item label="重量(kg)" v-if="qualityData.weight">
          {{ qualityData.weight }}
        </el-descriptions-item>
<!--        <el-descriptions-item label="质检状态">-->
<!--          <el-tag :type="getStatusTagType(qualityData.status)">-->
<!--            {{ getStatusText(qualityData.status) }}-->
<!--          </el-tag>-->
<!--        </el-descriptions-item>-->
        <el-descriptions-item label="质检时间">
          {{ formatDate(qualityData.inspectionTime) }}
        </el-descriptions-item>
<!--        <el-descriptions-item label="是否合格">-->
<!--          <el-tag :type="qualityData.qualified === true ? 'success' : 'danger'">-->
<!--            {{ qualityData.qualified === true ? '合格' : '不合格' }}-->
<!--          </el-tag>-->
<!--        </el-descriptions-item>-->
        <el-descriptions-item label="质检员">
          {{ qualityData.inspectorName }}
        </el-descriptions-item>
        <el-descriptions-item label="不合格原因" v-if="qualityData.qualified !== 1">
          {{ qualityData.unqualifiedReason }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" v-if="qualityData.remark">
          {{ qualityData.remark }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 番茄酱质检信息 -->
      <el-card v-if="isTomatoProduct" class="mb-6 quality-card tomato-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-content">
              <i class="el-icon-apple header-icon"></i>
              <span class="header-title">番茄酱质检信息</span>
            </div>
          </div>
        </template>
        <el-descriptions :column="3" border size="default" class="quality-descriptions">
          <el-descriptions-item label="工艺">
            {{ qualityData.tomatoProcess }}
          </el-descriptions-item>
          <el-descriptions-item label="浓度(%)">
            {{ qualityData.tomatoConcentration }}
          </el-descriptions-item>
          <el-descriptions-item label="数量">
            {{ qualityData.tomatoQuantity }}
          </el-descriptions-item>
          <el-descriptions-item label="可溶性固形物(%)">
            {{ qualityData.tomatoSolubleSolidsPercent }}
          </el-descriptions-item>
          <el-descriptions-item label="粘稠度(cm/30s)">
            {{ qualityData.tomatoViscosityCmPer }}
          </el-descriptions-item>
          <el-descriptions-item label="番茄红素(mg/100g)">
            {{ qualityData.tomatoLycopeneMgPer }}
          </el-descriptions-item>
          <el-descriptions-item label="总酸(%)">
            {{ qualityData.tomatoTotalAcidPercent }}
          </el-descriptions-item>
          <el-descriptions-item label="PH值">
            {{ qualityData.tomatoPhValue }}
          </el-descriptions-item>
          <el-descriptions-item label="色差a/b">
            {{ qualityData.tomatoColorDifference }}
          </el-descriptions-item>
          <el-descriptions-item label="霉菌阳性百分比(%)">
            {{ qualityData.tomatoMouldPositivePercent }}
          </el-descriptions-item>
          <el-descriptions-item label="品质评定">
            <el-tag :type="qualityData.tomatoAssessConformance === true ? 'success' : 'danger'">
              {{ qualityData.tomatoAssessConformance === 1 ? '品质符合' : '品质不符合' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="评定说明" v-if="qualityData.tomatoAssessRemark">
            {{ qualityData.tomatoAssessRemark }}
          </el-descriptions-item>
          <el-descriptions-item label="感官" v-if="qualityData.tomatoSensory" :span="2">
            {{ qualityData.tomatoSensory }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 甜菊糖质检信息 -->
      <el-card v-if="isSteviaProduct" class="mb-6 quality-card stevia-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-content">
              <i class="el-icon-sugar header-icon"></i>
              <span class="header-title">甜菊糖质检信息</span>
            </div>
          </div>
        </template>

        <el-descriptions :column="2" border class="mb-6 quality-descriptions">
          <el-descriptions-item label="色泽">
            {{ qualityData.steviaColor }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            {{ qualityData.steviaState }}
          </el-descriptions-item>
          <el-descriptions-item label="标签" :span="2" v-if="qualityData.steviaLabel">
            {{ qualityData.steviaLabel }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="2" border class="mb-6 quality-descriptions">
          <el-descriptions-item label="甜菊糖苷含量(%)">
            {{ qualityData.steviaGlycosidesPercent }}
          </el-descriptions-item>
          <el-descriptions-item label="灰分(%)">
            {{ qualityData.steviaAshPercent }}
          </el-descriptions-item>
          <el-descriptions-item label="干燥减重(%)">
            {{ qualityData.steviaLossOnDryingPercent }}
          </el-descriptions-item>
          <el-descriptions-item label="水分(%)">
            {{ qualityData.steviaMoisture }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="2" border class="mb-6 quality-descriptions">
          <el-descriptions-item label="铅(mg/kg)">
            {{ qualityData.steviaLeadMgPerKg }}
          </el-descriptions-item>
          <el-descriptions-item label="总砷(mg/kg)">
            {{ qualityData.steviaTotalArsenicMgPerKg }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="2" border class="mb-6 quality-descriptions">
          <el-descriptions-item label="甲醇(mg/kg)">
            {{ qualityData.steviaMethanolMgPerKg }}
          </el-descriptions-item>
          <el-descriptions-item label="乙醇(mg/kg)">
            {{ qualityData.steviaEthanolMgPerKg }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="2" border class="mb-6 quality-descriptions">
          <el-descriptions-item label="PH值">
            {{ qualityData.steviaPhValue }}
          </el-descriptions-item>
          <el-descriptions-item label="比吸光">
            {{ qualityData.steviaSpecificAbsorbance }}
          </el-descriptions-item>
          <el-descriptions-item label="透光率(%)">
            {{ qualityData.steviaTransmittance }}
          </el-descriptions-item>
          <el-descriptions-item label="产量(kg)">
            {{ qualityData.steviaYield }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="3" border class="mb-6 quality-descriptions">
          <el-descriptions-item label="RD值">
            {{ qualityData.steviaRd }}
          </el-descriptions-item>
          <el-descriptions-item label="RA值">
            {{ qualityData.steviaRa }}
          </el-descriptions-item>
          <el-descriptions-item label="STV值">
            {{ qualityData.steviaStv }}
          </el-descriptions-item>
          <el-descriptions-item label="RF值">
            {{ qualityData.steviaRf }}
          </el-descriptions-item>
          <el-descriptions-item label="RC值">
            {{ qualityData.steviaRc }}
          </el-descriptions-item>
          <el-descriptions-item label="DA值">
            {{ qualityData.steviaDa }}
          </el-descriptions-item>
          <el-descriptions-item label="RV值">
            {{ qualityData.steviaRv }}
          </el-descriptions-item>
          <el-descriptions-item label="RB值">
            {{ qualityData.steviaRb }}
          </el-descriptions-item>
          <el-descriptions-item label="SB值">
            {{ qualityData.steviaSb }}
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="qualityData.steviaRemark" class="mt-6">
          <el-card class="remark-card" shadow="never">
            <div class="remark-content">
              {{ qualityData.steviaRemark }}
            </div>
          </el-card>
        </div>
      </el-card>

      <!-- 产品类型信息 -->
      <div v-if="qualityData && qualityData.productName" class="product-type-info mb-6">
        <div class="product-info-card">
          <div class="product-name">
            <i class="el-icon-goods"></i>
            <span class="name-text">{{ qualityData.productName }}</span>
          </div>
          <div class="product-type">
            <span class="type-label">产品类型：</span>
            <el-tag v-if="isTomatoProduct" type="success" size="default" effect="dark">
              <i class="el-icon-apple"></i> 番茄酱产品
            </el-tag>
            <el-tag v-else-if="isSteviaProduct" type="primary" size="default" effect="dark">
              <i class="el-icon-sugar"></i> 甜菊糖产品
            </el-tag>
            <el-tag v-else type="info" size="default" effect="dark">
              <i class="el-icon-question"></i> 其他产品
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 当既不是番茄酱也不是甜菊糖时，显示提示信息 -->
      <div v-if="qualityData && !isTomatoProduct && !isSteviaProduct" class="mb-4">
        <el-alert
          title="暂无专项质检信息"
          type="info"
          description="该产品不是番茄酱或甜菊糖产品，暂无专项质检信息展示。"
          :closable="false"
        />
      </div>

      <div v-if="!qualityData" class="text-center text-gray-500 py-8">
        暂无质检信息
      </div>
    </div>

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

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

defineOptions({ name: 'QualityDetailDialog' })

const dialogVisible = ref(false)
const loading = ref(false)
const qualityData = ref<any>(null)

// 判断是否为番茄酱产品
const isTomatoProduct = computed(() => {
  if (!qualityData.value || !qualityData.value.productName) {
    return false
  }
  const productName = qualityData.value.productName.toLowerCase()
  // 番茄酱相关关键词
  const tomatoKeywords = ['番茄', 'tomato', '番茄酱', '番茄膏', '番茄浆', '番茄糊']
  return tomatoKeywords.some(keyword => productName.includes(keyword))
})

// 判断是否为甜菊糖产品
const isSteviaProduct = computed(() => {
  if (!qualityData.value || !qualityData.value.productName) {
    return false
  }
  const productName = qualityData.value.productName.toLowerCase()
  // 甜菊糖相关关键词
  const steviaKeywords = ['甜菊', 'stevia', '甜菊糖', '甜菊苷', '甜叶菊', 'steviol']
  return steviaKeywords.some(keyword => productName.includes(keyword))
})

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

/** 获取状态文本 */
const getStatusText = (status: number) => {
  switch (status) {
    case 0: return '待检'
    case 1: return '检验中'
    case 2: return '已完成'
    default: return '未知'
  }
}

/** 打开弹窗 */
const open = async (qualityId: number) => {
  dialogVisible.value = true
  loading.value = true

  try {
    if (qualityId) {
      const data = await getFinishedProductQuality(qualityId)
      qualityData.value = data

      // 调试信息：输出产品名称和类型判断结果
      if (data && data.productName) {
        console.log('质检产品信息:', {
          productName: data.productName,
          isTomato: data.productName.toLowerCase().includes('番茄') || data.productName.toLowerCase().includes('tomato'),
          isStevia: data.productName.toLowerCase().includes('甜菊') || data.productName.toLowerCase().includes('stevia')
        })
      }
    } else {
      qualityData.value = null
    }
  } catch (error) {
    console.error('获取质检信息失败:', error)
    qualityData.value = null
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
/* 弹窗整体样式 */
:deep(.quality-dialog .el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.quality-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
}

:deep(.quality-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
}

:deep(.quality-dialog .el-dialog__body) {
  padding: 24px;
  background-color: #f8fafc;
}

/* 基本信息样式 */
.quality-basic-info {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 产品类型信息卡片 */
.product-type-info {
  margin-bottom: 24px;
}

.product-info-card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.product-name {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.product-name i {
  margin-right: 8px;
  font-size: 18px;
}

.product-type {
  display: flex;
  align-items: center;
}

.type-label {
  margin-right: 12px;
  font-size: 14px;
  opacity: 0.9;
}

/* 质检卡片样式 */
.quality-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.quality-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.tomato-card {
  border-left: 4px solid #f56565;
}

.stevia-card {
  border-left: 4px solid #4299e1;
}

.card-header {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 20px;
}

.header-content {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #4a5568;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

/* 分段标题样式 */
.section-title {
  display: flex;
  align-items: center;
  margin: 24px 0 16px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
  border-radius: 8px;
  border-left: 4px solid #4299e1;
  font-weight: 600;
  color: #2d3748;
}

.section-title i {
  margin-right: 8px;
  font-size: 16px;
  color: #4299e1;
}

/* 质检描述列表样式 */
.quality-descriptions {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.quality-descriptions .el-descriptions__label) {
  background-color: #f7fafc;
  font-weight: 600;
  color: #4a5568;
  width: 140px;
}

:deep(.quality-descriptions .el-descriptions__content) {
  background-color: white;
  padding: 12px 16px;
}

/* 备注卡片样式 */
.remark-card {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.remark-content {
  padding: 16px;
  background-color: #f7fafc;
  border-radius: 6px;
  color: #4a5568;
  line-height: 1.6;
  font-size: 14px;
}

/* 通用样式 */
.ml-2 {
  margin-left: 8px;
}

.mb-2 {
  margin-bottom: 8px;
}

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

.mb-6 {
  margin-bottom: 24px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-6 {
  margin-top: 24px;
}

.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.text-center {
  text-align: center;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-sm {
  font-size: 14px;
}

/* 标签样式优化 */
:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
  padding: 4px 8px;
}

/* 警告框样式 */
:deep(.el-alert) {
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-info-card {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  :deep(.quality-descriptions) {
    font-size: 12px;
  }

  .section-title {
    font-size: 14px;
  }
}
</style>
