<template>
  <el-dialog
    :title="'猪只耳标：' + eartag"
    :visible.sync="visible"
    :fullscreen="true"
    @close="close">
    <div style="height: 90vh">
      <div id="line1" style="height: 20%;"></div>
      <div id="line2" style="height: 20%; margin-top: 30px"></div>
      <div id="line3" style="height: 20%; margin-top: 30px"></div>
      <div id="line4" style="height: 20%; margin-top: 30px"></div>
    </div>
  </el-dialog>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      visible: false,
      eartag: '',
      data: null,
      load: null
    }
  },
  props: ['time'],
  methods: {
    drawChart() {
      const id = document.getElementById('line1');
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(id);
      const myChart1 = this.$echarts.init(document.getElementById('line2'));
      const myChart2 = this.$echarts.init(document.getElementById('line3'));
      const myChart3 = this.$echarts.init(document.getElementById('line4'));
      let options; let options1; let options2; let options3
      // 温度
      if (this.data.temp.length > 0) {
        options = {
          title: {
            text: '温度',
            // subtext: `设备ID：${that.subData.sbid},  耳标ID：${that.subData.eartagId},  序列号：${that.subData.serial}`,
            subtextStyle: {
              color: '#000',
            },
            left: 'center',
          },
          legend: {
            data: ['耳标温度', '环境温度'],
            x: '20%',
            y: 'top',
          },
          tooltip: {
            trigger: 'axis',
            // formatter: '{b} <br/>{a0}: {c0}℃',
            // position(pt) {
            //   return [pt[0], '10%'];
            // },
          },
          dataZoom: [{
            type: 'inside',
            start: 80,
            end: 100,
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          }],
          grid: {
            left: '2%',
            right: '4%',
            bottom: '21%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.time,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            min(value) {
              return value.min;
            },
            axisLabel: {
              formatter(value) {
                return value.toFixed(2);
              },
            },
          },
          series: [
            {
              name: '耳标温度',
              type: 'line',
              smooth: true,
              // symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#7ED3F4', // 改变折线点的颜色
                },
              },
              data: this.data.temp,
            },
            {
              name: '环境温度',
              type: 'line',
              smooth: true,
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#FF7070', // 改变折线点的颜色
                },
              },
              data: this.data.environmenttemp,
            },
          ],
        };
      } else {
        options = {
          title: {
            text: '温度 - 暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#000000',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          series: [
            {
              name: '湿度',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#275F82', // 改变折线点的颜色
                  lineStyle: {
                    color: 'rgb(146 200 175)', // 改变折线颜色
                  },
                },
              },
              data: [],
            },
          ],
        };
      }
      // 耳标电量
      if (this.data.electric.length > 0) {
        options1 = {
          title: {
            text: '耳标电量',
            // subtext: `设备ID：${this.subData.sbid},  耳标ID：${that.subData.eartagId},  序列号：${that.subData.serial}`,
            subtextStyle: {
              color: '#000',
            },
            left: 'center',
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b} <br/>{a0}: {c0}%',
            position(pt) {
              return [pt[0], '10%'];
            },
          },
          dataZoom: [{
            type: 'inside',
            start: 90,
            end: 100,
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          }],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '21%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.time,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            min(value) {
              return value.min;
            },
          },
          series: [
            {
              name: '电量',
              type: 'line',
              smooth: true,
              // symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#275F82', // 改变折线点的颜色
                },
              },
              data: this.data.electric,
            },
          ],
        };
      } else {
        options1 = {
          title: {
            text: '耳标电量 - 暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#000000',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          series: [
            {
              name: '湿度',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#275F82', // 改变折线点的颜色
                  lineStyle: {
                    color: 'rgb(146 200 175)', // 改变折线颜色
                  },
                },
              },
              data: [],
            },
          ],
        };
      }
      // 运动量
      if (this.data.sports.length > 0) {
        // 运动量
        options2 = {
          title: {
            text: '运动量',
            // subtext: `设备ID：${that.subData.sbid},  耳标ID：${that.subData.eartagId},  序列号：${that.subData.serial}`,
            subtextStyle: {
              color: '#000',
            },
            left: 'center',
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b} <br/>{a0}: {c0}次',
            position(pt) {
              return [pt[0], '10%'];
            },
          },
          dataZoom: [{
            type: 'inside',
            start: 90,
            end: 100,
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          }],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '21%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.time,

          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            min(value) {
              return value.min;
            },
          },
          series: [
            {
              name: '运动量',
              type: 'line',
              smooth: true,
              // symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#275F82', // 改变折线点的颜色
                },
              },
              data: this.data.sports,
            },
          ],
        };
      } else {
        options2 = {
          title: {
            text: '运动量 - 暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#000000',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          series: [
            {
              name: '湿度',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#275F82', // 改变折线点的颜色
                  lineStyle: {
                    color: 'rgb(146 200 175)', // 改变折线颜色
                  },
                },
              },
              data: [],
            },
          ],
        };
      }
      // 睡眠
      if (this.data.sleeptime.length > 0) {
        options3 = {
          title: {
            text: '睡眠',
            // subtext: `设备ID：${that.subData.sbid},  耳标ID：${that.subData.eartagId},  序列号：${that.subData.serial}`,
            subtextStyle: {
              color: '#000',
            },
            left: 'center',
          },
          // legend: {
          //   data: ['耳标温度', '环境温度'],
          //   x: '20%',
          //   y: 'top',
          // },
          tooltip: {
            trigger: 'axis',
            // formatter: '{b} <br/>{a0}: {c0}℃',
            // position(pt) {
            //   return [pt[0], '10%'];
            // },
          },
          dataZoom: [{
            type: 'inside',
            start: 80,
            end: 100,
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          }],
          grid: {
            left: '2%',
            right: '4%',
            bottom: '21%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.time,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            min(value) {
              return value.min;
            },
            axisLabel: {
              formatter(value) {
                return value.toFixed(2);
              },
            },
          },
          series: [
            {
              name: '是否睡眠',
              type: 'line',
              smooth: true,
              // symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#7ED3F4', // 改变折线点的颜色
                },
              },
              data: this.data.sleeptime,
            },
            // {
            //   name: '环境温度',
            //   type: 'line',
            //   smooth: true,
            //   sampling: 'average',
            //   itemStyle: {
            //     normal: {
            //       color: '#FF7070', // 改变折线点的颜色
            //     },
            //   },
            //   data: this.data.environmenttemp,
            // },
          ],
        };
      } else {
        options3 = {
          title: {
            text: '睡眠 - 暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#000000',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000', // 更改坐标轴文字颜色
              },
            },
          },
          series: [
            {
              name: '湿度',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#275F82', // 改变折线点的颜色
                  lineStyle: {
                    color: 'rgb(146 200 175)', // 改变折线颜色
                  },
                },
              },
              data: [],
            },
          ],
        };
      }

      myChart.setOption(options);
      myChart1.setOption(options1);
      myChart2.setOption(options2);
      myChart3.setOption(options3);
    },
    init (eartag) {
      console.log(this.time);
      this.visible = true
      this.load = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.eartag = eartag
      this.$http({
        url: this.$http.adornUrl('/management/eartagdata/searchDateByCondition'),
        method: 'get',
        params: this.$http.adornParams({
          'eartag': this.eartag,
          'startTime': this.time[0],
          'endTime': this.time[1]
        }, false)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.data = data.page
          this.drawChart()
          console.log(this.data);
          this.load.close()
        } else {
          this.data = {
            temp: [],
            electric: [],
            sports: [],
            sleeptime: []
          }
          this.drawChart()
        }
      })
    },
    // 点击关闭图标
    close () {
      this.visible = false
      if (this.load) {
        this.load.close()
      }
    }
  },
}
</script>
<style scoped>

</style>
