  <template>
    <div id="chart-container">
      <div id="stats-text-container">
        <div id="stats-text">当月摄像头离线频次统计</div>
      </div>
      <div id="secharts"></div>
      <div id="floating-container">
        <div id="dropdowns">
          <select v-model="selectedYear" @change="getDataByDay">
            <option v-for="year in yearOptions" :value="year">{{ year }}</option>
          </select>
          <select v-model="selectedMonth" @change="getDataByDay">
            <option v-for="month in monthOptions" :value="month">{{ month }}</option>
          </select>
        </div>
      </div>
    </div>
  </template>

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

    export default {
      data() {
        return {
          myChart: null,
          nameList: [],
          dataList: [],
          selectedYear: new Date().getFullYear().toString(),
          selectedMonth: ("0" + (new Date().getMonth() + 1)).slice(-2),
          yearOptions: [],
          monthOptions: [],
        };
      },
      methods: {
        drawECharts(nameList, dataList) {
          this.myChart.setOption({
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              axisLabel: {
                interval: 0,
                rotate: 40
            },
              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}-${this.selectedMonth}`;
          daylist(selectedDate).then((data) => {
            this.dataList = data.datas;
            this.nameList = data.names;
            this.drawECharts(this.nameList, this.dataList);
          });
        },
        populateYearOptions() {
          const currentYear = new Date().getFullYear();
          for (let i = currentYear; i > currentYear - 3; i--) {
            this.yearOptions.push(i.toString());
          }
        },
        populateMonthOptions() {
          for (let i = 1; i <= 12; i++) {
            this.monthOptions.push(("0" + i).slice(-2));
          }
        },
      },
      mounted() {
        this.myChart = echarts.init(document.getElementById('secharts'));
        this.populateYearOptions();
        this.populateMonthOptions();
        this.getDataByDay(); // 获取当前年份数据并绘制折线图
        this.myChart.on('click', (params) => {
          // 获取点击的数据点的时间
          const clickedYear =  params.name;
          const startTime = `${clickedYear}`; // 拼接起始时间
          const endTime = `${clickedYear}`; // 拼接结束时间
          this.$router.push({
            path: '/centerMonitor/camera',
            query: {
              startTime,
              endTime
            }
          });
        });
      },
    };
  </script>

  <style>
    #chart-container {
      position: relative;
    }

    #stats-text-container {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, -30%);
      text-align: center;
      width: 100%;
    }

    #stats-text {
      font-weight: bold;
      font-size: 26px;
    }

    #secharts {
      width: 100%;
      height: 350px;
    }
    #dropdown-container {
      position: absolute;
      top: 0;
      right: 0;
      margin: 10px;
    }
    #dropdowns select {
      font-size: 12px;
      padding: 5px;
    }
    #dropdowns {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
    #chart-container {
      position: relative;
    }

    #floating-container {
      position: absolute;
      top: 0;
      right: 0;
      margin: 10px;
      z-index: 1;
    }
  </style>
