  <template>
    <div id="chart-container">
      <div id="astats-text-container">
        <div id="astats-text">月度摄像头离线频次统计</div>
      </div>
      <div id="monthlychart"></div>
      <div>
        <div id="floating-container">
          <div id="dropdowns">
          <select v-model="selectedYear" @change="selectYear">
          <option v-for="year in yearList" :value="year">{{ year }}</option>
        </select>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>
    import * as echarts from 'echarts';
    import { monthlylist } from "@/api/MonitoringCenter/index";

    export default {
      data() {
        return {
          myChart: null,
          nameList: [],
          dataList: [],
          selectedYear: new Date().getFullYear(),
          yearList: []
        };
      },
      computed: {},
      methods: {
        drawECharts(nameList, dataList) {
          this.myChart.setOption({
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              axisLabel: {},
              type: "category",
              data: nameList,
              axisLine: {
                lineStyle: {
                  color: "rgba(20,28,24,0.98)",
                },
              },
              axisTick: {
                show: false,
              },
            },
            grid: {
              top: "55px",
              left: "30px",
              right: "5px",
              bottom: "30px",
            },
            yAxis: {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "rgba(20,28,24,0.98)",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "#ddd",
                  type: "dashed",
                },
              },
            },
            series: [
              {
                name: "离线摄像头",
                data: dataList,
                type: "line",
                smooth: true,
                lineStyle: {
                  color: "#4098ff",
                },
                itemStyle: {
                  color: "#4098ff",
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(64,152,255,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(64,152,255,0)",
                    },
                  ]),
                },
              },
            ],
          });
          this.myChart.resize();
        },
        getDataByDay() {
          const selectedDate = `${this.selectedYear}-01`;
          monthlylist(selectedDate).then((data) => {
            this.dataList = data.datas;
            this.nameList = data.names;
            this.drawECharts(this.nameList, this.dataList);
          });
        },
        selectYear() {
          this.getDataByDay();
        },
        populateYearList() {
          const currentYear = new Date().getFullYear();
          for (let i = currentYear - 2; i <= currentYear; i++) {
            this.yearList.push(i);
          }
        }
      },
      mounted() {
        this.myChart = echarts.init(document.getElementById('monthlychart'));
        this.populateYearList();
        this.getDataByDay();
        // 监听折线图数据点的点击事件
        this.myChart.on('click', (params) => {
          // 获取点击的数据点的时间
          const clickedYear =  params.name;
          const startTime = `${clickedYear}-01`; // 拼接起始时间
          const endTime = `${clickedYear}-31`; // 拼接结束时间
          this.$router.push({
            path: '/centerMonitor/camera',
            query: {
              startTime,
              endTime
            }
          });
        });
      }
    };
  </script>
  <style>
    #astats-text-container {
      position: absolute;
      top: 1%;
      left: 50%;
      transform: translate(-50%, -30%);
      text-align: center;
      width: 100%;
    }

    #monthlychart {
      width: 100%;
      height: 350px;
    }

    #astats-text {
      font-weight: bold;
      font-size: 26px;
    }
    #floating-container {
      position: absolute;
      top: 0;
      right: 0;
      margin: 20px;
      z-index: 1;
    }
    #dropdowns select {
      font-size: 12px;
      padding: 5px;
    }
    #dropdowns {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  </style>
