<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart id="rightTop" :options="option" class="right_top_inner" v-if="data.pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script setup>
import { currentPOST } from '/@/api/newDeviceVision/modules'
import { graphic } from "echarts"
import { nextTick } from 'process';
import { reactive, onMounted, onBeforeUnmount, ref } from "vue";
import store from '/@/stores/newDeviceVision/modules/setting'

const data = reactive({
  pageflag: false,
  timer: null,
})
const option = ref({})

onMounted(() => {
  getData();
})

onBeforeUnmount(() => {
  clearData();
})

const clearData = () => {
  if (data.timer) {
    clearInterval(data.timer);
    data.timer = null;
  }
}

const getData = () => {
  data.pageflag = true;
  // data.pageflag = false
  currentPOST("big4").then((res) => {
    if (!data.timer) {
      console.log("报警次数", res);
    }
    if (res.success) {
      //this.countUserNumData = res.data;
      nextTick(() => {
        init(res.data.yearMonth, res.data.totalValue),
          switper();
      });
    } else {
      data.pageflag = false;
    }
  });
}

const charts = ref()
//轮询
const switper = () => {
  if (data.timer) {
    return;
  }
  let looper = (a) => {
    getData();
  };
  data.timer = setInterval(
    looper,
    store.state.echartsAutoTime
  );

  // *** 为获取到echart实例，on方法用不了。未解决
  // let myChart = charts.chart;
  // myChart.on("mouseover", (params) => {
  //   clearData();
  // });
  // myChart.on("mouseout", (params) => {
  //   data.timer = setInterval(
  //     looper,
  //     store.state.echartsAutoTime
  //   );
  // });
}



const init = (xData, yData) => {
  option.value = {
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        // show:false,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "28px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        name: "报警次数",
        color: "rgba(252,144,16,.7)",
        areaStyle: {
          //右，下，左，上
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(252,144,16,.7)",
              },
              {
                offset: 1,
                color: "rgba(252,144,16,.0)",
              },],
            false
          ),
        },
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "rect",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "#FC9010",
                backgroundColor: "rgba(252,144,16,0.1)",
                borderRadius: 6,
                padding: [7, 14],
                borderWidth: 0.5,
                borderColor: "rgba(252,144,16,.5)",
                formatter: "报警1：{c}",
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#FC9010",
                shadowColor: "#FC9010",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },],
        },
      },
      /*   {
          data: yData2,
          type: "line",
          smooth: true,
          symbol: "none", //去除点
          name: "报警2次数",
          color: "rgba(9,202,243,.7)",
          areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(9,202,243,.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(9,202,243,.0)",
                  },
                ],
                false
              ),
          },
          markPoint: {
            data: [
              {
                name: "最大值",
                type: "max",
                valueDim: "y",
                symbol: "rect",
                symbolSize: [60, 26],
                symbolOffset: [0, -20],
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                },
                label: {
                  color: "#09CAF3",
                  backgroundColor: "rgba(9,202,243,0.1)",

                  borderRadius: 6,
                  borderColor: "rgba(9,202,243,.5)",
                  padding: [7, 14],
                  formatter: "报警2：{c}",
                  borderWidth: 0.5,
                },
              },
              {
                name: "最大值",
                type: "max",
                valueDim: "y",
                symbol: "circle",
                symbolSize: 6,
                itemStyle: {
                  color: "#09CAF3",
                  shadowColor: "#09CAF3",
                  shadowBlur: 8,
                },
                label: {
                  formatter: "",
                },
              },
            ],
          },
        }, */
    ],
  };
}
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>