<template>
  <div @click="openSteamBalance">
    <div id="bottomRightChart" style="width:100%;height:3.4rem;top: -40px"></div>
    <el-dialog  :close-on-click-modal="false" class="my-info-dialog" :visible.sync="openChart" title="天然气平衡" @open="open" width="1600px" destroy-on-close append-to-body>
      <div id="bottomRightChartDialog" style="width:100%;height:600px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  props:['weekData', 'dashboardelecdata', 'latest24HourData'],
  data() {
    return {
      chart: null,
      openChart: false,
    };
  },
  mounted() {
    this.draw();
    this.charTimg();
  },
  mixins: [echartMixins],
  methods: {
    charTimg() {
      setInterval(() => {
        this.draw();
      }, 6000);
    },
    openSteamBalance(){
      this.openChart = true
    },
    open(){
      this.$nextTick(() => {
        this.drawDialog()
      })
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById("bottomRightChart"));
      //  ----------------------------------------------------------------
      // // 数据
      // let dateBase = new Date();
      // let year = dateBase.getFullYear();
      // let dottedBase = +dateBase + 1000 * 3600 * 24;
      // let weekCategory = [];
      //
      // let maxData = 12000;
      // let weekMaxData = [];
      // let weekLineData = [];
      //
      // // 周数据
      // for (let i = 0; i < 7; i++) {
      //   // 日期
      //   var date = new Date((dottedBase -= 1000 * 3600 * 24));
      //   weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
      //
      //   // 折线图数据
      //   weekMaxData.push(maxData);
      //   var distance = Math.round(Math.random() * 11000 + 500);
      //   weekLineData.push(distance);
      // }
      // const dateNum = [];
      // for (let i = 0; i < this.weekData.length; i++) {
      //   dateNum[i] = this.weekData[i].evconsume;
      // }

      // // 颜色设置
      // let color = {
      //   linearYtoG: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 1,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "#f5b44d"
      //       },
      //       {
      //         offset: 1,
      //         color: "#28f8de"
      //       }
      //     ]
      //   },
      //   linearGtoB: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 0,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "#43dfa2"
      //       },
      //       {
      //         offset: 1,
      //         color: "#28f8de"
      //       }
      //     ]
      //   },
      //   linearBtoG: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 0,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "#1c98e8"
      //       },
      //       {
      //         offset: 1,
      //         color: "#28f8de"
      //       }
      //     ]
      //   },
      //   areaBtoG: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 0,
      //     y2: 1,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "rgba(35,184,210,.2)"
      //       },
      //       {
      //         offset: 1,
      //         color: "rgba(35,184,210,0)"
      //       }
      //     ]
      //   }
      // };
      // let option = {
      //   tooltip: {
      //     trigger: "item"
      //   },
      //   grid: {
      //     left: 90,
      //     right: 80,
      //     bottom: 40,
      //     top: "30%"
      //   },
      //   xAxis: {
      //     type: "category",
      //     position: "bottom",
      //     axisLine: true,
      //     axisLabel: {
      //       color: "rgba(255,255,255,.8)",
      //       fontSize: 12
      //     },
      //     data: weekCategory
      //   },
      //   // 下方Y轴
      //   yAxis: {
      //     name: "消耗",
      //     nameLocation: "end",
      //     nameGap: 24,
      //     nameTextStyle: {
      //       color: "rgba(255,255,255,.5)",
      //       fontSize: 14
      //     },
      //     max: maxData,
      //     splitNumber: 4,
      //
      //     axisLine: {
      //       lineStyle: {
      //         opacity: 0
      //       }
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         color: "#fff",
      //         opacity: 0.1
      //       }
      //     },
      //     axisLabel: {
      //       color: "rgba(255,255,255,.8)",
      //       fontSize: 12
      //     }
      //   },
      //   series: [
      //     {
      //       name: "",
      //       type: "line",
      //       smooth: true,
      //       symbol: "emptyCircle",
      //       symbolSize: 8,
      //       itemStyle: {
      //         normal: {
      //           color: "#fff"
      //         }
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: "rgba(248,211,81,.7)",
      //           width: 3
      //         }
      //       },
      //       areaStyle: {
      //         normal: {
      //           color: color.areaBtoG
      //         }
      //       },
      //       data: weekLineData,
      //       lineSmooth: true,
      //       markLine: {
      //         silent: true,
      //         data: [
      //           {
      //             type: "average",
      //             name: "平均值"
      //           }
      //         ],
      //         precision: 0,
      //         label: {
      //           normal: {
      //             formatter: "平均值: \n {c}"
      //           }
      //         },
      //         lineStyle: {
      //           normal: {
      //             color: "rgba(248,211,81,.7)"
      //           }
      //         }
      //       },
      //       tooltip: {
      //         position: "top",
      //         formatter: "{c} m",
      //         backgroundColor: "rgba(28,152,232,.2)",
      //         padding: 6
      //       }
      //     },
      //     {
      //       name: "占位背景",
      //       type: "bar",
      //       itemStyle: {
      //         normal: {
      //           show: true,
      //           color: "#000",
      //           opacity: 0
      //         }
      //       },
      //       silent: true,
      //       barWidth: "50%",
      //       data: weekMaxData,
      //       animation: false
      //     }
      //   ]
      // };

      const hourArray = [];
      const gasArray = [];
      let latestDate = null;
      let data = this.latest24HourData;
      for (let i = 0; i < data.length; i++) {
        // if (i == 0) {
        //   latestDate = data[i].pullDate.toString().substr(5, 5);
        // } else if (latestDate == data[i].pullDate.toString().substr(5, 5)) {
        //   let dateString = data[i].pullDate.toString().substr(
        //     data[i].pullDate.toString().indexOf("T") + 1,
        //     data[i].pullDate.toString().indexOf(".000") - data[i].pullDate.toString().indexOf("T") - 4);
        //   hourArray.push(dateString);
        //   gasArray.push(data[i].gasUsed);
        // }
        let pullDate = new Date(data[i].pullDate);
        hourArray.push(pullDate.getHours() + ":00");
        gasArray.push(data[i].gasUsed);
      }
      hourArray.reverse();
      gasArray.reverse();

      const gasPlan = this.dashboardelecdata.gasPlan;

      let option = {
        tooltip: {
          trigger: "item"
        },
          grid: {
          left: 90,
          right: 80,
          bottom: 40,
          top: "30%"
          },
          xAxis: {
            type: "category",
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "#ffffff",
              fontSize: 12
            },
            data: hourArray
            // data: weekCategory
          },
        yAxis: {
          type: 'value',
          name: 'Unit:(Nm³)',
          axisLabel: {
            color: '#ffffff'
          },
          nameTextStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            data: gasArray,
            // data:dateNum,
            type: 'line',
            smooth: true,
            symbolSize: 15,
            color:"#28f8de",
            lineStyle: {
              width: 6
            },
            markLine: {
              silent: true,
              data: [
                {
                  type: "average",
                  name: "额定值",
                  yAxis: gasPlan
                }
              ],
              precision: 0,
              label: {
                normal: {
                  formatter: "额定值: \n {c}"
                }
              },
              lineStyle: {
                normal: {
                  width: 3,
                  color: "rgba(248,211,81,.7)"
                }
              }
            },
          }
        ]

      };

      this.chart.setOption(option);
    },
    drawDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.echarts.init(document.getElementById("bottomRightChartDialog"));
      //  ----------------------------------------------------------------
      // 数据
      // let dateBase = new Date();
      // let year = dateBase.getFullYear();
      // let dottedBase = +dateBase + 1000 * 3600 * 24;
      // let weekCategory = [];
      //
      // let maxData = 12000;
      // let weekMaxData = [];
      // let weekLineData = [];
      //
      // // 周数据
      // for (let i = 0; i < 7; i++) {
      //   // 日期
      //   var date = new Date((dottedBase -= 1000 * 3600 * 24));
      //   weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
      //
      //   // 折线图数据
      //   weekMaxData.push(maxData);
      //   var distance = Math.round(Math.random() * 11000 + 500);
      //   weekLineData.push(distance);
      // }
      // const dateNum = [];
      // for (let i = 0; i < this.weekData.length; i++) {
      //   dateNum[i] = this.weekData[i].evconsume;
      // }

      const hourArray = [];
      const gasArray = [];
      let latestDate = null;
      let data = this.latest24HourData;
      for (let i = 0; i < data.length; i++) {
        // if (i == 0) {
        //   latestDate = data[i].pullDate.toString().substr(5, 5);
        // } else if (latestDate == data[i].pullDate.toString().substr(5, 5)) {
        //   hourArray.push(data[i].pullDate.toString().substr(14, 5));
        //   gasArray.push(data[i].gasUsed);
        // }
        let pullDate = new Date(data[i].pullDate);
        hourArray.push(pullDate.getHours() + ":00");
        gasArray.push(data[i].gasUsed);
      }
      hourArray.reverse();
      gasArray.reverse();

      const gasPlan = this.dashboardelecdata.gasPlan;

      let option = {
        tooltip: {
          trigger: "item"
        },
        grid: {
          left: 90,
          right: 80,
        },
        xAxis: {
          data: hourArray
          // data: weekCategory
        },
        yAxis: {
          type: 'value',
          name: 'Unit:(Nm³)'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: gasArray,
            // data:dateNum,
            type: 'line',
            smooth: true,
            symbolSize: 15,
            color:"#1f9f90",
            lineStyle: {
              width: 6
            },
            markLine: {
              silent: true,
              data: [
                {
                  type: "average",
                  name: "额定值",
                  yAxis: gasPlan
                }
              ],
              precision: 0,
              label: {
                normal: {
                  formatter: "额定值: \n {c}"
                }
              },
              lineStyle: {
                normal: {
                  width: 3,
                  color: "rgba(248,211,81,.7)"
                }
              }
            },
          }
        ]

      };

      this.chart1.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};

</script>

<style lang="scss" scoped>
</style>
