<template>
  <basic-container>
    <el-row>
      <el-col span="4" :push="6">选择日期</el-col>
      <el-col span="16" :push="4">
        <el-date-picker size="mini" v-model="datetimeselect" type="datetimerange" :picker-options="pickerOptions"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row>
      <el-col span="4">
        <el-tabs tab-position="right" @tab-click="handleClick" v-model="index">

          <el-tab-pane :key="index" v-for="(item, index) in data" :label="item.tag" :name="index">
          </el-tab-pane>

        </el-tabs>

      </el-col>



      <el-col span="20">
        <div ref="gatechart" style="width:100%;height:500px"></div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
  // import {
  //   getList,
  //   getDetail,
  //   add,
  //   update,
  //   remove,
  //   getRecordByTab
  // } from "../../api/smartapplication/deviceheartbeat.js";
  import {
    mapGetters
  } from "vuex";

  export default {

    props: {
      deviceId: "",
      data: []
    },
    data() {
      return {
        index: 0,
        unDisplayList: ["硬件版本", "软件版本", "终端型号", "厂家名称", "物理小区标识"],
        activeName: "battery",
        datetimeselect: "",
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        loading: true,

        gateOption: {

          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [0],
            type: 'line',
            smooth: true, //曲线平滑
            // itemStyle: {
            //   normal: {
            //     areaStyle: {
            //       type: 'default',
            //       //渐变色实现
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
            //         //三种由深及浅的颜色
            //         [{
            //           offset: 0,
            //           color: '#3ebf94'
            //         }, {
            //           offset: 0.5,
            //           color: '#267298'
            //         }, {
            //           offset: 1,
            //           color: '#14325f'
            //         }]),
            //     },
            //     lineStyle: { //线的颜色
            //       color: '#349e85'
            //     },
            //     //以及在折线图每个日期点顶端显示数字
            //     label: {
            //       show: true,
            //       position: 'top',
            //       textStyle: {
            //         color: 'white'
            //       }
            //     }
            //   },
            // },

            // areaStyle: {},
          }]
        },
      };
    },


    mounted() {
      this.activeName = "battery"
    },
    watch: {
      "index": function(value) {
        this.onLoad(this.index)
      }
    },
    methods: {
      init() {
        this.onLoad(this.index)
      },
      // handleClick(tabs,event){
      //   console.log(tabs.index)
      //   const gatechart = this.$echarts.init(this.$refs.gatechart);
      //   this.gateOption.xAxis.data = this.data[tabs.index].dateTimeList;
      //   this.gateOption.series[0].data = this.data[tabs.index].dataList;
      //   const gateOption = this.gateOption;
      //   gatechart.setOption(gateOption);


      //   window.addEventListener("resize", function() {
      //     gatechart.resize();

      //   });
      //   this.$on('hook:destroyed', () => {
      //     window.removeEventListener("resize", function() {
      //       gatechart.resize();
      //     });
      //   })
      // },
      onLoad(index) {
        if (this.data.length == 0) {
          this.gateOption.xAxis.data = [];
          this.gateOption.series[0].data = [];
          return;
        } else {
          for (var i = 0; i < this.data.length; i++) {
            for (var j = 0; j < this.unDisplayList.length; j++) {
              if (this.data[i].tag == this.unDisplayList[j]) {
                this.data.splice(i, 1);
              }
            }
          }
        }


        let gatechart = this.$echarts.init(this.$refs.gatechart);
        this.gateOption.xAxis.data = this.data[index].dateTimeList;
        this.gateOption.series[0].data = this.data[index].dataList;
        let gateOption = this.gateOption;
        gatechart.setOption(gateOption);


        window.addEventListener("resize", function() {
          gatechart.resize();

        });
        this.$on('hook:destroyed', () => {
          window.removeEventListener("resize", function() {
            gatechart.resize();
          });
        })
      }
    }
  };
</script>

<style>
</style>
