<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <div class="time-box">
      <p>选择时间：</p>
      <p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>
    </div>
    <div class="eCharts-max-big-box">
      <div class="eCharts-left-box" id="eCharts-one"></div>
      <div class="eCharts-right-box" id="eCharts-two"></div>
    </div>
    <!--时间日历-->
    <div class="time-max-big-box" v-if="timeType!=0">
      <div class="time-big-box">
        <el-calendar class="time-min-box" v-model="timeValue">
        </el-calendar>
        <div class="button-box">
          <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
          <p class="cursor_pointer" @click="clearTimeData">清除</p>
          <p class="cursor_pointer" @click="setTimeData">确定</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { temperatureOrHumidity } from '@/api/userApi'
  export default {
    name: "temperatureAndHumidityMonitoringInformationTwo",//温湿度监控信息(历史监控信息)
    props:["repertory_id"],
    data () {
      return {
        id:"",
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //日历时间
        timeValue: new Date(),
        timeType:0,
        //时间数据
        timeList:[],
        //左侧数据列表
        leftList:[],
        //右侧数据列表
        rightList:[]
      }
    },

    created(){

    },
    mounted() {
      this.id = this.repertory_id
      this.getListData();
    },
    methods: {
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          repertoryId :self.id,
          "params[beginTime]":self.playTime=="请选择时间"?"":self.playTime,
        };
        const { data } = await temperatureOrHumidity(obj);
        if(data.code==200){
          let newTime = [];
          let left = [];
          let Right = [];
          for(let i=0;i<data.data.length;i++){
            let playTime = data.data[i].time1.split(" ");
            playTime = playTime[1].split(":");
            let endTime = data.data[i].time2.split(" ");
            endTime = endTime[1].split(":");
            let time = playTime[0] + '-' + endTime[0];
            newTime.push(time);
            left.push(data.data[i].temperature);
            Right.push(data.data[i].humidity);
          }
          this.timeList = newTime;
          this.leftList = left;
          this.rightList = Right;
          this.eChartsOne();
          this.eChartsTwo();
        }
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
        this.getListData();
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }
        this.timeType = 0;
      },
      // eCharts上图表
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-one'));
        let option = {
          title: {
            text: '温度变化',
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
            top: '8%',
            left: '7%',
          },
          legend: {
            right: "7%",
            top: "8%",
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '8%'
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
          xAxis: {
            name: 'h',
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              interval:0,
              rotate:45
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            data: self.timeList
          },
          yAxis: {
            type: "value",
            name: '°C',
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name:'温度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#fb9a00',
            },
            itemStyle: {
              color: '#fb9a00',
              borderWidth: 1,
              borderColor: '#FFF'
            },
            data: self.leftList
          }]
        };
        myChart.setOption(option);
      },
      // eCharts下图表
      eChartsTwo(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-two'));
        let option = {
          title: {
            text: '湿度变化',
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
            top: '8%',
            left: '7%',
          },
          legend: {
            right: "7%",
            top: "8%",
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '8%'
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
          xAxis: {
            name: 'h',
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              interval:0,
              rotate:45
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            data: self.timeList
          },
          yAxis: {
            type: "value",
            name: 'φ',
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name:'湿度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#03bcea',
            },
            itemStyle: {
              color: '#03bcea',
              borderWidth: 1,
              borderColor: '#FFF'
            },
            data: self.rightList
          }]
        };
        myChart.setOption(option);
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:0 0 20px 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .eCharts-max-big-box
      display flex
      width:1300px;
      margin:50px auto;
      .eCharts-left-box
        height:383px;
        width:598px;
        background:url("~@/assets/images/min_back_07.png") no-repeat;
        background-size: 100% 100%
        margin-right:104px;
      .eCharts-right-box
        height:383px;
        width:598px;
        background:url("~@/assets/images/min_back_07.png") no-repeat;
        background-size: 100% 100%
    .time-box
      width:280px;
      display flex
      margin:0 auto;
      p
        color:$color_ff;
      p:nth-child(1)
        width:100px;
        line-height:30px;
        font-size:$font_14;
      p:nth-child(2)
        width:120px;
        height:30px;
        background url("~@/assets/images/button_08.png")
        background-size 100% 100%
        font-size:$font_12;
        line-height:30px;
      p:nth-child(3)
        width:27px;
        line-height:30px;
      p:nth-child(4)
        width:120px;
        height:30px;
        background url("~@/assets/images/button_08.png")
        background-size 100% 100%
        line-height:30px;
        font-size:$font_12;
    //时间日历
    .time-max-big-box
      z-index 6
      height:100%;
      width:100%;
      position: absolute
      top:0;
      left:0;
      background:rgba(0,0,0,0.3);
      .time-big-box
        z-index 6
        height:750px;
        width:660px;
        position: absolute
        top:50%;
        left:50%;
        transform :translate3d(-50%,-50%,0)
        margin:auto;
        background $color_ff
        border-radius:8px;
        border:4px solid $theme;
        .button-box
          display flex
          color:$color_ff;
          width:390px;
          margin:20px auto;
          p:nth-child(1)
            height:30px;
            line-height:30px;
            width:120px;
            background:url("~@/assets/images/button_10.png");
            background-size 100% 100%
          p:nth-child(2)
            margin-left:20px;
            height:30px;
            line-height:30px;
            width:120px;
            background:url("~@/assets/images/button_05.png");
            background-size 100% 100%
          p:nth-child(3)
            margin-left:20px;
            height:30px;
            line-height:30px;
            width:120px;
            background:url("~@/assets/images/button_02.png");
            background-size 100% 100%
</style>
