<template>
  <div class="wel-dashboard">
    <!-- 欢迎横幅 -->
    <div class="wel-banner">
      <div class="wel-banner__deco">
        <span class="wel-banner__circle wel-banner__circle--1"></span>
        <span class="wel-banner__circle wel-banner__circle--2"></span>
        <span class="wel-banner__circle wel-banner__circle--3"></span>
        <span class="wel-banner__dot-grid">
          <i v-for="n in 6" :key="'d'+n"></i>
        </span>
      </div>
      <div class="wel-banner__left">
        <div class="wel-banner__avatar">
          <el-icon><Avatar /></el-icon>
        </div>
        <div class="wel-banner__info">
          <h2 class="wel-banner__hello">
            你好，{{ userName }}<span class="wel-banner__wave">👋</span>
          </h2>
          <p class="wel-banner__sub">
            TMS-ERP 货运管理系统 · {{ todayText }}
          </p>
        </div>
      </div>
      <div class="wel-banner__right">
        <el-button type="primary" :icon="Plus" @click="goPath('/business/waybill-manage')">
          新建运单
        </el-button>
      </div>
    </div>

    <!-- 核心指标卡 -->
    <el-row :gutter="16" class="wel-metrics">
      <el-col v-for="m in metrics" :key="m.key" :xs="12" :sm="12" :md="6">
        <div class="metric-card" :style="{ '--accent': m.color }">
          <div class="metric-card__icon">
            <el-icon><component :is="m.icon" /></el-icon>
          </div>
          <div class="metric-card__body">
            <div class="metric-card__label">{{ m.label }}</div>
            <div class="metric-card__value">
              {{ m.value }}<span class="metric-card__unit">{{ m.unit }}</span>
            </div>
            <div
              class="metric-card__trend"
              :class="m.trend >= 0 ? 'is-up' : 'is-down'"
            >
              <el-icon>
                <component :is="m.trend >= 0 ? 'Top' : 'Bottom'" />
              </el-icon>
              {{ Math.abs(m.trend) }}%
              <span class="metric-card__trend-sub">{{ m.sub }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区 -->
    <el-row :gutter="16" class="wel-charts">
      <el-col :xs="24" :md="16">
        <div class="panel">
          <div class="panel__head">
            <span class="panel__title">运单量趋势</span>
            <span class="panel__extra">近 7 日（单）</span>
          </div>
          <div class="trend">
            <div v-for="b in trendBars" :key="b.label" class="trend__col">
              <div class="trend__val">{{ b.value }}</div>
              <div class="trend__bar">
                <div
                  class="trend__fill"
                  :style="{ height: b.percent + '%' }"
                ></div>
              </div>
              <div class="trend__label">{{ b.label }}</div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :md="8">
        <div class="panel">
          <div class="panel__head">
            <span class="panel__title">货物类型分布</span>
          </div>
          <div class="donut-wrap">
            <div class="donut">
              <svg viewBox="0 0 140 140" class="donut__svg">
                <circle
                  cx="70"
                  cy="70"
                  r="52"
                  fill="none"
                  stroke="#eef0f5"
                  stroke-width="14"
                />
                <circle
                  v-for="(s, i) in donutSegments"
                  :key="i"
                  cx="70"
                  cy="70"
                  r="52"
                  fill="none"
                  :stroke="s.color"
                  stroke-width="14"
                  :stroke-dasharray="s.dash"
                  :stroke-dashoffset="s.offset"
                  transform="rotate(-90 70 70)"
                />
              </svg>
              <div class="donut__center">
                <div class="donut__num">{{ donutTotal }}</div>
                <div class="donut__unit">总运单</div>
              </div>
            </div>
            <ul class="donut-legend">
              <li v-for="(s, i) in donutSegments" :key="i">
                <span class="dot" :style="{ background: s.color }"></span>
                {{ s.name }}
                <em>{{ s.value }}%</em>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 下方区 -->
    <el-row :gutter="16" class="wel-bottom">
      <el-col :xs="24" :md="14">
        <div class="panel">
          <div class="panel__head">
            <span class="panel__title">运输方式占比</span>
          </div>
          <div class="bar-list">
            <div v-for="t in transportData" :key="t.name" class="bar-row">
              <div class="bar-row__name">{{ t.name }}</div>
              <div class="bar-row__track">
                <div
                  class="bar-row__fill"
                  :style="{ width: t.value + '%', background: t.color }"
                ></div>
              </div>
              <div class="bar-row__val">{{ t.value }}%</div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :md="10">
        <div class="panel">
          <div class="panel__head">
            <span class="panel__title">预警提醒</span>
            <el-badge :value="alerts.length" class="panel__badge" />
          </div>
          <ul class="alert-list">
            <li
              v-for="(a, i) in alerts"
              :key="i"
              class="alert-item"
              :class="'lv-' + a.level"
            >
              <span class="alert-item__dot"></span>
              <div class="alert-item__main">
                <div class="alert-item__title">{{ a.title }}</div>
                <div class="alert-item__desc">{{ a.desc }}</div>
              </div>
              <div class="alert-item__time">{{ a.time }}</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <div class="panel wel-quick">
      <div class="panel__head">
        <span class="panel__title">快捷入口</span>
      </div>
      <div class="quick-grid">
        <div
          v-for="q in quickEntries"
          :key="q.path"
          class="quick-item"
          :style="{ '--accent': q.color }"
          @click="goPath(q.path)"
        >
          <div class="quick-item__icon">
            <el-icon><component :is="q.icon" /></el-icon>
          </div>
          <div class="quick-item__name">{{ q.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Plus } from '@element-plus/icons-vue';

export default {
  name: 'welIndex',
  data() {
    return {
      Plus,
      // ===== Mock 数据：实际接入时替换为对应后端接口返回值 =====
      // 核心指标：可对接各模块统计接口（如 /blade-business/waybill/count）
      metrics: [
        { key: 'waybill', label: '今日运单', value: 186, unit: '单', icon: 'Document', color: '#409eff', trend: 12.5, sub: '较昨日' },
        { key: 'transit', label: '在途运输', value: 43, unit: '单', icon: 'Van', color: '#67c23a', trend: 3.2, sub: '在途运单' },
        { key: 'todo', label: '待办事项', value: 9, unit: '项', icon: 'Bell', color: '#e6a23c', trend: -2.0, sub: '待处理' },
        { key: 'capacity', label: '运力车辆', value: 128, unit: '辆', icon: 'Truck', color: '#9254de', trend: 5.1, sub: '在运+待命' },
      ],
      // 运单趋势：可对接 /blade-business/waybill/trend?days=7
      trendData: [
        { label: '周一', value: 120 },
        { label: '周二', value: 132 },
        { label: '周三', value: 101 },
        { label: '周四', value: 158 },
        { label: '周五', value: 190 },
        { label: '周六', value: 142 },
        { label: '周日', value: 186 },
      ],
      // 货物类型分布：可对接 /blade-business/waybill/cargoStat
      cargoData: [
        { name: '普货', value: 42, color: '#409eff' },
        { name: '冷链', value: 21, color: '#13c2c2' },
        { name: '大件', value: 16, color: '#fa8c16' },
        { name: '危险品', value: 12, color: '#f5222d' },
        { name: '其他', value: 9, color: '#bfbfbf' },
      ],
      // 运输方式占比：可对接 /blade-business/waybill/transportStat
      transportData: [
        { name: '海运', value: 48, color: '#409eff' },
        { name: '铁路', value: 22, color: '#52c41a' },
        { name: '公路', value: 20, color: '#fa8c16' },
        { name: '空运', value: 10, color: '#722ed1' },
      ],
      // 预警提醒：可对接车辆年检/保险/违章 + 合同待审批等接口聚合
      alerts: [
        { level: 'danger', title: '3 辆车年检临期', desc: '桂B·12345 等将于 7 日内到期', time: '今天' },
        { level: 'warning', title: '5 单合同待审批', desc: '客户「广西物产」等提交待审核', time: '今天' },
        { level: 'danger', title: '2 起违章未处理', desc: '桂A·88xxx 超速记录待缴纳', time: '昨天' },
        { level: 'info', title: '4 辆保险下月到期', desc: '建议提前安排续保', time: '本周' },
      ],
      // 快捷入口：path 与菜单路由一致
      quickEntries: [
        { name: '运单管理', path: '/business/waybill-manage', icon: 'Document', color: '#409eff' },
        { name: '运输计划', path: '/business/transport-plan', icon: 'Promotion', color: '#13c2c2' },
        { name: '合同管理', path: '/business/contract-manage', icon: 'Files', color: '#fa8c16' },
        { name: '车辆管理', path: '/vehicle/customer-archive', icon: 'Van', color: '#67c23a' },
        { name: '维修记录', path: '/vehicle/maintenance-record', icon: 'Tools', color: '#9254de' },
        { name: '违章记录', path: '/vehicle/violation-record', icon: 'Warning', color: '#f5222d' },
        { name: '工作待办', path: '/work/todo', icon: 'Bell', color: '#e6a23c' },
        { name: '报表中心', path: '/report/reportlist', icon: 'DataLine', color: '#1677ff' },
      ],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
    userName() {
      return this.userInfo.real_name || this.userInfo.user_name || '用户';
    },
    todayText() {
      const d = new Date();
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const pad = n => (n < 10 ? '0' + n : n);
      return `${d.getFullYear()}年${pad(d.getMonth() + 1)}月${pad(d.getDate())}日 ${week[d.getDay()]}`;
    },
    trendBars() {
      const max = Math.max(...this.trendData.map(d => d.value)) || 1;
      return this.trendData.map(d => ({
        ...d,
        percent: Math.round((d.value / max) * 100),
      }));
    },
    donutTotal() {
      return this.cargoData.reduce((s, d) => s + d.value, 0);
    },
    donutSegments() {
      const total = this.cargoData.reduce((s, d) => s + d.value, 0) || 1;
      const r = 52;
      const c = 2 * Math.PI * r;
      let acc = 0;
      return this.cargoData.map(d => {
        const len = (d.value / total) * c;
        const seg = { ...d, dash: `${len} ${c - len}`, offset: -acc };
        acc += len;
        return seg;
      });
    },
  },
  methods: {
    goPath(path) {
      this.$router.push({ path });
    },
  },
};
</script>

<style lang="scss" scoped>
.wel-dashboard {
  padding: 8px 4px;
}

/* 横幅 */
.wel-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 12px;
  padding: 26px 30px;
  color: #303133;
  margin-bottom: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* 横幅装饰元素 */
.wel-banner__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wel-banner__circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(115, 209, 61, 0.07);
  &--1 {
    width: 200px;
    height: 200px;
    right: -40px;
    top: -60px;
    background: rgba(115, 209, 61, 0.1);
  }
  &--2 {
    width: 140px;
    height: 140px;
    right: 120px;
    bottom: -50px;
    background: rgba(115, 209, 61, 0.06);
  }
  &--3 {
    width: 80px;
    height: 80px;
    left: 25%;
    top: -20px;
    background: rgba(115, 209, 61, 0.05);
  }
}
.wel-banner__dot-grid {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 5px);
  gap: 8px;
  i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(115, 209, 61, 0.2);
    &:nth-child(3n) { background: rgba(115, 209, 61, 0.35); }
    &:nth-child(3n + 1) { background: rgba(115, 209, 61, 0.12); }
  }
}
.wel-banner__left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.wel-banner__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(115, 209, 61, 0.15);
  color: #389e0d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.wel-banner__hello {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.wel-banner__wave {
  margin-left: 6px;
}
.wel-banner__sub {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.9;
}
.wel-banner__right {
  position: relative;
  z-index: 1;
}

