<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import { guid } from "@/utils/util";

import { reactive, toRefs, onMounted, watch, nextTick } from "vue";

export default {
  name: "shishijiangyu",
  props: {
    //刷新标志
    refresh: {
      type: [String, Number],
      default: 1,
    },
    //数据
    data: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
      xData: [],
      yData1: [],
      yData2: [],
    });

    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };
    const init = () => {
      state.xData = props.data.listName;
      state.yData1 = props.data.diduan;
      state.yData2 = props.data.zhengzhi;

      let chartDom = echarts.init(document.getElementById(state.id));
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "#000000",
          borderColor: "#00D2FF",
          textStyle: { fontSize: 14, fontWeight: 500, color: "#00D2FF" },
        },
        grid: {
          top: "22%",
          left: "10%",
          right: "8%",
          bottom: "0%",
          containLabel: true,
        },
        legend: {
          show: true,
          textStyle: {
            color: "#E8F7FF",
          },
          itemHeight: 3,
          itemWidth: 10,
          icon: "rect",
        },
        xAxis: {
          type: "category",
          data: state.xData,

          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#ffffffFF",
            fontSize: 11,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "单位:立方米/秒",
            alignTicks: true,
            min: 0,
            nameTextStyle: {
              color: "#16d0dcFF",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
                color: "rgba(14, 107, 165, 1)",
              },
            },
            axisLabel: {
              color: "#1cf5fcFF",
            },
          },
          // {
          //   show: false,
          //   type: 'value',
          //   // name: '整治长度(km)',
          //   alignTicks: true,
          //   min: 0,
          //   position: 'right',
          //   nameTextStyle: {
          //     color: '#52d183FF',
          //   },
          //   splitLine: {
          //     show: true,
          //     lineStyle: {
          //       type: 'dotted',
          //       color: 'rgba(14, 107, 165, 1)',
          //     },
          //   },
          //   axisLabel: {
          //     color: 'rgb(44 252 100 / 98%)',
          //   },
          // },
        ],
        series: [
          {
            name: "警戒流量",
            // data: props.data.rainlist,
            data: state.yData1,
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                color: "#1cf5fcFF",
                // color: new proxy.echarts.graphic.LinearGradient(
                //   0,
                //   1,
                //   0,
                //   0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                //   [
                //     { offset: 1, color: '#1cf5fcFF' },
                //     { offset: 0, color: 'rgba(11, 167, 124, 0.3)' },
                //   ]
                // ),
              },
            },
          },
          {
            name: "当前流量",
            // data: props.data.rainlist,
            data: state.yData2,
            // yAxisIndex: 1,
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                color: "#ad9760FF",
                // color: new proxy.echarts.graphic.LinearGradient(
                //   0,
                //   1,
                //   0,
                //   0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                //   [
                //     { offset: 1, color: 'rgb(44 252 100 / 98%)' },
                //     { offset: 0, color: 'rgb(44 252 100 / 21%)' },
                //   ]
                // ),
              },
            },
          },
        ],
      };

      option && chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    watch(
      () => props.refresh,
      (newVal, oldVal) => {
        console.log(props, "props");
        //先销毁实例
        // myChart.value && myChart.value.dispose();
        init();
      }
    );

    onMounted(() => {
      nextTick(() => {
        init();
      });
      window.addEventListener("resize", resizeTheChart);
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      init,
    };
  },
};
</script>

<style></style>