<template>
  <div id="chart-temp" style="width: 100%; height: 100%;"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'chartTemp',
  props: {
    // tempList: {
    //   type: Array
    // }
    eartag: {
      type: String
    }
  },
  // watch: {
  //   tempList: {
  //     handler (newVal) {
  //       this.myChart.clear()
  //       this.init()
  //     }
  //   }
  // },
  data () {
    return {
      myChart: null,
      data: null
    }
  },
  methods: {
    init () {
      this.$http({
        url: this.$http.adornUrl('/management/eartagdate/getTemperatureCurve'),
        method: 'get',
        params: this.$http.adornParams({
          ' eartag': this.eartag,
          'startTime': undefined,
          'endTime': undefined
        })
      }).then(({data}) => {
        this.data = data.data
        this.draw()
      })
      // let option = {
      //   backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //     offset: 0,
      //     color: '#c86589'
      //   },
      //   {
      //     offset: 1,
      //     color: '#06a7ff'
      //   }
      //   ], false),
      //   title: {
      //     text: '温度曲线',
      //     left: 'center',
      //     bottom: '5%',
      //     textStyle: {
      //       color: '#fff',
      //       fontSize: 16
      //     }
      //   },
      //   grid: {
      //     top: '20%',
      //     left: '10%',
      //     right: '10%',
      //     bottom: '15%',
      //     containLabel: true
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     axisLabel: {
      //       margin: 30,
      //       color: '#ffffff63'
      //     },
      //     axisLine: {
      //       show: false
      //     },
      //     axisTick: {
      //       show: true,
      //       length: 25,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     data: ['06-12, 06-13, 06-14, 06-15, 06-16']
      //   },
      //   yAxis: [{
      //     type: 'value',
      //     position: 'right',
      //     axisLabel: {
      //       margin: 20,
      //       color: '#ffffff63'
      //     },
      //
      //     axisTick: {
      //       show: true,
      //       length: 15,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     axisLine: {
      //       lineStyle: {
      //         color: '#fff',
      //         width: 2
      //       }
      //     }
      //   }],
      //   series: [{
      //     name: '温度',
      //     type: 'line',
      //     smooth: true, // 是否平滑曲线显示
      //     showAllSymbol: true,
      //     symbol: 'circle',
      //     symbolSize: 6,
      //     lineStyle: {
      //       normal: {
      //         color: '#fff' // 线条颜色
      //       }
      //     },
      //     label: {
      //       show: true,
      //       position: 'top',
      //       textStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     itemStyle: {
      //       color: 'red',
      //       borderColor: '#fff',
      //       borderWidth: 3
      //     },
      //     tooltip: {
      //       show: false
      //     },
      //     areaStyle: {
      //       normal: {
      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //           offset: 0,
      //           color: '#eb64fb'
      //         },
      //         {
      //           offset: 1,
      //           color: '#3fbbff0d'
      //         }
      //         ], false)
      //       }
      //     },
      //     data: [36.5, 37.1, 36.2, 38.2, 39.2]
      //   }]
      // }
      // let option = {
      //   xAxis: {
      //     type: 'category',
      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [{
      //     data: [820, 932, 901, 934, 1290, 1330, 1320],
      //     type: 'line',
      //     smooth: true
      //   }]
      // }
      // this.myChart.setOption(option)
    },
    draw () {
      let options;
      this.myChart = this.$echarts.init(document.getElementById('chart-temp'));
      // 温度
      if (this.data.timeList.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.timeList,
          },
          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.dataList,
            },
            // {
            //   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: [],
            },
          ],
        };
      }
      this.myChart.setOption(options);
    },
  },
  mounted () {
    this.init()
    window.onresize = () => {
      this.myChart.resize()
    }
  }
}
</script>

<style scoped>

</style>
