<template>
  <div class="dashboard-page">
    <el-card class="dashboard-card">
      <div class="dashboard-container">
        <section class="hero-panel">
          <div class="hero-copy">
            <div class="hero-badge">
              <svg-icon icon-class="人员" class="hero-badge-icon"/>
              <span>{{ $t('dashboard.workbench') }}</span>
            </div>
            <h1 class="hero-title">{{ greeting }}，{{ name }}</h1>
            <p class="hero-description">
              {{ $t('dashboard.heroDescription', {
                date: todayLabel,
                moduleCount: fathers.length,
                entryCount: sons.length,
                noticeCount: noticeTotal
              }) }}
            </p>
          </div>
          <div class="hero-summary">
            <div v-for="metric in heroMetrics" :key="metric.label" class="summary-pill">
              <span class="summary-value">{{ metric.value }}</span>
              <span class="summary-label">{{ metric.label }}</span>
            </div>
          </div>
        </section>

        <section class="stats-grid">
          <div
            v-for="(metric, index) in heroMetrics"
            :key="metric.label"
            class="stat-card"
            :style="getGradientStyle(index)"
          >
            <div class="stat-card__label">{{ metric.label }}</div>
            <div class="stat-card__value">{{ metric.value }}</div>
            <div class="stat-card__hint">{{ metric.hint }}</div>
          </div>
        </section>

        <section class="notice-panel">
          <div class="section-heading">
            <div>
              <div class="section-eyebrow">{{ $t('dashboard.focus') }}</div>
              <h2 class="section-title">{{ $t('dashboard.pendingTitle') }}</h2>
            </div>
            <div class="section-meta">{{ $t('dashboard.sortHint') }}</div>
          </div>

        <div v-if="sudokus.length" class="notice-grid">
          <router-link
            v-for="(item, index) in sudokus"
            :key="item.id || index"
            :to="item.router"
            class="notice-card"
          >
            <div class="notice-card__icon" :style="getSoftStyle(index)">
              <svg-icon :icon-class="item.icon || '看板_board'"/>
            </div>
            <div class="notice-card__body">
              <div class="notice-card__title">{{ translateMenuTitle(item.name) }}</div>
              <div class="notice-card__subtitle">{{ $t('dashboard.handleHint') }}</div>
            </div>
            <div class="notice-card__count">{{ item.value }}</div>
          </router-link>
        </div>

        <div v-else class="empty-panel">
          <svg-icon icon-class="看板_board" class="empty-panel__icon"/>
          <div class="empty-panel__title">{{ $t('dashboard.emptyTitle') }}</div>
          <div class="empty-panel__text">{{ $t('dashboard.emptyText') }}</div>
        </div>
        </section>

        <section
          v-for="(section, sectionIndex) in moduleSections"
          :key="section.id"
          class="module-panel"
        >
          <div class="section-heading">
            <div class="module-title-wrap">
              <div class="module-icon" :style="getSoftStyle(sectionIndex)">
                <svg-icon :icon-class="section.icon || '模块化'"/>
              </div>
              <div>
                <div class="section-eyebrow">{{ $t('dashboard.module') }}</div>
                <h2 class="section-title">{{ translateMenuTitle(section.title) }}</h2>
              </div>
            </div>
            <div class="section-meta">{{ $t('dashboard.moduleEntryCount', { count: section.children.length }) }}</div>
          </div>

          <div class="module-grid">
            <router-link
              v-for="(son, itemIndex) in section.children"
              :key="son.id"
              :to="son.path"
              class="module-entry"
            >
              <div class="module-entry__glow" :style="getSoftStyle(sectionIndex + itemIndex)"/>
              <div class="module-entry__icon" :style="getSoftStyle(sectionIndex + itemIndex)">
                <svg-icon :icon-class="son.icon || '模块化'"/>
              </div>
              <div class="module-entry__title">{{ translateMenuTitle(son.title) }}</div>
              <div class="module-entry__meta">
                <span>{{ $t('dashboard.quickAccess') }}</span>
                <svg-icon icon-class="右箭头" class="module-entry__arrow"/>
              </div>
            </router-link>
          </div>
        </section>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import { translateMenuTitle } from '@/utils/i18n'

