<template>
  <v-container fluid class="dashboard-container">
    <v-row class="mb-4">
      <!-- 左侧用户信息栏 -->
      <v-col md="4" sm="4">
        <v-card>
          <v-card-text class="d-flex">
            <v-avatar size="60">
              <v-img :src="userInfo.avatar" alt="用户头像" />
            </v-avatar>
            <div>
              <h3 class="mb-1">{{ userInfo.name }}</h3>
              <div class="pt-2">

                <v-chip size="small" color="primary" class="mr-2">{{ userInfo.role }}</v-chip>
                <v-chip size="small" color="success">{{ userInfo.phone }}</v-chip>
              </div>
            </div>
          </v-card-text>
        </v-card>

        <v-row>
          <v-col md="6" sm="6">
            <v-card class="mt-4">
              <v-card-text class="d-flex">
                <v-avatar size="60">
                  <v-img :src="userInfo.avatar" alt="用户头像" />
                </v-avatar>
                <div>
                  <h3 class="mb-1">{{ userInfo.name }}</h3>
                  <div class="pt-2">
                    {{ userInfo.phone }}
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col md="6" sm="6">
            <v-card class="mt-4">
              <v-card-text class="d-flex">
                <v-avatar size="60">
                  <v-img :src="userInfo.avatar" alt="用户头像" />
                </v-avatar>
                <div>
                  <h3 class="mb-1">{{ userInfo.name }}</h3>
                  <div class="pt-2">
                    {{ userInfo.phone }}
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-card class="mt-4">
          <v-card-text class="d-flex">
            <v-avatar size="60">
              <v-img :src="userInfo.avatar" alt="用户头像" />
            </v-avatar>
            <div>
              <h3 class="mb-1">{{ userInfo.name }}</h3>
              <div class="pt-2">
                {{ userInfo.phone }}
              </div>
            </div>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- 右侧主要内容区域 -->
      <v-col cols="5" md="5" sm="5">
        <!-- 国访趋势图 -->
        <v-card title="回访趋势">
          <v-card-text style="height: 258px;">
            <div ref="trendChart" style="height: 240px;"></div>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col cols="3" md="3" sm="3">
        <v-card title="服务应用">
          <v-card-text style="height: 258px;">
            <v-card-text class="d-flex  pt-8">
              <v-avatar size="60">
                <v-img :src="userInfo.avatar" alt="用户头像" />
              </v-avatar>
              <div>
                <h3 class="mb-1">{{ userInfo.name }}</h3>
                <div class="pt-2">
                  {{ userInfo.phone }}
                </div>
              </div>
            </v-card-text>
            <v-card-text class="d-flex pt-8">
              <v-avatar size="60">
                <v-img :src="userInfo.avatar" alt="用户头像" />
              </v-avatar>
              <div>
                <h3 class="mb-1">{{ userInfo.name }}</h3>
                <div class="pt-2">
                  {{ userInfo.phone }}
                </div>
              </div>
            </v-card-text>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" md="6" sm="6">
        <v-card class="mb-4">
          <v-card-title>评价包服务事项排序</v-card-title>
          <v-card-text>
            <v-data-table :headers="serviceHeaders" :items="serviceRanking" :items-per-page="5" hide-default-footer
              density="compact">
              <template v-slot:item.rank="{ item }">
                <v-chip :color="getRankColor(item.rank)" size="small">
                  {{ item.rank }}
                </v-chip>
              </template>
              <template v-slot:item.score="{ item }">
                <v-rating :model-value="item.score" color="yellow-darken-3" density="compact" readonly size="small" />
                <span class="ml-2">{{ item.score }}</span>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6" sm="6">
        <v-card class="mb-4">
      <v-card-title>评价包服务事项排序</v-card-title>
      <v-card-text>
        <v-data-table :headers="serviceHeaders" :items="packageServiceRanking" :items-per-page="5" hide-default-footer
          density="compact">
          <template v-slot:item.rank="{ item }">
            <v-chip :color="getRankColor(item.rank)" size="small">
              {{ item.rank }}
            </v-chip>
          </template>
          <template v-slot:item.score="{ item }">
            <v-rating :model-value="item.score" color="yellow-darken-3" density="compact" readonly size="small" />
            <span class="ml-2">{{ item.score }}</span>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>
      </v-col>
    </v-row>
    <!-- 评价包服务事项排序 -->

    <!-- 地区排名 -->
    <v-row>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>评价最高的地区</v-card-title>
          <v-card-text>
            <v-data-table :headers="regionHeaders" :items="topRegions" :items-per-page="5" hide-default-footer
              density="compact">
              <template v-slot:item.rank="{ item }">
                <v-chip :color="getRankColor(item.rank)" size="small">
                  {{ item.rank }}
                </v-chip>
              </template>
              <template v-slot:item.avgScore="{ item }">
                <v-rating :model-value="item.avgScore" color="yellow-darken-3" density="compact" readonly
                  size="small" />
                <span class="ml-2">{{ item.avgScore }}</span>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>评价最低的地区</v-card-title>
          <v-card-text>
            <v-data-table :headers="regionHeaders" :items="bottomRegions" :items-per-page="5" hide-default-footer
              density="compact">
              <template v-slot:item.rank="{ item }">
                <v-chip :color="getRankColor(item.rank)" size="small">
                  {{ item.rank }}
                </v-chip>
              </template>
              <template v-slot:item.avgScore="{ item }">
                <v-rating :model-value="item.avgScore" color="yellow-darken-3" density="compact" readonly
                  size="small" />
                <span class="ml-2">{{ item.avgScore }}</span>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

  </v-container>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'
