<template>
  <Dialog v-model="dialogVisible" title="供应商详细信息" width="100%" fullscreen class="mobile-supplier-detail-dialog">
    <div v-loading="loading" class="mobile-detail-wrapper">
      <!-- 供应商基本信息 -->
      <div class="mobile-detail-section">
        <div class="mobile-detail-section__title">供应商基本信息</div>
        <div class="mobile-detail-row">
          <span class="mobile-detail-label">供应商名称</span>
          <span class="mobile-detail-value">{{ supplierData.supplierName }}</span>
        </div>
        <div class="mobile-detail-row">
          <span class="mobile-detail-label">评价次数</span>
          <span class="mobile-detail-value">{{ supplierData.totalEvaluations }}次</span>
        </div>
        <div class="mobile-detail-row">
          <span class="mobile-detail-label">综合评分</span>
          <span class="mobile-detail-value" :class="getScoreClass(supplierData.avgTotalScore)" style="font-weight:700">
            {{ supplierData.avgTotalScore }}分
          </span>
        </div>
        <div class="mobile-detail-row">
          <span class="mobile-detail-label">评价等级</span>
          <el-tag :type="getScoreTagType(supplierData.avgTotalScore)" size="small">
            {{ getScoreLevel(supplierData.avgTotalScore) }}
          </el-tag>
        </div>
        <div class="mobile-detail-row">
          <span class="mobile-detail-label">最近评价</span>
          <span class="mobile-detail-value">{{ formatDate(supplierData.lastEvaluationTime) }}</span>
        </div>
        <div class="mobile-detail-row">
          <span class="mobile-detail-label">评价趋势</span>
          <span :class="getTrendClass(supplierData.trend)">{{ getTrendText(supplierData.trend) }}</span>
        </div>
      </div>

      <!-- 各维度评分详情 -->
      <div class="mobile-detail-section">
        <div class="mobile-detail-section__title">各维度评分详情</div>
        <div class="mobile-dimension-item">
          <div class="mobile-dimension-item__header">
            <span>质量评分</span>
            <span class="mobile-dimension-item__score">{{ supplierData.avgQualityScore }}分</span>
          </div>
          <el-progress :percentage="(supplierData.avgQualityScore / 10) * 100" :color="getProgressColor(supplierData.avgQualityScore)" :stroke-width="10" />
          <div class="mobile-dimension-item__desc">产品质量、规格符合度、缺陷率等</div>
        </div>
        <div class="mobile-dimension-item">
          <div class="mobile-dimension-item__header">
            <span>服务评分</span>
            <span class="mobile-dimension-item__score">{{ supplierData.avgServiceScore }}分</span>
          </div>
          <el-progress :percentage="(supplierData.avgServiceScore / 10) * 100" :color="getProgressColor(supplierData.avgServiceScore)" :stroke-width="10" />
          <div class="mobile-dimension-item__desc">售前售后服务、响应速度、专业程度等</div>
        </div>
        <div class="mobile-dimension-item">
          <div class="mobile-dimension-item__header">
            <span>价格评分</span>
            <span class="mobile-dimension-item__score">{{ supplierData.avgPriceScore }}分</span>
          </div>
          <el-progress :percentage="(supplierData.avgPriceScore / 10) * 100" :color="getProgressColor(supplierData.avgPriceScore)" :stroke-width="10" />
          <div class="mobile-dimension-item__desc">价格合理性、性价比、优惠政策等</div>
        </div>
        <div class="mobile-dimension-item">
          <div class="mobile-dimension-item__header">
            <span>交付评分</span>
            <span class="mobile-dimension-item__score">{{ supplierData.avgDeliveryScore }}分</span>
          </div>
          <el-progress :percentage="(supplierData.avgDeliveryScore / 10) * 100" :color="getProgressColor(supplierData.avgDeliveryScore)" :stroke-width="10" />
          <div class="mobile-dimension-item__desc">交付及时性、包装质量、物流配送等</div>
        </div>
      </div>

      <!-- 近期评价趋势 -->
      <div class="mobile-detail-section">
        <div class="mobile-detail-section__title">近期评价趋势</div>
        <div class="mobile-trend-stats">
          <div class="mobile-trend-stat">
            <div class="mobile-trend-stat__val">{{ trendData.thisMonth }}次</div>
            <div class="mobile-trend-stat__label">本月评价</div>
          </div>
          <div class="mobile-trend-stat">
            <div class="mobile-trend-stat__val">{{ trendData.lastMonth }}次</div>
            <div class="mobile-trend-stat__label">上月评价</div>
          </div>
          <div class="mobile-trend-stat">
            <div class="mobile-trend-stat__val" :class="getTrendClass(supplierData.trend)">{{ trendData.change }}%</div>
            <div class="mobile-trend-stat__label">评价变化</div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="mobile-form-footer">
        <el-button @click="dialogVisible = false" style="flex:1">关闭</el-button>
        <el-button type="primary" @click="viewEvaluationHistory" style="flex:1">查看评价历史</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'

