<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="24">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(card, index) in statisticsCards" :key="index">
        <el-card class="stat-card" :class="card.class" shadow="hover">
          <div class="card-top">
            <div class="card-meta">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
            </div>
            <div class="card-icon">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
          </div>
          <!-- <div class="card-footer">
            <span>较昨日</span>
            <span :class="card.trend > 0 ? 'up' : 'down'">
              {{ card.trend > 0 ? '+' : '' }}{{ card.trend }}%
              <el-icon v-if="card.trend > 0"><arrow-up /></el-icon>
              <el-icon v-else><arrow-down /></el-icon>
            </span>
          </div>
          <div class="progress-bar">
            <div class="progress-inner" :style="{width: card.progress + '%', background: card.progressColor}"></div>
          </div> -->
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表部分 -->
    <!-- <el-row :gutter="24" class="chart-row">
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card class="chart-card" shadow="hover">
          <div class="chart-header">
            <div class="chart-title">
              <h3>销售趋势</h3>
              <p>本期销售数据分析与预测</p>
            </div>
            <div class="chart-actions">
              <el-radio-group v-model="salesRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
              <el-dropdown class="chart-more">
                <el-button size="small" text>
                  <el-icon><more-filled /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-icon><download /></el-icon> 导出数据
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-icon><refresh /></el-icon> 刷新
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-icon><setting /></el-icon> 配置
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="chart-overview">
            <div class="overview-item">
              <span class="label">总销售额</span>
              <span class="value">¥ 893,204</span>
              <span class="rate up">+21.5%</span>
            </div>
            <div class="overview-item">
              <span class="label">平均订单额</span>
              <span class="value">¥ 5,618</span>
              <span class="rate up">+6.8%</span>
            </div>
            <div class="overview-item">
              <span class="label">转化周期</span>
              <span class="value">24天</span>
              <span class="rate down">-2.3%</span>
            </div>
          </div>
          <div class="chart-container" ref="salesChartRef"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="chart-card" shadow="hover">
          <div class="chart-header">
            <div class="chart-title">
              <h3>客户构成</h3>
              <p>客户群体分布情况</p>
            </div>
            <el-dropdown class="chart-more">
              <el-button size="small" text>
                <el-icon><more-filled /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-icon><download /></el-icon> 导出数据
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-icon><refresh /></el-icon> 刷新
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="customer-legend">
            <div v-for="(item, index) in customerData" :key="index" class="legend-item">
              <span class="legend-color" :style="{background: item.color}"></span>
              <span class="legend-label">{{ item.name }}</span>
              <span class="legend-value">{{ item.percentage }}%</span>
            </div>
          </div>
          <div class="chart-container" ref="customerChartRef"></div>
        </el-card>
      </el-col>
    </el-row> -->

    <!-- 数据列表区域 -->
    <el-row :gutter="24" class="list-row">
      <!-- 最近用户 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="list-card" shadow="hover" v-loading="listLoading">
          <div class="card-header-custom">
            <div class="header-left">
              <el-icon class="header-icon user-icon"><User /></el-icon>
              <h3>最近用户</h3>
            </div>
            <el-link type="primary" :underline="false" class="view-all" @click="goToUserList">
              查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
            </el-link>
          </div>
          <div class="list-content">
            <div v-if="recentUsers.length === 0" class="empty-tip">暂无数据</div>
            <div v-for="item in recentUsers" :key="item.id" class="list-item" @click="goToUserDetail(item.id)">
              <div class="item-main">
                <div class="item-title">{{ item.name }}</div>
                <div class="item-sub">{{ item.email }}</div>
              </div>
              <div class="item-extra">
                <div class="item-id">ID: {{ item.id }}</div>
                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 最近订单 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="list-card" shadow="hover" v-loading="listLoading">
          <div class="card-header-custom">
            <div class="header-left">
              <el-icon class="header-icon order-icon"><ShoppingCart /></el-icon>
              <h3>最近订单</h3>
            </div>
            <el-link type="primary" :underline="false" class="view-all" @click="goToOrderList">
              查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
            </el-link>
          </div>
          <div class="list-content">
            <div v-if="recentOrders.length === 0" class="empty-tip">暂无数据</div>
            <div v-for="item in recentOrders" :key="item.id" class="list-item" @click="showOrderDetail(item)">
              <div class="item-main">
                <div class="item-title">{{ item.name }}</div>
                <div class="item-sub">用户ID: {{ item.userId }}</div>
              </div>
              <div class="item-extra">
                <el-tag :type="getOrderStatusType(item.state)" size="small">
                  {{ getOrderStatusText(item.state) }}
                </el-tag>
                <div class="item-price">¥{{ (item.price / 100).toFixed(2) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 最近工单 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="list-card" shadow="hover" v-loading="listLoading">
          <div class="card-header-custom">
            <div class="header-left">
              <el-icon class="header-icon ticket-icon"><Tickets /></el-icon>
              <h3>最近工单</h3>
            </div>
            <el-link type="primary" :underline="false" class="view-all" @click="goToTicketList">
              查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
            </el-link>
          </div>
          <div class="list-content">
            <div v-if="recentTickets.length === 0" class="empty-tip">暂无数据</div>
            <div v-for="item in recentTickets" :key="item.id" class="list-item" @click="goToTicketDetail(item.id)">
              <div class="item-main">
                <div class="item-title">{{ item.title || '工单 #' + item.id }}</div>
                <div class="item-sub">用户ID: {{ item.userId }}</div>
              </div>
              <div class="item-extra">
                <el-tag :type="getTicketStatusType(item.status)" size="small">
                  {{ getTicketStatusText(item.status) }}
                </el-tag>
                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单详情弹窗 -->
    <el-dialog
      v-model="orderDetailVisible"
      title="订单详情"
      width="600px"
      append-to-body
      class="order-detail-dialog"
    >
      <el-descriptions :column="2" border v-if="currentOrder">
        <el-descriptions-item label="订单ID">{{ currentOrder.id }}</el-descriptions-item>
        <el-descriptions-item label="订单名称">{{ currentOrder.name }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ currentOrder.userId }}</el-descriptions-item>
        <el-descriptions-item label="商品ID">{{ currentOrder.commodityId }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">
          <span class="detail-price">¥{{ (currentOrder.price / 100).toFixed(2) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="续费价格">
          <span class="detail-renew-price">¥{{ (currentOrder.renewPrice / 100).toFixed(2) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="数量">{{ currentOrder.payNum }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getOrderStatusType(currentOrder.state)">
            {{ getOrderStatusText(currentOrder.state) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ currentOrder.payType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(currentOrder.createdAt) }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="orderDetailVisible = false">关闭</el-button>
          <el-button type="primary" @click="goToOrderList">查看全部订单</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 最近活动和待办事项 -->
    <!-- <el-row :gutter="24" class="activity-row">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card class="activity-card" shadow="hover">
          <div class="card-header-custom">
            <div class="header-left">
              <h3>最近活动</h3>
              <el-badge :value="activities.length" class="badge" type="primary" />
            </div>
            <el-link type="primary" :underline="false" class="view-all">
              查看全部 <el-icon class="el-icon--right"><right /></el-icon>
            </el-link>
          </div>
          <div class="timeline-container">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.timestamp"
                :type="activity.type"
                :hollow="index !== 0"
                :size="index === 0 ? 'large' : 'normal'"
              >
                <div class="timeline-content">
                  <div class="timeline-title">{{ activity.content }}</div>
                  <div class="timeline-detail" v-if="activity.detail">{{ activity.detail }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card class="todo-card" shadow="hover">
          <div class="card-header-custom">
            <div class="header-left">
              <h3>待办事项</h3>
              <el-tag type="danger" size="small" effect="dark" class="task-tag">{{ todoList.length }} 任务</el-tag>
            </div>
            <el-button type="primary" size="small" plain class="add-btn">
              <el-icon><plus /></el-icon> 添加
            </el-button>
          </div>
          <div class="todo-filter">
            <el-radio-group v-model="todoFilter" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="today">今日</el-radio-button>
              <el-radio-button label="important">重要</el-radio-button>
            </el-radio-group>
            <el-dropdown>
              <el-button size="small" text>
                <el-icon><filter /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>按优先级排序</el-dropdown-item>
                  <el-dropdown-item>按截止日期排序</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="todo-list">
            <div v-for="(todo, index) in todoList" :key="index" class="todo-item">
              <div class="todo-check">
                <el-checkbox size="large" />
              </div>
              <div class="todo-content">
                <div class="todo-title">{{ todo.title }}</div>
                <div class="todo-info">
                  <el-tag :type="getPriorityType(todo.priority)" size="small" effect="plain">
                    {{ todo.priority }}
                  </el-tag>
                  <span class="todo-date">
                    <el-icon><calendar /></el-icon> {{ todo.deadline }}
                  </span>
                </div>
              </div>
              <div class="todo-actions">
                <el-button type="primary" link size="small" circle>
                  <el-icon><check /></el-icon>
                </el-button>
                <el-button type="danger" link size="small" circle>
                  <el-icon><delete /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User, ShoppingCart, Money, DataAnalysis, 
  MoreFilled, ArrowUp, ArrowDown, Right,
  Download, Refresh, Check, Delete, Plus,
  Setting, Calendar, Filter, Tickets, View
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import Qrcode from '@/components/Qrcode.vue'
import {useUserStore} from "@/store/userStore.js";
import { getUserList } from '@/api/admin/user'
import { getOrderList } from '@/api/admin/order'
import { getTicketCount, getTickerList } from '@/api/ticket'

const userStore = useUserStore()
const router = useRouter()

// 统计数据
const userCount = ref(0)
const orderCount = ref(0)
const ticketCount = ref(0)

// 列表数据
const recentUsers = ref([])
const recentOrders = ref([])
const recentTickets = ref([])
const listLoading = ref(false)

// 数据统计卡片
const statisticsCards = computed(() => [
  { 
    title: '用户量', 
    value: userCount.value.toLocaleString(), 
    icon: 'User', 
    trend: 12.5, 
    class: 'visitors',
    progress: 78,
    progressColor: 'rgba(24, 144, 255, 0.8)'
  },
  { 
    title: '订单量', 
    value: orderCount.value.toLocaleString(), 
    icon: 'ShoppingCart', 
    trend: 5.2, 
    class: 'orders',
    progress: 65,
    progressColor: 'rgba(82, 196, 26, 0.8)'
  },
  { 
    title: '工单量', 
    value: ticketCount.value.toLocaleString(), 
    icon: 'Tickets', 
    trend: -2.3, 
    class: 'sales',
    progress: 52,
    progressColor: 'rgba(250, 173, 20, 0.8)'
  },
  { 
    title: '转化率', 
    value: '32.8%', 
    icon: 'DataAnalysis', 
    trend: 4.6, 
    class: 'conversion',
    progress: 83,
    progressColor: 'rgba(114, 46, 209, 0.8)'
  }
])

// 获取统计数据
const fetchStatistics = async () => {
  try {
    // 获取用户数量
    const userRes = await getUserList({ page: 1, count: 10, key: '' })
    console.log("用户数量，",userRes)
    if (userRes.data?.code === 200) {
      userCount.value = userRes.data.data.all_count || 0
    }
    
    // 获取订单数量
    const orderRes = await getOrderList({ page: 1, count: 10 })
    console.log("订单数量，",orderRes)
    if (orderRes.data?.code === 200) {
      orderCount.value = orderRes.data.data.all_count || 0
    }
    
    // 获取工单数量
    const ticketRes = await getTicketCount()
    console.log("工单数量，",ticketRes)
    if (ticketRes.code === 200) {
      ticketCount.value = ticketRes.data?.all_count  || 0
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 获取最近列表数据
const fetchRecentLists = async () => {
  listLoading.value = true
  try {
    // 获取最近用户
    const userRes = await getUserList({ page: 1, count: 10, key: '' })
    if (userRes.data?.code === 200) {
      recentUsers.value = (userRes.data.data.data || []).map(user => ({
        id: user.user_id,
        name: user.user_name,
        email: user.email || '未设置',
        phone: user.phone || '未设置',
        createdAt: user.created_at
      }))
    }
    
    // 获取最近订单
    const orderRes = await getOrderList({ page: 1, count: 10 })
    if (orderRes.data?.code === 200) {
      recentOrders.value = (orderRes.data.data.list || []).map(order => ({
        id: order.id,
        name: order.name,
        userId: order.userId,
        commodityId: order.commodityId,
        price: order.price,
        renewPrice: order.renewPrice || 0,
        payNum: order.payNum || 1,
        state: order.state,
        payType: order.payType,
        createdAt: order.CreatedAt
      }))
    }
    
    // 获取最近工单
    const ticketRes = await getTickerList(5, 1)
    console.log("最近工单，",ticketRes)
    if (ticketRes.code === 200) {
      recentTickets.value = (ticketRes.data.data?.list || ticketRes.data.data || []).map(ticket => ({
        id: ticket.work_id || ticket.id,
        title: ticket.title,
        status: ticket.status,
        userId: ticket.user?.userId,
        createdAt: ticket.created_at || ticket.CreatedAt
      }))
    }
  } catch (error) {
    console.error('获取列表数据失败:', error)
  } finally {
    listLoading.value = false
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取订单状态
const getOrderStatusText = (state) => {
  const statusMap = { 0: '待支付', 1: '已支付', 2: '已失效' }
  return statusMap[state] || '未知'
}

const getOrderStatusType = (state) => {
  const typeMap = { 0: 'warning', 1: 'success', 2: 'info' }
  return typeMap[state] || 'info'
}

// 获取工单状态
const getTicketStatusText = (status) => {
  const statusMap = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已解决' }
  return statusMap[status] || '未知'
}

const getTicketStatusType = (status) => {
  const typeMap = { 0: 'danger', 1: 'warning', 2: 'primary', 3: 'success' }
  return typeMap[status] || 'info'
}

// 跳转到详情页
const goToUserDetail = (userId) => {
  router.push({ path: '/user/detail', query: { user_id: userId } })
}

const goToUserList = () => {
  router.push('/user/list')
}

const goToOrderList = () => {
  router.push('/order/list')
}

const goToTicketList = () => {
  router.push('/ticket/list')
}

const goToTicketDetail = (ticketId) => {
  router.push({ path: '/ticket/detail', query: { work_id: ticketId } })
}

// 订单详情弹窗
const orderDetailVisible = ref(false)
const currentOrder = ref(null)

const showOrderDetail = (order) => {
  currentOrder.value = order
  orderDetailVisible.value = true
}

// 客户构成数据
const customerData = ref([
  { name: '企业客户', value: 1048, percentage: 33, color: '#1890ff' },
  { name: '个人客户', value: 735, percentage: 23, color: '#52c41a' },
  { name: '政府单位', value: 580, percentage: 18, color: '#fa8c16' },
  { name: '教育机构', value: 484, percentage: 15, color: '#722ed1' },
  { name: '其他', value: 300, percentage: 11, color: '#f759ab' }
])

const salesRange = ref('month')
const todoFilter = ref('all')
const salesChartRef = ref(null)
const customerChartRef = ref(null)
let salesChart = null
let customerChart = null

// 活动数据
const activities = ref([
  { 
    content: '王经理 完成了销售目标', 
    detail: '超额完成15%的销售指标',
    timestamp: '刚刚', 
    type: 'success' 
  },
  { 
    content: '李明 上传了新的销售报告', 
    detail: '包含Q2季度各区域销售数据',
    timestamp: '10分钟前', 
    type: 'primary' 
  },
  { 
    content: '系统更新了安全策略', 
    timestamp: '1小时前', 
    type: 'info' 
  },
  { 
    content: '张经理 分配了新的任务', 
    detail: '关于新产品线的市场调研',
    timestamp: '昨天', 
    type: 'warning' 
  },
  { 
    content: '年度销售会议即将开始', 
    timestamp: '2天前', 
    type: 'danger' 
  }
])

// 待办事项
const todoList = ref([
  { title: '完成季度销售报告', priority: '高', deadline: '2024-06-10' },
  { title: '召开团队周会', priority: '中', deadline: '2024-06-12' },
  { title: '审核营销方案', priority: '高', deadline: '2024-06-14' },
  { title: '客户回访', priority: '低', deadline: '2024-06-18' }
])

// 根据优先级返回标签类型
const getPriorityType = (priority) => {
  switch (priority) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'info'
    default: return 'info'
  }
}

onMounted(() => {
  // 获取统计数据和列表数据
  fetchStatistics()
  fetchRecentLists()
  
  initSalesChart()
  initCustomerChart()
  
  // 窗口大小变化时重新调整图表大小
  window.addEventListener('resize', () => {
    salesChart?.resize()
    customerChart?.resize()
  })
})

// 初始化销售趋势图表
const initSalesChart = () => {
  if (!salesChartRef.value) return
  
  salesChart = echarts.init(salesChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255,255,255,0.9)',
      borderColor: '#e6e9ed',
      borderWidth: 1,
      textStyle: {
        color: '#5e6d82'
      },
      formatter: function(params) {
        let result = params[0].name + '<br/>';
        params.forEach(item => {
          result += `<div style="display:flex;align-items:center;margin:5px 0">
                      <span style="display:inline-block;width:10px;height:10px;background:${item.color};margin-right:5px;border-radius:50%"></span>
                      <span>${item.seriesName}: ${item.value} 元</span>
                    </div>`;
        });
        return result;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: '#e6e9ed'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#5e6d82'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#5e6d82'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f3f8'
        }
      }
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        smooth: true,
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: '#1890ff'
        },
        itemStyle: {
          color: '#1890ff',
          borderWidth: 2,
          borderColor: '#fff'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(24, 144, 255, 0.5)'
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(24, 144, 255, 0.5)' },
            { offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
          ])
        },
        data: [12000, 19000, 15000, 22000, 19000, 28000, 32000]
      }
    ]
  }
  salesChart.setOption(option)
}

// 初始化客户构成图表
const initCustomerChart = () => {
  if (!customerChartRef.value) return
  
  customerChart = echarts.init(customerChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(255,255,255,0.9)',
      borderColor: '#e6e9ed',
      borderWidth: 1,
      textStyle: {
        color: '#5e6d82'
      }
    },
    series: [
      {
        name: '客户构成',
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          focus: 'self',
          scaleSize: 10,
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.2)'
          }
        },
        labelLine: {
          show: false
        },
        data: customerData.value.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color
          }
        }))
      }
    ]
  }
  customerChart.setOption(option)
}

