<template>
  <!-- 移动端使用抽屉 -->
  <el-drawer
    v-if="isMobile"
    v-model="dialogVisible"
    title="质检详情"
    direction="btt"
    size="90%"
  >
    <div class="mobile-detail">
      <!-- 基本信息 -->
      <div class="mobile-section">
        <div class="mobile-section__title">基本信息</div>
        <div class="mobile-info-grid">
          <div class="info-cell">
            <span class="info-cell__label">批号</span>
            <span class="info-cell__value">{{ formData.workOrderCode }}</span>
          </div>
          <div class="info-cell">
            <span class="info-cell__label">产品名称</span>
            <span class="info-cell__value">{{ formData.productName }}</span>
          </div>
          <div class="info-cell">
            <span class="info-cell__label">产量(吨)</span>
            <span class="info-cell__value highlight">{{ formData.weight }}</span>
          </div>
          <div class="info-cell">
            <span class="info-cell__label">质检员</span>
            <span class="info-cell__value">{{ formData.inspectorName }}</span>
          </div>
          <div class="info-cell">
            <span class="info-cell__label">质检时间</span>
            <span class="info-cell__value">{{ formatDateTime(formData.inspectionTime) }}</span>
          </div>
          <div class="info-cell">
            <span class="info-cell__label">创建时间</span>
            <span class="info-cell__value">{{ formatDateTime(formData.createTime) }}</span>
          </div>
        </div>
      </div>

      <!-- 主要成分 -->
      <div class="mobile-section">
        <div class="mobile-section__title">主要成分</div>
        <div class="mobile-indicator-grid">
          <div class="indicator-card primary">
            <span class="indicator-card__label">糖苷</span>
            <span class="indicator-card__value">{{ formatPercent(formData.steviaGlycosidesPercent) }}%</span>
          </div>
          <div class="indicator-card">
            <span class="indicator-card__label">水分</span>
            <span class="indicator-card__value">{{ formatPercent(formData.steviaMoisture) }}%</span>
          </div>
          <div class="indicator-card">
            <span class="indicator-card__label">灰份</span>
            <span class="indicator-card__value">{{ formatPercent(formData.steviaAshPercent) }}%</span>
          </div>
          <div class="indicator-card">
            <span class="indicator-card__label">PH值</span>
            <span class="indicator-card__value">{{ formatDecimal(formData.steviaPhValue) }}</span>
          </div>
        </div>
      </div>

      <!-- 糖苷组分 -->
      <div class="mobile-section">
        <div class="mobile-section__title">甘菊糖苷组分</div>
        <div class="mobile-indicator-list">
          <div class="indicator-row">
            <span class="indicator-row__label">RD</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRd) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">RA</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRa) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">STV</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaStv) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">RF</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRf) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">RC</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRc) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">DA</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaDa) }}</span>
          </div>
        </div>
      </div>

      <!-- 其他指标 -->
      <div class="mobile-section">
        <div class="mobile-section__title">其他指标</div>
        <div class="mobile-indicator-list">
          <div class="indicator-row">
            <span class="indicator-row__label">RV</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRv) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">RB</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaRb) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">SB</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaSb) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">比吸光</span>
            <span class="indicator-row__value">{{ formatDecimal(formData.steviaSpecificAbsorbance) }}</span>
          </div>
          <div class="indicator-row">
            <span class="indicator-row__label">透光率</span>
            <span class="indicator-row__value">{{ formatPercent(formData.steviaTransmittance) }}%</span>
          </div>
        </div>
      </div>

      <!-- 备注 -->
      <div class="mobile-section" v-if="formData.remark">
        <div class="mobile-section__title">备注信息</div>
        <div class="remark-content">{{ formData.remark }}</div>
      </div>
    </div>

    <template #footer>
      <div class="mobile-drawer-footer">
        <el-button @click="dialogVisible = false" style="flex:1">关闭</el-button>
      </div>
    </template>
  </el-drawer>

  <!-- PC端使用对话框 -->
  <el-dialog
    v-else
    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 { computed } from 'vue'
import { FinishedProductQuality } from '@/api/mes/quality/productquality'
import { formatDate } from '@/utils/formatTime'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

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 lang="scss">
.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;
}

// 移动端样式
.mobile-detail {
  padding-bottom: 20px;
}

.mobile-section {
  margin-bottom: 20px;
  
  &__title {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #409eff;
  }
}

.mobile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
  
  &__label {
    font-size: 12px;
    color: #909399;
  }
  
  &__value {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    
    &.highlight {
      color: #409eff;
      font-size: 16px;
    }
  }
}

.mobile-indicator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.indicator-card {
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
  
  &.primary {
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
  }
  
  &__label {
    display: block;
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
  }
  
  &__value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  
  &.primary &__value {
    color: #409eff;
  }
}

.mobile-indicator-list {
  background: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
}

.indicator-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #e4e7ed;
  
  &:last-child {
    border-bottom: none;
  }
  
  &__label {
    font-size: 13px;
    color: #606266;
  }
  
  &__value {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }
}

.remark-content {
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.mobile-drawer-footer {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
}
</style>