import { getDashboardData } from '@/api/dashboard'

const { proxy } = getCurrentInstance()

// 数据引用
const userInfo = ref({})
const statistics = ref({})
const evaluationStats = ref({})
const trendData = ref({})
const serviceRanking = ref([])
const packageServiceRanking = ref([])
const topRegions = ref([])
const bottomRegions = ref([])

// 图表引用
const trendChart = ref(null)
let chartInstance = null

// 表格列定义
const serviceHeaders = [
  { title: '排名', key: 'rank', sortable: false, width: '80px' },
  { title: '服务名称', key: 'name', sortable: false },
  { title: '访问量', key: 'visits', sortable: false },
  { title: '评价数', key: 'evaluations', sortable: false },
  { title: '评分', key: 'score', sortable: false }
]

const regionHeaders = [
  { title: '排名', key: 'rank', sortable: false, width: '80px' },
  { title: '地区', key: 'region', sortable: false },
  { title: '访问量', key: 'visits', sortable: false },
  { title: '评价数', key: 'evaluations', sortable: false },
  { title: '平均评分', key: 'avgScore', sortable: false }
]

// 获取排名颜色
const getRankColor = (rank) => {
  switch (rank) {
    case 1:
      return 'error'
    case 2:
      return 'warning'
    case 3:
      return 'success'
    default:
      return 'grey'
  }
}

// 初始化趋势图
const initTrendChart = () => {
  if (!trendChart.value) return

  chartInstance = echarts.init(trendChart.value)

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['2024年', '2025年']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: trendData.value.months || []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '2024年',
        type: 'line',
        data: trendData.value.data2024 || [],
        smooth: true,
        itemStyle: {
          color: '#1976D2'
        }
      },
      {
        name: '2025年',
        type: 'line',
        data: trendData.value.data2025 || [],
        smooth: true,
        itemStyle: {
          color: '#4CAF50'
        }
      }
    ]
  }

  chartInstance.setOption(option)
}

// 加载数据
const loadData = async () => {
  try {
    const response = await getDashboardData()
    if (response.meta.success) {
      userInfo.value = response.data.userInfo
      statistics.value = response.data.statistics
      evaluationStats.value = response.data.evaluationStats
      trendData.value = response.data.trendData
      serviceRanking.value = response.data.serviceRanking
      packageServiceRanking.value = response.data.packageServiceRanking
      topRegions.value = response.data.topRegions
      bottomRegions.value = response.data.bottomRegions

      // 数据加载完成后初始化图表
      setTimeout(() => {
        initTrendChart()
      }, 100)
    }
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()

  // 监听窗口大小变化，重新调整图表
  window.addEventListener('resize', () => {
    if (chartInstance) {
      chartInstance.resize()
    }
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px 20px 20px 88px;
  
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #1976D2;
}

.evaluation-score {
  font-size: 48px;
  font-weight: bold;
  color: #FF9800;
  margin-bottom: 10px;
}
</style>