/* 指标卡 */
.wel-metrics {
  margin-bottom: 0;
}

/* 图表区：左右面板等高 */
.wel-charts {
  margin-bottom: 0;
  align-items: stretch;

  .el-col {
    display: flex;

    > .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}

/* 下方区：左右面板等高 */
.wel-bottom {
  align-items: stretch;

  .el-col {
    display: flex;

    > .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}
.metric-card {
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}
.metric-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: var(--accent);
}
.metric-card__label {
  font-size: 13px;
  color: #909399;
}
.metric-card__value {
  font-size: 26px;
  font-weight: 700;
  color: #303133;
  line-height: 1.3;
}
.metric-card__unit {
  font-size: 13px;
  font-weight: 400;
  color: #909399;
  margin-left: 4px;
}
.metric-card__trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  &.is-up {
    color: #67c23a;
  }
  &.is-down {
    color: #f56c6c;
  }
}
.metric-card__trend-sub {
  color: #c0c4cc;
  margin-left: 4px;
}

/* 面板通用 */
.panel {
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  // 当面板在 flex 列容器中时，内容区自动撑满
  .trend,
  .donut-wrap,
  .bar-list,
  .alert-list {
    flex: 1;
  }
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}
.panel__title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.panel__extra {
  font-size: 12px;
  color: #909399;
}
.panel__badge {
  margin-top: -2px;
}

