<template>
  <div class="grades-page">
    <el-alert
      :title="$t('title.grades')"
      type="info"
      :closable="false"
      :description="$t('label.hospitalName') + ' / ' + $t('label.category')"
      show-icon
    />

    <el-row :gutter="16" class="row">
      <el-col v-for="g in gradeList" :key="g.code" :span="8">
        <el-card shadow="never" class="grade-card">
          <div class="grade-head" :style="{ background: g.bg }">
            <span class="code">{{ g.code }} {{ $t('category.AShort').replace('A', '') }}</span>
            <span class="hint">{{ g.hint }}</span>
          </div>
          <div class="grade-body">
            <div class="row-item">
              <span class="lbl">{{ $t('common.yes') }}</span>
              <span class="val">{{ g.discount }}</span>
            </div>
            <div class="row-item">
              <span class="lbl">{{ $t('points.title') }}</span>
              <span class="val">{{ g.pointsRate }}</span>
            </div>
            <div class="row-item">
              <span class="lbl">{{ $t('table.hospital') }}</span>
              <span class="val">{{ g.hospitalCount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="never" class="rule-card">
      <template #header>
        <span class="title">{{ $t('points.title') }}</span>
      </template>
      <el-table :data="ruleList" border stripe>
        <el-table-column prop="action" :label="$t('common.operating')" width="200" />
        <el-table-column prop="points" :label="$t('points.points')" width="120" />
        <el-table-column prop="description" :label="$t('points.pointsDesc')" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const gradeList = ref([
  { code: "A", hint: "重点客户", discount: "9.5 折", pointsRate: "2.0x", hospitalCount: 0, bg: "linear-gradient(135deg,#ff7e5f,#feb47b)" },
  { code: "B", hint: "普通客户", discount: "9.8 折", pointsRate: "1.5x", hospitalCount: 0, bg: "linear-gradient(135deg,#6a85b6,#bac8e0)" },
  { code: "C", hint: "潜在客户", discount: "无折扣", pointsRate: "1.0x", hospitalCount: 0, bg: "linear-gradient(135deg,#8b9ff5,#6c7cf3)" },
]);

const ruleList = ref([
  { action: "提交工单", points: "+5", description: "每提交一个有效工单" },
  { action: "工单完成", points: "+10", description: "工单状态变更为已完成" },
  { action: "五星评价", points: "+20", description: "对处理结果进行五星评价" },
  { action: "工单逾期", points: "-5", description: "工单未在 SLA 内处理完成" },
]);
</script>

<style scoped lang="scss">
.grades-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.row {
  margin-top: 4px;
}
.grade-card {
  .grade-head {
    height: 80px;
    border-radius: 4px;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .code {
      font-size: 20px;
      font-weight: 700;
    }
    .hint {
      font-size: 13px;
      opacity: 0.92;
      margin-top: 4px;
    }
  }
  .grade-body {
    padding: 12px 4px 4px;
    .row-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px dashed #ebeef5;
      &:last-child {
        border-bottom: none;
      }
      .lbl {
        color: #909399;
        font-size: 13px;
      }
      .val {
        font-weight: 600;
        color: #303133;
      }
    }
  }
}
.rule-card .title {
  font-size: 16px;
  font-weight: 600;
}
</style>
