<template>
  <div  style="display: flex;flex-direction: column;">
    <div class="top">
        <div>使用时长</div>
        <div class="timeL">
            <div @click="cut(0)" :class="cutNum ==0 ? 'hov' :''">日</div>
            <div @click="cut(1)" :class="cutNum ==1 ? 'hov' :''">周</div>
            <div @click="cut(2)" :class="cutNum ==2 ? 'hov' :''">月</div>
        </div>
    </div>
    <div ref="chartContainer" v-if="chartData.length" style="width: 100%; flex: 1;"></div>
    <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;" v-else>暂无数据</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props:['alldata'],

  data() {
    return {
        chart: null,
        pageData:[[],[],[]],
        cutNum:0,
        chartData:[],
        categories:[],
        day:[],
        week:[],
        month:[]

    };
  },

  watch:{
        alldata:{
            handler(val) {                
                if (val.length) {
                    this.startCom(val)
                }
            },
            deep:true,
            immediate: true  // 组件创建时立即执行
        }
    },
  // mounted() {
    // this.initChart();
    // window.addEventListener('resize', this.handleResize)
  // },
  methods: {
    startCom(val){
        let data = JSON.parse(JSON.stringify(val))
        // x轴数据
        // this.categories = data[0].map(e=> e.name)

        // data[0].forEach(e => {
        //     e.chlid = []
        // });
        
        // 得出x轴数据
        this.pageData = data


        // // 日
        // this.day = data[1]

        // data[0].forEach(i=>{
        //     // 数据分类
        //     let kol = []
        //     this.day.forEach(e => {
        //         if (e.cclassid && e.cclassid.includes(i.id)) {                    
        //             kol.push(e)
        //         }
        //     })
        //     // log
        //     this.pageData[0].push(this.processBoxplotData(kol))
        // });

        // //周
        // this.week = this.sumMinutesByUser(data[2])
        // data[0].forEach(i=>{
        //     // 数据分类
        //     let kol = []
        //     this.week.forEach(e => {
        //         if (e.cclassid && e.cclassid.includes(i.id)) {                    
        //             kol.push(e)
        //         }
        //     })
        //     this.pageData[1].push(this.processBoxplotData(kol))
        // });

        // // 月
        // this.month = this.sumMinutesByUser(data[3])
        // data[0].forEach(i=>{
        //     // 数据分类
        //     let kol = []
        //     this.month.forEach(e => {
        //         if (e.cclassid && e.cclassid.includes(i.id)) {                    
        //            kol.push(e)
        //         }
        //     })
        //     this.pageData[2].push(this.processBoxplotData(kol))
        // });

        // console.log('this.pageData',this.pageData);
        
        // this.chartData = this.pageData[0]
        this.chartData = data[0]


        this.initChart()
    },
    cut(val){
        // console.log('val',val);
        this.cutNum = val

        if (this.pageData[val]) {
          this.chartData = this.pageData[val];
          
            // 清空图表
            this.chart.clear();
            
            // 使用 nextTick 确保在设置选项之前 DOM 已更新
            this.$nextTick(() => {
                this.updateChart(); // 调用 updateChart 设置新选项
            });
        } else {
            console.error('提供的值无效，未找到对应数据:', val);
        }
    },
    // 把相同的数据加起来
    // sumMinutesByUser(data) {
    //   return Object.values(data.reduce((acc, current) => {
    //     const { userid, minutes } = current;
    //     if (!acc[userid]) {
    //       acc[userid] = { ...current, minutes: 0 }; // 初始化用户对象
    //     }
    //     acc[userid].minutes += minutes; // 累加 minutes
    //     return acc;
    //   }, {}));
    // },
    // 把数据处理成盒须图数据
    // processBoxplotData(data) {
    //     // 检查数组是否为空
    //     if (data.length === 0) return {
    //         min: 0,
    //         q1: 0,
    //         median: 0,
    //         q3: 0,
    //         max: 0
    //     }

    //     // 提取 minutes 值
    //     const minutesArray = data.map(item => item.minutes);

    //     // 计算盒须图需要的统计值
    //     const sortedMinutes = minutesArray.sort((a, b) => a - b);
    //     const q1 = sortedMinutes[Math.floor((sortedMinutes.length / 4))];
    //     const median = sortedMinutes[Math.floor((sortedMinutes.length / 2))];
    //     const q3 = sortedMinutes[Math.floor((sortedMinutes.length * (3 / 4)))];
    //     const min = sortedMinutes[0];
    //     const max = sortedMinutes[sortedMinutes.length - 1];

    //     // 盒须图数据格式化
    //     return {
    //         min: min,
    //         q1: q1,
    //         median: median,
    //         q3: q3,
    //         max: max
    //     };
    // },
    initChart() {
      this.$nextTick(() => {
          this.chart = echarts.init(this.$refs.chartContainer)
          this.updateChart()
      })
    },
    handleResize() {
      this.chart && this.chart.resize();
    },
    updateChart() {
      // const chartData = this.chartData.map(item => [
      //   item.min, item.q1, item.median, item.q3, item.max
      // ]);

      const option = {
        tooltip: {  // 新增tooltip配置
          trigger: 'axis',  // 触发类型为坐标轴
          axisPointer: {    // 坐标轴指示器配置
            type: 'shadow'  // 阴影样式
          },
          formatter: function(params) {  // 自定义提示内容
            return `${params[0].name}<br/>数值: ${params[0].value}分钟`;
          }
        },

        xAxis: {
          data: this.chartData.map(e => e.lab),
          axisLabel: {
            color: '#666',
            formatter: value => `${value}${this.cutNum == 0 ? '日' : this.cutNum == 1 ? '周' :'月'}`
          },
        },
        yAxis: {
           axisLabel: {
            formatter: value => `${value}分钟`,  // 添加“分钟”单位
            color: '#666'
          }
        },
        series: [{
          type: 'bar',
          data: this.chartData.map(e => e.num)
        }]
      };

      this.chart.setOption(option);
      window.addEventListener('resize', this.chart.resize);

    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart && this.chart.dispose()
  },
};
</script>

<style scoped>
/* 这里可以添加样式 */
.top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    box-sizing: border-box;
    align-items: center;
}
.timeL{
   display: flex;justify-content: space-between;gap: 10px;
}
.timeL div{
    height: 25px;
    width: 30px;
    text-align: center;
    line-height: 25px;
    box-sizing: border-box;
    background: #F5F7FA;
    border-radius: 5px;
    cursor: pointer;
}
.hov{
  background: #0358D2 !important;color: #fff;
}
</style>