/* 趋势柱 */
.trend {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 200px;
  padding: 0 4px;
}
.trend__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.trend__val {
  font-size: 12px;
  color: #606266;
  margin-bottom: 6px;
}
.trend__bar {
  flex: 1;
  width: 60%;
  max-width: 36px;
  background: #f0f2f5;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.trend__fill {
  width: 100%;
  background: linear-gradient(180deg, #5aa9ff, #409eff);
  border-radius: 6px 6px 0 0;
  transition: height 0.4s ease;
}
.trend__label {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

/* 环形图 */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 200px;
}
.donut {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.donut__svg {
  transform: rotate(0deg);
}
.donut__center {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut__num {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
}
.donut__unit {
  font-size: 12px;
  color: #909399;
}
.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  li {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #606266;
    padding: 5px 0;
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 8px;
    }
    em {
      margin-left: auto;
      font-style: normal;
      color: #909399;
    }
  }
}

/* 横向条 */
.bar-list {
  padding: 4px 0;
}
.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bar-row__name {
  width: 48px;
  font-size: 13px;
  color: #606266;
}
.bar-row__track {
  flex: 1;
  height: 10px;
  background: #f0f2f5;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 12px;
}
.bar-row__fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}
.bar-row__val {
  width: 44px;
  text-align: right;
  font-size: 13px;
  color: #909399;
}

/* 预警列表 */
.alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.alert-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
  &:last-child {
    border-bottom: none;
  }
}
.alert-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}
.alert-item.lv-danger .alert-item__dot {
  background: #f56c6c;
}
.alert-item.lv-warning .alert-item__dot {
  background: #e6a23c;
}
.alert-item.lv-info .alert-item__dot {
  background: #409eff;
}
.alert-item__main {
  flex: 1;
  min-width: 0;
}
.alert-item__title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}
.alert-item__desc {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-item__time {
  font-size: 12px;
  color: #c0c4cc;
  flex-shrink: 0;
  margin-left: 12px;
}

/* 快捷入口 */
.wel-quick {
  margin-bottom: 0;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.quick-item {
  background: #fafbfc;
  border: 1px solid #eef0f5;
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
}
.quick-item__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: var(--accent);
}
.quick-item__name {
  font-size: 13px;
  color: #606266;
}

@media (max-width: 768px) {
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wel-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
</style>
