<template>
  <div id="chartWsd" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "ChartWsd",
  data() {
    return {
      myChart: null
    }
  },
  props: {
    data: {
      type: Object,
      default: function (){
        return {}
      }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if(newVal) {
          this.myChart.clear();
          this.init()
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      let name = this.data.roomName;
      let hum = this.data.humidities;
      let temp = this.data.semperatures;
      let time = [];
      let humList = [];
      let tempList = [];
      temp.forEach((item) => {
        time.push(item.createTime.split(' ')[0]);
        tempList.push(item.value);
      })
      hum.forEach((item) => {
        humList.push(item.value)
      })
      let options = {
        title: {
          text: `${name}温度曲线`,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['温度', '湿度'],
          top: '8%'
        },
        color: ['#5599FE', '#31C3A6'],
        grid: {
          top: '20%',
          left: '10%',
          bottom: '10%',
          right: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: time,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '温度',
            axisLabel: {
              formatter: '{value} °C'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
            splitLine:{
              show:false
            }
          },
          {
            type: 'value',
            name: '湿度',
            axisLabel: {
              formatter: '{value} RH'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
            // splitLine:{
            //   show:false
            // }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            data: tempList
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: humList
          }
        ]
      }
      this.myChart.setOption(options);
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartWsd'));
    this.init();
  }
}
</script>

<style scoped>

</style>
