<template>
  <div class="an-content">
    <div class="snapshotss-center2">
      <div class="snapshotss-cont2-box1 MicrYaHei">
        <span>数据传输情况</span>
        <span :class="data.isExecuted==1?'span1':'span2'">
          能耗
          <img v-if="data.energyErrorFlag==1" src="../../assets/finish.png" alt />
          <img v-else src="../../assets/wrong.png" alt />
        </span>
        <span :class="data.isExecuted==1?'span1':'span2'">
          环境
          <img v-if="data.environmentErrorFlag==1" src="../../assets/finish.png" alt />
          <img v-else src="../../assets/wrong.png" alt />
        </span>
        <span :class="data.isExecuted==1?'span1':'span2'">
          BA
          <img v-if="data.baErrorFalg==1" src="../../assets/finish.png" alt />
          <img v-else src="../../assets/wrong.png" alt />
        </span>
      </div>
      <div class="snapshotss-cont2-box2 MicrYaHei">
        <span>实际冷量</span>
        <span>{{data.nowPlantLoad || 0}} KW</span>
        <span>未来1小时预测冷量</span>
        <span>{{data.predictedLoad1h || 0}} KW</span>
      </div>
    </div>
    <div class="an-bottom">
      <div class="leftL">
        <div class="leftLengend">
          <i class="outIcon"></i> 室外温度
          <i class="innerIcon"></i> 室内平均温度
          <i class="innerMax"></i> 室内最高温度
        </div>
         <div id="leftLine" style="width:100%;height:350px;margin-right:;24px;"></div>
      </div>
      <div class="rightL">
        <div class="rightLengend">
          <i class="reactCool"></i> 实际供冷量
          <i class="preCool"></i> 预测冷量
        </div>
        <div id="rightLine" style="width:100%;height:350px;"></div>
      </div>
    </div>

    <div class="side-r" v-if="data.isExecuted!=0">
      <div v-if="!showDraw" class="float-r" @click="showDraw = true">
        <img src="../../assets/open.png" alt />
        <p>当前策略</p>
      </div>
    </div>

    <bom-box v-if="Object.keys(chillerCommandQ).length>0" :class="['draw', {'open': showDraw}]" :data="chillerCommandQ" @close="showDraw = false"></bom-box>
  </div>
</template>

<script>
import echarts from "echarts";
import bomBox from "./bomBox";
export default {
  data() {
    return {
      showDraw: false,
      dataX: [],
      dataY1: [],
      dataY2: [],
      dataY3: [],
      loadX: [],
      loadY1: [],
      loadY2: [],
      loadY3: []
    };
  },
  components: { bomBox },
  props: ["data", "chillerHourList",'chillerCommandQ'],
  methods: {
    getData() {
      this.chillerHourList.forEach(el => {
        el.value = el.time.slice(0, 2) + ":" + el.time.slice(2, 4);
        this.dataX.push(el.value);
        this.loadX.push(el.value);
        this.dataY1.push(el.tout);
        this.dataY2.push(el.meanTindoor);
        this.dataY3.push(el.maxTindoor);
        console.log(this.dataY3)
        this.loadY1.push(el.nowPlantLoad?(el.nowPlantLoad=='-9999'?0:el.nowPlantLoad):0);
        this.loadY2.push(el.predictedLoadUpLimit?el.predictedLoadUpLimit:0);
        this.loadY3.push(el.redictedLoadDownLimit?el.redictedLoadDownLimit:0);
      });
    },
    drawLeft() {
      var leftLine = echarts.init(document.getElementById("leftLine"));
      let option = {
        tooltip: {
          trigger: "axis"
        },
        title:{
          text:'室内外温度',
          fontSize:'16px',
          color:'#1F2429'
        },
       
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataX
        },
        yAxis: {
          type: "value",
          axisLabel:{formatter:'{value}  ℃'}
        },
        series: [
          {
            name: "室外温度",
            type: "line",
           
            data: this.dataY1,
            color:'#0091FF'
          },
          {
            name: "室内平均温度",
            type: "line",
            
            data: this.dataY2,
            color:'#00D6B9'
          },
          {
            name: "室内最高温度",
            type: "line",
           
            data: this.dataY3,
            color:'#FFBA6B'
          }
        ]
      };
      leftLine.setOption(option);
    },
    drawRight() {
      var rightLine = echarts.init(document.getElementById("rightLine"));
      rightLine.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#ccc",
              borderColor: "#aaa",
              borderWidth: 1,
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: "#222"
            }
          }
          //  formatter: function (params) {
          // //     return params[2].name + '<br />' + params[2].value;
          // }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        title:{
          text:'预测冷量',
          fontSize:'16px',
          color:'#1F2429'
        },
        xAxis: {
          type: "category",
          data: this.loadX
        },
        yAxis: {
          splitNumber: 3,
          splitLine: {
            show: false
          },
          axisLabel:{formatter:'{value}  KW'}
        },
        series: [
          {
            name: "L",
            type: "line",
            data: this.loadY2,
            lineStyle: {
              opacity: 0
            },
            stack: "confidence-band",
            symbol: "none"
          },
          {
            name: "U",
            type: "line",
            data: this.loadY3,
            lineStyle: {
              opacity: 0
            },
            areaStyle: {
              color: "#ccc"
            },
            stack: "confidence-band",
            symbol: "none"
          },
          {
            type: "line",
            data: this.loadY1,
            hoverAnimation: false,
            symbolSize: 6,
            itemStyle: {
              color: "#0091FF"
            },
            showSymbol: false
          }
        ]
      });
    }
  },
  created() {
    this.getData();
  },
  mounted() {
    this.drawLeft();
    this.drawRight();
  }
};
</script>

