<template>
  <div class="test-center">
    <!-- 第一行搜索区域 -->
    <div class="search-section">
      <el-tree-select
          v-model="selectedValue"
          :data="treeData"
          :props="treeProps"
          show-checkbox
          @check="handleCheck"
          style="width: 600px"
      />
    </div>

    <!-- 第二行操作区域 -->
    <div class="operation-section">
      <div class="left-area">
        <el-select v-model="value" placeholder="Select" style="width: 240px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          />
        </el-select>

        <el-tree-select
            v-model="selectedValue"
            :data="treeData"
            :props="treeProps"
            show-checkbox
            @check="handleCheck"
            style="width: 600px"
        />
      </div>
      <div class="right-area">
        <el-button type="primary" disabled>操作1</el-button>
        <el-button type="success" disabled>操作2</el-button>
        <el-button type="warning" disabled>操作3</el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="1000"
        :page-sizes="[10, 20, 50, 100]"
      />
    </div>

    <!-- 图表区域 -->
    <div class="chart-section">
      <ECharts
        :data="salesData"
        :config="chartConfig"
        title="销量对比"
        height="300px"
        :loading="loading"
      />
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import ECharts from '@/components/ECharts/index.vue'
import { useSalesChart } from './composables/useSalesChart'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]



// 树形数据
const treeData = ref([
  {
    id: 1,
    label: '父级1',
    children: [
      { id: 11, label: '子级1-1' },
      { id: 12, label: '子级1-2' },
      {
        id: 13,
        label: '子级1-3',
        children: [
          { id: 131, label: '子子级1-3-1' },
          { id: 132, label: '子子级1-3-2' },
        ],
      },
    ],
  },
  {
    id: 2,
    label: '父级2',
    children: [
      { id: 21, label: '子级2-1' },
      { id: 22, label: '子级2-2' },
    ],
  },
]);



const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]


// 树形选择的配置属性
const treeProps = {
  value: 'id',
  label: 'label',
  children: 'children',
};

// 当前选中的值
const selectedValue = ref(null);

// 处理节点选中事件
const handleCheck = (currentNode, checkedNodes) => {
  // 获取所有选中的节点
  const checked = checkedNodes.checkedNodes;

  // 用于存储最终的叶子节点id
  const finalIds = new Set(); // 使用Set避免重复

  checked.forEach(node => {
    // 判断是否是叶子节点（即没有子节点）
    if (!node.children || node.children.length === 0) {
      finalIds.add(node.id);
    } else {
      // 如果是父级节点，递归获取其下的叶子节点id
      const leafIds = getLeafIds(node, new Set());
      leafIds.forEach(id => finalIds.add(id));
    }
  });

  console.log('最终的叶子节点id列表：', Array.from(finalIds));
};

// 递归获取叶子节点id
const getLeafIds = (node, visited) => {
  const ids = new Set();
  if (node.children) {
    node.children.forEach(child => {
      if (!child.children || child.children.length === 0) {
        // 如果是叶子节点，添加其id
        ids.add(child.id);
      } else {
        // 如果不是叶子节点，继续递归
        if (!visited.has(child.id)) {
          visited.add(child.id);
          const childIds = getLeafIds(child, visited);
          childIds.forEach(id => ids.add(id));
        }
      }
    });
  }
  return ids;
};

// 图表相关
const { salesData, chartConfig, loading } = useSalesChart()

// 2. 用户增长趋势数据
const userGrowthData = ref([
  { month: '2023-04', newUsers: 1500, activeUsers: 12000, retention: 85 },
  { month: '2023-05', newUsers: 1800, activeUsers: 13200, retention: 87 },
  { month: '2023-06', newUsers: 2200, activeUsers: 14800, retention: 88 },
  { month: '2023-07', newUsers: 2100, activeUsers: 15900, retention: 86 },
  { month: '2023-08', newUsers: 2600, activeUsers: 17200, retention: 89 },
  { month: '2023-09', newUsers: 2800, activeUsers: 18900, retention: 90 },
  { month: '2023-10', newUsers: 3100, activeUsers: 21000, retention: 91 },
  { month: '2023-11', newUsers: 3400, activeUsers: 23500, retention: 89 },
  { month: '2023-12', newUsers: 3800, activeUsers: 26000, retention: 92 },
  { month: '2024-01', newUsers: 4200, activeUsers: 29000, retention: 93 },
  { month: '2024-02', newUsers: 4500, activeUsers: 32000, retention: 91 },
  { month: '2024-03', newUsers: 4800, activeUsers: 35000, retention: 92 }
])

// 用户增长趋势配置
const userGrowthConfig = {
  xField: 'month',
  series: [
    {
      name: '新增用户',
      field: 'newUsers',
      type: 'bar',
      color: '#67C23A',
      showLabel: true,
      labelFormatter: '{c}人'
    },
    {
      name: '活跃用户',
      field: 'activeUsers',
      type: 'line',
      color: '#409EFF',
      showLabel: true,
      yAxisIndex: 1,
      labelFormatter: '{c}'
    },
    {
      name: '留存率',
      field: 'retention',
      type: 'line',
      color: '#E6A23C',
      showLabel: true,
      yAxisIndex: 2,
      labelFormatter: '{c}%'
    }
  ],
  yAxis: [
    {
      name: '新增用户',
      min: 0
    },
    {
      name: '活跃用户',
      min: 0,
      position: 'right'
    },
    {
      name: '留存率',
      min: 80,
      max: 100,
      position: 'right',
      offset: 80,
      axisLabel: '{value}%'
    }
  ]
}

// 3. 市场份额数据
const marketShareData = ref([
  { category: '手机', value: 35, lastYear: 32 },
  { category: '电脑', value: 25, lastYear: 28 },
  { category: '平板', value: 20, lastYear: 18 },
  { category: '智能手表', value: 12, lastYear: 10 },
  { category: '耳机', value: 8, lastYear: 12 }
])

// 市场份额配置
const marketShareConfig = {
  series: [
    {
      type: 'pie',
      field: 'value',
      name: '市场份额',
      radius: ['50%', '70%'],
      center: ['50%', '50%'],
      showLabel: true,
      labelFormatter: '{b}: {c}%',
      itemStyle: {
        borderRadius: 6
      }
    }
  ]
}
</script>

<style lang="scss" scoped>
  .test-center {
    padding: 16px;
    background-color: #f5f7fa;
    min-height: 100vh;

    .search-section {
      background-color: #fff;
      padding: 16px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 12px;
    }

    .operation-section {
      background-color: #fff;
      padding: 16px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-area {
        display: flex;
        gap: 12px;
        align-items: center;
      }

      .right-area {
        display: flex;
        gap: 8px;
      }
    }

    .table-section {
      background-color: #fff;
      padding: 12px 16px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 12px;

      :deep(.el-table) {
        // 移除表格的外边框
        --el-table-border: none;
        // 减小表格行的上下padding
        --el-table-row-height: 45px;
      }
    }

    .pagination-section {
      background-color: #fff;
      padding: 12px 16px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: center;
    }

    .chart-section {
      background-color: #fff;
      padding: 16px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }
  }
</style>