const DASHBOARD_TONES = [
  ['#1576e8', '#44a0ff'],
  ['#0f9f85', '#43c4a8'],
  ['#f08a24', '#ffb255'],
  ['#6e5df6', '#958bff']
]

export default {
  name: 'Dashboard',
  data() {
    return {
      timer: '',
      fathers: [],
      sons: [],
      sudokus: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'token'
    ]),
    sonsByPid() {
      const map = {}
      for (const son of this.sons) {
        const pid = son.pid
        if (!map[pid]) {
          map[pid] = []
        }
        map[pid].push(son)
      }
      return map
    },
    moduleSections() {
      return this.fathers.map(father => ({
        ...father,
        children: this.sonsByPid[father.id] || []
      })).filter(section => section.children.length > 0)
    },
    noticeTotal() {
      return this.sudokus.reduce((total, item) => total + (Number(item.value) || 0), 0)
    },
    heroMetrics() {
      return [
        {
          label: this.$t('dashboard.metricTopModules'),
          value: this.fathers.length,
          hint: this.$t('dashboard.metricTopModulesHint')
        },
        {
          label: this.$t('dashboard.metricQuickEntries'),
          value: this.sons.length,
          hint: this.$t('dashboard.metricQuickEntriesHint')
        }
        // {
        //   label: this.$t('dashboard.metricPendingMessages'),
        //   value: this.noticeTotal,
        //   hint: this.$t('dashboard.metricPendingMessagesHint')
        // },
        // {
        //   label: this.$t('dashboard.metricNoticeSources'),
        //   value: this.sudokus.length,
        //   hint: this.$t('dashboard.metricNoticeSourcesHint')
        // }
      ]
    },
    greeting() {
      const hour = new Date().getHours()
      if (hour < 12) return this.$t('dashboard.greetingMorning')
      if (hour < 18) return this.$t('dashboard.greetingAfternoon')
      return this.$t('dashboard.greetingEvening')
    },
    todayLabel() {
      return new Intl.DateTimeFormat(this.$i18n.locale, {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        weekday: 'long'
      }).format(new Date())
    }
  },
  mounted() {
    this.loadDashboardData()
    this.timer = setInterval(this.getFileList, 60 * 60 * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    translateMenuTitle,
    async loadDashboardData() {
      await Promise.all([
        this.initFirstModule(),
        this.initSecondModule(),
        this.getFileList()
      ])
    },
    getGradientStyle(index) {
      const tone = DASHBOARD_TONES[index % DASHBOARD_TONES.length]
      return {
        background: `linear-gradient(135deg, ${tone[0]} 0%, ${tone[1]} 100%)`
      }
    },
    getSoftStyle(index) {
      const tone = DASHBOARD_TONES[index % DASHBOARD_TONES.length]
      return {
        background: `linear-gradient(135deg, ${tone[0]}1f 0%, ${tone[1]}24 100%)`,
        color: tone[0]
      }
    },
    async initFirstModule() {
      const data = await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '菜单系统模块_首页信息_查询数据1',
          param: '角色编号=' + this.token
        }
      })

      this.fathers = (data.data || []).map(v => ({
        id: v.id,
        title: v.title,
        icon: v.icon
      }))
    },
    async initSecondModule() {
      const data = await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '菜单系统模块_首页信息_查询数据2',
          param: '角色编号=' + this.token
        }
      })

      this.sons = (data.data || []).map(v => ({
        id: v.id,
        pid: v.pid,
        path: v.path,
        icon: v.icon,
        title: v.title
      }))
    },
    async getFileList() {
      const data = await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '菜单系统模块_通知信息_查询数据',
          param: '角色编号=' + this.token
        }
      })

      const noticeRows = data.data || []
      const sudokus = await Promise.all(noticeRows.map(item => this.getMessageNum(item)))
      this.sudokus = sudokus
        .filter(Boolean)
        .sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0))
    },
    async getMessageNum(item) {
      const res = await request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `select count(*) from ${item.消息通知来源} where ${item.通知条件}`
        }
      })

      return {
        id: item.id,
        name: item.title,
        icon: item.icon,
        router: item.path,
        value: Number(res.data[0].Column1) || 0
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dashboard-page .el-badge__content {
  background-color: rgb(255, 151, 91);
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-page {
  min-height: calc(100vh - 84px);
  padding: 18px;
  background:
    radial-gradient(circle at top right, rgba(21, 118, 232, 0.12), transparent 24%),
    linear-gradient(180deg, #f4f8ff 0%, #eef4fb 100%);
}

.dashboard-card {
  min-height: calc(100vh - 120px);
  border: none;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 60px rgba(26, 61, 111, 0.12);
}

.dashboard-container {
  padding: 28px;
}

.hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(135deg, #0e67d0 0%, #2f8fff 52%, #62b2ff 100%);
  box-shadow: 0 24px 48px rgba(21, 118, 232, 0.22);
  color: #ffffff;
}

.hero-copy {
  flex: 1;
  min-width: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.hero-badge-icon {
  width: 16px;
  height: 16px;
}

.hero-title {
  margin: 18px 0 10px;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 700;
}

.hero-description {
  max-width: 720px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}

.hero-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  width: 320px;
}

.summary-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

.summary-value {
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.summary-label {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 22px;
  border-radius: 24px;
  color: #ffffff;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.stat-card__label {
  position: relative;
  z-index: 1;
  font-size: 14px;
  opacity: 0.9;
}

.stat-card__value {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}

.stat-card__hint {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.84;
}

.notice-panel,
.module-panel {
  margin-top: 24px;
  padding: 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(149, 178, 214, 0.18);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.section-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7a91b1;
}

.section-title {
  margin: 8px 0 0;
  font-size: 24px;
  line-height: 1.2;
  color: #16345f;
}

.section-meta {
  font-size: 13px;
  color: #7d8ea8;
  white-space: nowrap;
}

.notice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.notice-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(28, 66, 117, 0.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.notice-card:hover,
.module-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(28, 66, 117, 0.14);
}

.notice-card__icon,
.module-icon,
.module-entry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 18px;
}

.notice-card__icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
}

.notice-card__body {
  flex: 1;
  min-width: 0;
}

.notice-card__title,
.module-entry__title {
  color: #1a355f;
  font-weight: 600;
}

.notice-card__title {
  font-size: 15px;
  line-height: 1.5;
}

.notice-card__subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: #8aa0bb;
}

.notice-card__count {
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 16px;
  background: #eef5ff;
  color: #1576e8;
  font-size: 22px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
}

.empty-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 1px dashed #c8d7ea;
  border-radius: 24px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
  text-align: center;
}