<style lang='scss' scoped>
.an-content {
  .snapshotss-center2 {
    padding: 20px 0;
    margin-bottom: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    .snapshotss-cont2-box1,
    .snapshotss-cont2-box2 {
      flex: 1;
      height: 80px;
      background: url("../../assets/copy.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding-left: 24px;
    }
    .snapshotss-cont2-box1 {
      margin-right: 12px;
      span:nth-of-type(1) {
        height: 22px;
        font-size: 14px;
        color: rgba(100, 108, 115, 1);
        line-height: 19px;
        margin-right: 20px;
      }
      span:not(:first-child) {
        height: 28px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        font-size: 14px;
        color: rgba(31, 36, 41, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6px 0 12px;
        margin-right: 20px;
        img {
          width: 20px;
          height: 20px;
          margin-left: 8px;
        }
      }
      .span1 {
        border: 1px solid rgba(52, 199, 36, 1);
      }
      .span2 {
        border: 1px solid rgba(245, 78, 69, 1);
      }
    }
    .snapshotss-cont2-box2 {
      span:nth-of-type(1),
      span:nth-of-type(3) {
        height: 22px;
        font-size: 14px;
        color: rgba(100, 108, 115, 1);
        line-height: 19px;
        margin-right: 16px;
      }
      span:nth-of-type(2),
      span:nth-of-type(4) {
        height: 32px;
        font-size: 24px;
        font-family: Persagy;
        color: rgba(31, 36, 41, 1);
        line-height: 29px;
        margin-right: 64px;
      }
      span:nth-of-type(3) {
        margin-right: 16px;
      }
    }
  }
  .side-r {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    display: flex;
    .float-r {
      display: flex;
      align-items: center;
      padding: 60px 40px 60px 10px;
      cursor: pointer;
      img {
        height: 10px;
        margin-right: 10px;
      }
      p {
        width: 0;
      }
      &:hover {
        background: #efefef;
      }
    }
  }
  .draw {
    position: fixed;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    transition: transform 0.3s ease-in-out;
    &.open {
      transform: translate(-100%, -50%);
    }
  }
  .an-bottom {
    margin-top: 45px;
    display: flex;
    .leftL{
      flex:1;
      .leftLengend{
        text-align: center;
        margin-bottom: 10px;
        i{
          display: inline-block;
          width:16px;
          height: 6px;
          border-radius:3px;
          vertical-align: middle;
        }
        .innerIcon{
          background:rgba(0,214,185,1);
          margin: 0 20px;
        }
        .outIcon{
          background:rgba(0,145,255,1);
        }
        .innerMax{
          background:rgba(255,186,107,1);
        }
      }
    }
    .rightL{
      flex:1;
      .rightLengend{
        text-align: center;
        margin-bottom: 10px;
        i{
          display: inline-block;
          width:16px;
          height: 6px;
          border-radius:3px;
          vertical-align: middle;
        }
        .reactCool{
          background:rgba(0,214,185,1);
         
        }
        .preCool{
          background:rgba(0,145,255,1);
          opacity:0.29;
          margin-left:20px;
        }
      }
    }
  }
}
</style>