// 监听销售范围变化
watch(salesRange, (newVal) => {
  // 根据选择的时间范围更新图表数据
  if (salesChart) {
    const xAxisData = newVal === 'week' 
      ? ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      : newVal === 'month'
        ? ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
        : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    
    const seriesData = newVal === 'week'
      ? [12000, 19000, 15000, 22000, 19000, 28000, 32000]
      : newVal === 'month'
        ? [32000, 45000, 39000, 52000, 48000, 58000, 62000]
        : [158000, 165000, 180000, 220000, 210000, 252000, 265000, 270000, 285000, 302000, 318000, 350000]
    
    salesChart.setOption({
      xAxis: {
        data: xAxisData
      },
      series: [{
        data: seriesData
      }]
    })
  }
})
</script>

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

/* 统计卡片样式 */
.stat-card {
  margin-bottom: 24px;
  transition: all 0.3s;
  overflow: hidden;
  border-left: 3px solid transparent !important;
}

.stat-card.visitors { border-left-color: #1890ff !important; }
.stat-card.orders { border-left-color: #52c41a !important; }
.stat-card.sales { border-left-color: #faad14 !important; }
.stat-card.conversion { border-left-color: #722ed1 !important; }

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px;
}

.card-meta {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 10px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  font-size: 24px;
  color: #fff;
}

.visitors .card-icon {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.orders .card-icon {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.sales .card-icon {
  background: linear-gradient(135deg, #faad14, #d48806);
}

.conversion .card-icon {
  background: linear-gradient(135deg, #722ed1, #531dab);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 20px 15px;
  font-size: 13px;
  color: #8c8c8c;
}

.up {
  color: #52c41a;
  display: flex;
  align-items: center;
  gap: 2px;
}

.down {
  color: #f5222d;
  display: flex;
  align-items: center;
  gap: 2px;
}

.progress-bar {
  height: 4px;
  background-color: #f0f0f0;
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  transition: width 0.8s ease;
}

/* 图表样式 */
.chart-row {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 24px;
  overflow: hidden;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 0;
}

.chart-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 4px;
}

.chart-title p {
  font-size: 13px;
  color: #8c8c8c;
  margin: 0;
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-more {
  margin-left: 8px;
}

.chart-overview {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  padding: 15px 20px;
  border-bottom: 1px dashed #f0f0f0;
}

.overview-item {
  display: flex;
  flex-direction: column;
}

.overview-item .label {
  font-size: 13px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.overview-item .value {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
}

.overview-item .rate {
  margin-top: 6px;
  font-size: 12px;
}

.chart-container {
  height: 300px;
  padding: 10px;
}

/* 客户构成图表特有样式 */
.customer-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-label {
  font-size: 13px;
  color: #262626;
}

.legend-value {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
}

/* 活动和待办事项 */
.activity-row {
  margin-bottom: 24px;
}

.activity-card, .todo-card {
  height: 100%;
}

.card-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-left h3 {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin: 0;
}

.view-all {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.timeline-container {
  padding: 20px;
  height: 350px;
  overflow-y: auto;
}

.timeline-content {
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 8px;
}

.timeline-title {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
}

.timeline-detail {
  font-size: 13px;
  color: #8c8c8c;
  margin-top: 6px;
}

/* 待办事项特有样式 */
.task-tag {
  margin-left: 10px;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.todo-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.todo-list {
  padding: 10px 20px;
  height: 270px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-check {
  margin-right: 16px;
}

.todo-content {
  flex: 1;
}

.todo-title {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 8px;
}

.todo-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.todo-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #8c8c8c;
}

.todo-actions {
  display: flex;
  gap: 8px;
}

/* 列表卡片样式 */
.list-row {
  margin-bottom: 24px;
}

.list-card {
  margin-bottom: 24px;
  height: 410px;
  display: flex;
  flex-direction: column;
}

.list-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.header-icon {
  font-size: 20px;
  margin-right: 8px;
}

.user-icon {
  color: #1890ff;
}

.order-icon {
  color: #52c41a;
}

.ticket-icon {
  color: #faad14;
}

.list-content {
  padding: 0 20px 20px;
  flex: 1;
  overflow-y: auto;
}

.empty-tip {
  text-align: center;
  color: #909399;
  padding: 60px 0;
  font-size: 14px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:hover {
  background-color: #fafafa;
  margin: 0 -20px;
  padding: 12px 20px;
}

.item-main {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.item-sub {
  font-size: 12px;
  color: #8c8c8c;
}

.item-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 12px;
}

.item-id {
  font-size: 12px;
  color: #8c8c8c;
}

.item-time {
  font-size: 12px;
  color: #8c8c8c;
}

.item-price {
  font-size: 14px;
  font-weight: 600;
  color: #f56c6c;
}

/* 订单详情弹窗样式 */
.order-detail-dialog :deep(.el-descriptions__label) {
  width: 100px;
  font-weight: 500;
  color: #606266;
}

.order-detail-dialog :deep(.el-descriptions__content) {
  color: #2c3e50;
}

.detail-price {
  color: #f56c6c;
  font-weight: 600;
  font-size: 16px;
}

.detail-renew-price {
  color: #409eff;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }
  
  .chart-overview {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .timeline-container,
  .todo-list {
    height: 320px;
  }
  
  .list-card {
    height: auto;
    min-height: 300px;
  }
  
  .list-content {
    min-height: 200px;
    max-height: 1000px;
  }
  
  .order-detail-dialog :deep(.el-dialog) {
    width: 90% !important;
    margin: 5vh auto !important;
  }
  
  .order-detail-dialog :deep(.el-descriptions) {
    --el-descriptions-item-bordered-label-background: #fafafa;
  }
  
  .order-detail-dialog :deep(.el-descriptions__label),
  .order-detail-dialog :deep(.el-descriptions__content) {
    padding: 8px 12px;
    font-size: 13px;
  }
}
</style> 