interface SupplierSummary {
  supplierId: number
  supplierName: string
  totalEvaluations: number
  avgTotalScore: number
  avgQualityScore: number
  avgServiceScore: number
  avgPriceScore: number
  avgDeliveryScore: number
  lastEvaluationTime: string
  trend: 'up' | 'down' | 'stable'
}

const dialogVisible = ref(false)
const loading = ref(false)
const supplierData = ref<SupplierSummary>({} as SupplierSummary)
const trendData = ref({
  thisMonth: 0,
  lastMonth: 0,
  change: 0
})

// 打开详情弹窗
const open = (data: SupplierSummary) => {
  dialogVisible.value = true
  supplierData.value = { ...data }
  loadTrendData()
}

// 加载趋势数据
const loadTrendData = () => {
  // 模拟趋势数据
  const thisMonth = Math.floor(Math.random() * 10) + 5
  const lastMonth = Math.floor(Math.random() * 10) + 5
  const change = Math.round(((thisMonth - lastMonth) / lastMonth) * 100)
  
  trendData.value = {
    thisMonth,
    lastMonth,
    change
  }
}

// 获取评分标签类型
const getScoreTagType = (score: number) => {
  if (score >= 9) return 'success'
  if (score >= 8) return ''
  if (score >= 7) return 'warning'
  if (score >= 6) return 'info'
  return 'danger'
}

// 获取评分等级
const getScoreLevel = (score: number) => {
  if (score >= 9) return '优秀'
  if (score >= 8) return '良好'
  if (score >= 7) return '一般'
  if (score >= 6) return '及格'
  return '不及格'
}

// 获取评分样式类
const getScoreClass = (score: number) => {
  if (score >= 9) return 'score-excellent'
  if (score >= 8) return 'score-good'
  if (score >= 7) return 'score-average'
  if (score >= 6) return 'score-pass'
  return 'score-fail'
}

// 获取进度条颜色
const getProgressColor = (score: number) => {
  if (score >= 9) return '#67c23a'
  if (score >= 8) return '#409eff'
  if (score >= 7) return '#e6a23c'
  if (score >= 6) return '#909399'
  return '#f56c6c'
}

// 获取趋势图标
const getTrendIcon = (trend: string) => {
  switch (trend) {
    case 'up': return 'ep:trend-charts'
    case 'down': return 'ep:bottom'
    case 'stable': return 'ep:minus'
    default: return 'ep:minus'
  }
}

// 获取趋势样式类
const getTrendClass = (trend: string) => {
  switch (trend) {
    case 'up': return 'trend-up'
    case 'down': return 'trend-down'
    case 'stable': return 'trend-stable'
    default: return 'trend-stable'
  }
}

// 获取趋势文本
const getTrendText = (trend: string) => {
  switch (trend) {
    case 'up': return '上升'
    case 'down': return '下降'
    case 'stable': return '稳定'
    default: return '稳定'
  }
}

// 查看评价历史
const viewEvaluationHistory = () => {
  // 触发父组件的评价历史查看
  emit('viewHistory', supplierData.value.supplierId, supplierData.value.supplierName)
  dialogVisible.value = false
}

// 定义事件
const emit = defineEmits<{
  viewHistory: [supplierId: number, supplierName: string]
}>()

// 暴露方法
defineExpose({ open })
</script>

<style lang="scss" scoped>
.mobile-detail-wrapper {
  padding: 0 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-detail-section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  &__title {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
}
.mobile-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.mobile-detail-label {
  color: #909399;
  flex-shrink: 0;
  margin-right: 12px;
}
.mobile-detail-value {
  color: #303133;
  text-align: right;
}
.score-excellent { color: #67c23a; }
.score-good { color: #409eff; }
.score-average { color: #e6a23c; }
.score-pass { color: #909399; }
.score-fail { color: #f56c6c; }
.trend-up { color: #67c23a; }
.trend-down { color: #f56c6c; }
.trend-stable { color: #909399; }
.mobile-dimension-item {
  margin-bottom: 16px;
  &:last-child { margin-bottom: 0; }
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }
  &__score {
    font-weight: 700;
    color: #409eff;
  }
  &__desc {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
  }
}
.mobile-trend-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.mobile-trend-stat {
  text-align: center;
  padding: 12px 8px;
  background: #f8f9fa;
  border-radius: 8px;
  flex: 1;
  &__val {
    font-size: 18px;
    font-weight: 700;
    color: #303133;
    margin-bottom: 4px;
  }
  &__label {
    font-size: 11px;
    color: #909399;
  }
}
.mobile-form-footer {
  display: flex;
  gap: 12px;
}
:deep(.mobile-supplier-detail-dialog .el-dialog__body) {
  padding: 12px;
  background: #f5f5f5;
}
:deep(.el-progress-bar__outer) {
  background-color: #f5f7fa;
}
</style>
