<template>
  <div class="dashboard-container">
    <!-- 顶部两个图表 -->
    <div class="chart-row">
      <!-- 用户增长数量柱状图 -->
      <div class="chart-card">
        <div class="chart-header">
          <span class="table-header">用户增长数量</span>
          <el-date-picker
            v-model="userDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="font-size: 12px;max-width: 220px;"
          />
        </div>
        <div class="chart-content" ref="userChartRef" style="height: 220px;"></div>
      </div>

      <!-- 收益金额折线图 -->
      <div class="chart-card">
        <div class="chart-header">
          <span class="table-header">收益金额</span>
          <el-date-picker
            v-model="incomeDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="font-size: 12px;max-width: 220px;"
          />
        </div>
        <div class="chart-content" ref="incomeChartRef" style="height: 220px;"></div>
      </div>
    </div>

    <!-- 底部两个表格 -->
    <div class="table-row">
      <!-- 付费收益表格 -->
      <div class="table-card">
        <div class="table-header">付费收益</div>
        <el-table :data="payIncomeList" border style="width: 100%; font-size: 12px;">
          <el-table-column prop="name" label="名称" >
			  <template #default="scope">
				  <div style="display: flex;">
					  <el-image style="width: 60px;height: 60px;border-radius: 50%;"></el-image>
					  <div style="margin-left: 10px;">
						  <div>
							  昵称：{{ scope.row.userName }}
						  </div>
						  <div>
							  ID：{{ scope.row.userId }}
						  </div>
					  </div>
				  </div>
			  </template>
		  </el-table-column>
          <el-table-column prop="orderName" label="订单名称" />
          <el-table-column prop="time" width="160" label="时间" />
          <el-table-column prop="amount" width="100" label="收益金额(元)" />
        </el-table>
      </div>

      <!-- 任务收益表格 -->
      <div class="table-card">
        <div class="table-header">任务收益</div>
        <el-table :data="taskIncomeList" border style="width: 100%; font-size: 12px;">
		  <el-table-column prop="name" label="名称" >
			  <template #default="scope">
				  <div style="display: flex;">
					  <el-image style="width: 60px;height: 60px;border-radius: 50%;"></el-image>
					  <div style="margin-left: 10px;">
						  <div>
							  昵称：{{ scope.row.userName }}
						  </div>
						  <div>
							  ID：{{ scope.row.userId }}
						  </div>
					  </div>
				  </div>
			  </template>
		  </el-table-column>
          <el-table-column prop="type" width="100" label="类型" />
          <el-table-column prop="taskName" label="任务名称" />
          <el-table-column prop="time" width="160" label="时间" />
          <el-table-column prop="amount" width="100" label="收益金额(元)" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { ElDatePicker, ElTable, ElTableColumn } from 'element-plus';

// 日期范围数据
const userDateRange = ref(['2026-01-08', '2026-01-08']);
const incomeDateRange = ref(['2026-01-08', '2026-01-08']);

// 图表容器ref
const userChartRef = ref(null);
const incomeChartRef = ref(null);

// 付费收益表格数据
const payIncomeList = ref([
  {
	userName: '用户名001',
	userId: 'a123456',
    orderName: '购买会员',
    time: '2026.1.22 16:16',
    amount: 99.32
  },
  {
	userName: '用户名001',
	userId: 'a123456',
    orderName: '购买工具-刷新',
    time: '2026.1.22 16:16',
    amount: 99.32
  },
  {
	userName: '用户名001',
	userId: 'a123456',
    orderName: '购买工具-置顶',
    time: '2026.1.22 16:16',
    amount: 99.32
  }
]);

// 任务收益表格数据
const taskIncomeList = ref([
  {
	userName: '用户名001',
	userId: 'a123456',
    type: '悬赏',
    taskName: '拼多多砍一刀...',
    time: '2026.1.22 16:16',
    amount: 1.00
  },
  {
	userName: '用户名001',
	userId: 'a123456',
    type: '提现',
    taskName: '-',
    time: '2026.1.22 16:16',
    amount: 1.20
  }
]);

// 初始化用户增长柱状图
const initUserChart = () => {
  const chart = echarts.init(userChartRef.value);
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号']
    },
    yAxis: { type: 'value', min: 0 },
    series: [
      {
        data: [100, 150, 230, 100, 130, 160, 200],
        type: 'bar',
        itemStyle: { color: '#3370FF' }
      }
    ]
  });
  // 自适应窗口变化
  window.addEventListener('resize', () => chart.resize());
};

// 初始化收益金额折线图
const initIncomeChart = () => {
  const chart = echarts.init(incomeChartRef.value);
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号']
    },
    yAxis: { type: 'value', min: 0 },
    series: [
      {
        data: [0, 230, 100, 130, 150, 170, 200],
        type: 'line',
        itemStyle: { color: '#3370FF' },
        lineStyle: { color: '#3370FF' },
        areaStyle: { color: 'rgba(51, 112, 255, 0.2)' }
      }
    ]
  });
  window.addEventListener('resize', () => chart.resize());
};

// 页面挂载后初始化图表
onMounted(() => {
  initUserChart();
  initIncomeChart();
});
</script>

<style scoped>
.dashboard-container {
  /* padding: 20px; */
  /* background: #F5F7FA; */
  min-height: 100vh;
}

.chart-row, .table-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card, .table-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
}

.table-header {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
  text-align: left;
}
</style>