.empty-panel__icon {
  width: 42px;
  height: 42px;
  color: #8ea6c3;
}

.empty-panel__title {
  margin-top: 16px;
  font-size: 18px;
  color: #26456f;
  font-weight: 600;
}

.empty-panel__text {
  margin-top: 8px;
  font-size: 13px;
  color: #8a9cb4;
}

.module-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.module-icon {
  width: 54px;
  height: 54px;
  font-size: 24px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.module-entry {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(28, 66, 117, 0.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.module-entry__glow {
  position: absolute;
  top: -22px;
  right: -10px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  opacity: 0.9;
}

.module-entry__icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  font-size: 26px;
}

.module-entry__title {
  position: relative;
  z-index: 1;
  margin-top: 38px;
  font-size: 15px;
  line-height: 1.55;
  min-height: 46px;
}

.module-entry__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  color: #7d93ae;
}

.module-entry__arrow {
  width: 14px;
  height: 14px;
}

@media (max-width: 1600px) {
  .notice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .hero-panel {
    flex-direction: column;
  }

  .hero-summary {
    width: 100%;
  }

  .stats-grid,
  .notice-grid,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    padding: 12px;
  }

  .dashboard-container {
    padding: 16px;
  }

  .hero-panel,
  .notice-panel,
  .module-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-summary,
  .stats-grid,
  .notice-grid,
  .module-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .notice-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
