<template>
  <div class="home">
    <nav-bar url="/Member"></nav-bar>
    <div>
      <ul>
         <li>
          <div class="chart-title">近7日挂号数</div>
          <div ref="chart3" style="width:100%;height: 350px;"></div>
        </li>
        <li>
          <div class="chart-title">月挂号数</div>
          <div ref="chart4" style="width:100%;height: 350px;"></div>
        </li>
        <li>
          <div class="chart-title">本月挂号的科室比例</div>
          <div ref="chart5" style="width:100%;height: 350px;"></div>
        </li>
           <li>
          <div class="chart-title">近3月门诊缴费月额</div>
          <div ref="chart6" style="width:100%;height: 350px;"></div>
        </li>
        <li>
          <div class="chart-title">近7日登录量</div>
          <div ref="chart" style="width:100%;height: 350px;"></div>
        </li>
        <li>
          <div class="chart-title">月登录量</div>
          <div ref="chart2" style="width:100%;height: 350px;"></div>
        </li>
      </ul>

    </div>
  </div>
</template>


<script>
// @ is an alias to /src
import { GetEchartsOne, GetEchartsTwo, GetEchartsThree,GetEchartsFour,GetEchartsFive,GetEchartsSix } from "@/request/api.js";
// import { Toast } from 'vant';
import * as echarts from 'echarts';

export default {
  data() {
    return {
  // 存储所有ECharts实例，便于统一销毁
      charts: {}
    };
  },
  beforeDestroy() {
    // 在组件销毁前，销毁所有ECharts实例并移除resize监听器
    this.destroyCharts();
  },
  mounted() {
    this.getEchartOne();
    this.getEchartTwo();
    this.getEchartThree();
    this.getEchartFour();
    this.getEchartFive();
    this.getEchartSix();
  },
  methods: {
      // 销毁所有图表实例
    destroyCharts() {
      Object.keys(this.charts).forEach(key => {
        if (this.charts[key]) {
          this.charts[key].dispose(); // 销毁ECharts实例
          this.charts[key] = null;
        }
      });
      this.charts = {};
      
      // 移除所有resize监听器（虽然通常不需要，但为了完整性）
      window.removeEventListener('resize', this.handleResize);
    },
    
    // 通用的resize处理函数
    handleResize() {
      Object.keys(this.charts).forEach(key => {
        if (this.charts[key]) {
          this.charts[key].resize();
        }
      });
    },
    getEchartOne() {
      GetEchartsOne().then(res => {
        // console.log(res.data);

        // 提取日期和登录数量数据
        const dates = res.data.map(item => item.date);
        const counts = res.data.map(item => item.loginCount);

        // 获取DOM元素
        const chartDom = this.$refs.chart;

        // 初始化ECharts实例
        const myChart = echarts.init(chartDom);
 //保存实例到charts对象
        this.charts.chart = myChart;
       

        // 指定图表的配置项和数据
        const option = {
          xAxis: {
            type: 'category',
            data: dates  // 使用从API获取的日期数据
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: counts,  // 使用从API获取的登录数量数据
              type: 'line',
              label: {
                show: true,//显示标签
                position: 'top', //在上方显示
                fontSize: 15,
                formatter: '{c}次'
              }
            }
          ]
        };

        // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 添加resize监听器
        window.addEventListener('resize', this.handleResize);
      });
    },
    getEchartTwo() {
      GetEchartsTwo().then(res => {
        // 假设返回的数据格式为包含月份和登录量的数组
        const months = res.data.map(item => item.date);
        const counts = res.data.map(item => item.loginCount);

        // 获取DOM元素
        const chartDom = this.$refs.chart2;

        // 初始化ECharts实例
        const myChart = echarts.init(chartDom);
 //保存实例到charts对象
        this.charts.chart2 = myChart;

        // 处理数据，为第三个月添加特殊样式
        const processedData = counts.map((value, index) => {
          if (index === 2) { // 第三个月(索引为2)
            return {
              value: value,
              itemStyle: {
                color: '#7ccd7c' // 特殊颜色
              }
            };
          }
          return value;
        });

        // 指定图表的配置项和数据
        const option = {
          xAxis: {
            type: 'category',
            data: months // 使用实际月份数据
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: processedData, // 使用处理后的数据
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                fontSize: 15,
                formatter: '{c}次'
              }
            }
          ]
        };

      // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 添加resize监听器
        window.addEventListener('resize', this.handleResize);
      });
    },
    // 新增获取第三个图表数据的方法
    getEchartThree() {
      // 假设你有一个API来获取挂号数据
      GetEchartsThree().then(res => {
        // 提取日期、挂号数量和费用数据
        const dates = res.data.map(item => item.date);
        const counts = res.data.map(item => item.count);
        const amounts = res.data.map(item => item.amount);

        // 获取DOM元素
        const chartDom = this.$refs.chart3;

        // 初始化ECharts实例
        const myChart = echarts.init(chartDom);
 //保存实例到charts对象
        this.charts.chart3 = myChart;

        // 指定图表的配置项和数据
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              // saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['挂号数量', '挂号总费用']
          },
          xAxis: [
            {
              type: 'category',
              data: dates, // 使用从API获取的日期数据
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '挂号数量',
              min: 0,
              axisLabel: {
                formatter: '{value} 个'
              }
            },
            {
              type: 'value',
              name: '挂号总费用',
              min: 0,
              axisLabel: {
                formatter: '{value} 元'
              }
            }
          ],
          series: [
            {
              name: '挂号数量',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 个';
                }
              },
              data: counts // 使用从API获取的挂号数量数据
            },
            {
              name: '挂号总费用',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 元';
                }
              },
              data: amounts // 使用从API获取的费用数据
            }
          ]
        };

      // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 添加resize监听器
        window.addEventListener('resize', this.handleResize);
      });
    },
    // 新增获取第四个图表数据的方法（月度挂号数据）
    getEchartFour() {
      GetEchartsFour().then(res => {
        // 提取月份、挂号数量和费用数据
        const months = res.data.map(item => item.date);
        const counts = res.data.map(item => item.count);
        const amounts = res.data.map(item => item.amount);

        // 获取DOM元素
        const chartDom = this.$refs.chart4;

        // 初始化ECharts实例
        const myChart = echarts.init(chartDom);
 //保存实例到charts对象
        this.charts.chart4 = myChart;

        // 使用与图表三相同的配置项和数据
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              // saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['挂号数量', '挂号总费用']
          },
          xAxis: [
            {
              type: 'category',
              data: months, // 使用从API获取的月份数据
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '挂号数量',
              min: 0,
              axisLabel: {
                formatter: '{value} 个'
              }
            },
            {
              type: 'value',
              name: '挂号总费用',
              min: 0,
              axisLabel: {
                formatter: '{value} 元'
              }
            }
          ],
          series: [
            {
              name: '挂号数量',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 个';
                }
              },
              data: counts // 使用从API获取的挂号数量数据
            },
            {
              name: '挂号总费用',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 元';
                }
              },
              data: amounts // 使用从API获取的费用数据
            }
          ]
        };

      // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 添加resize监听器
        window.addEventListener('resize', this.handleResize);
      });
    },
    // 新增获取第五个图表数据的方法（科室挂号饼图）
getEchartFive() {
  GetEchartsFive().then(res => {
    // 提取科室名称和挂号数量数据
    const legendData = res.data.map(item => item.ksmc);
    const seriesData = res.data.map(item => ({
      name: item.ksmc,
      value: item.count
    }));

    // 获取DOM元素
    const chartDom = this.$refs.chart5;

    // 初始化ECharts实例
    const myChart = echarts.init(chartDom);
    this.charts.chart5 = myChart;

    // 配置图表选项
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
    type: 'scroll',
    orient: 'horizontal',
    right: 10,
    bottom: 0,
    data: legendData
  },
      series: [
        {
          name: '科室名',
          type: 'pie',
          radius: '45%',
          center: ['50%', '50%'],
          data: seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

   // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 添加resize监听器
        window.addEventListener('resize', this.handleResize);
  });
},
 getEchartSix() {
      GetEchartsSix().then(res => {
        // 假设返回的数据格式为包含月份和支付金额的数组
        const months = res.data.map(item => item.month);
        const amounts = res.data.map(item => item.amount);

        // 获取DOM元素
        const chartDom = this.$refs.chart6;

        // 初始化ECharts实例
        const myChart = echarts.init(chartDom);
 //保存实例到charts对象
        this.charts.chart6 = myChart;

        // 处理数据，为第三个月添加特殊样式
        const processedData = amounts.map((value, index) => {
          if (index === 2) { // 第三个月(索引为2)
            return {
              value: value,
              itemStyle: {
                color: '#7ccd7c' // 特殊颜色
              }
            };
          }
          return value;
        });

        // 指定图表的配置项和数据
        const option = {
          xAxis: {
            type: 'category',
            data: months // 使用实际月份数据
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          series: [
            {
              data: processedData, // 使用处理后的数据
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                fontSize: 15,
                formatter: '{c}元'
              }
            }
          ]
        };

      // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 添加resize监听器
        window.addEventListener('resize', this.handleResize);
      });
    },
  },

};
</script>


<style scoped lang="scss">
.home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.home ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.home li {
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 40px 20px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.home li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 标题样式优化 */
.home li .chart-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 20px;
  font-size: 0.35rem;
  font-weight: 600;
  color: #333;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 标题装饰元素 */
.home li .chart-title::before {
  content: '';
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background-color: #019b98;
}

/* 图表容器样式 */
.home li>div:not(.chart-title) {
  width: 100%;
  height: 350px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* 加载状态动画 */
@keyframes pulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

/* 为图表添加加载状态样式（可配合v-loading使用） */
.home li.loading>div:not(.chart-title) {
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.home li.loading>div:not(.chart-title)::after {
  content: '加载中...';
  animation: pulse 1.5s infinite;
}
</style>