<template>
  <div>
    <el-dialog
      title= '结果 ： '
      :close-on-click-modal="false"
      v-if="visible"
      :visible.sync="visible"
      width="75%">
      <div  v-loading="dataListLoading" >
        <div id = 'showResult'></div>
      </div>
      <div style="text-align: center">
        <span style="">{{title  }} :    </span><el-select v-model="selectValue" placeholder="请选择" size="mini">
        <el-option
          v-for="item in tableClo"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入 AutV G2 npm install @antv/g2
import { Chart } from '@antv/g2'

export default {
  name: 'jobResult',
  data () {
    return {
      dataList: [],
      visiDataMap: {},
      tableClo: [],
      visible: true,
      info: null,
      chart: null,
      title: '',
      selectValue: '',
      dataListLoading: false
    }
  },
  watch: {
    selectValue:
    {
      immediate: false, // 初始化时让handler调用一下
      handler (newValue, oldValue) {
        this.dataListLoading = true
        console.log(this.selectValue)
        this.chart.data(this.visiDataMap[this.selectValue])
        this.chart.render()
        this.dataListLoading = false
      }
    }
  },
  methods: {
    init (info) {
      this.visible = true
      this.info = info
      this.title = info.jobName
      this.dataList = []
      this.tableClo = []
      this.visiDataMap = {}
      this.chart = null
      this.getJobRes()
      // console.log(info)
    },
    getJobRes () {
      this.dataListLoading = true
      this.visiDataMap = {}
      var visiData = {}
      this.$http({
        url: this.$http.snoopUrl('/v1/metrics/values'),
        methods: 'get',
        params: this.$http.adornParams({
          'offset': 0,
          'size': 100,
          'metricName': this.info.jobName
        })
      }).then((data) => {
        if (data.data.length && data.status === 200) {
          this.dataList = data.data
          let fristSign = true
          for (const item of this.dataList) {
            let time = this.timeFormater(item.tmst)
            for (let key in item.value) {
              if (fristSign) {
                this.visiDataMap[key] = []
              }
              if (typeof (item.value[key]) !== 'object') {
                visiData = {
                  'time': time,
                  'value': item.value[key].toString()
                }
                this.visiDataMap[key].push(visiData)
              } else {
                for (const i in item.value[key]) {
                  let name, count
                  for (const category in item.value[key][i]) {
                    if (category !== 'count') {
                      name = item.value[key][i][category]
                      count = item.value[key][i].count
                    }
                  }
                  visiData = {
                    'time': time,
                    'name': name,
                    'value': count
                  }

                  this.visiDataMap[key].push(visiData)
                }
              }
            }
            fristSign = false
          }
          this.tableClo = Object.keys(this.dataList[0].value)
          this.selectValue = this.tableClo[0]

          this.charInit(this.visiDataMap[this.selectValue])
          this.dataListLoading = false
          // console.log(this.tableClo)
        } else {
          this.tableClo = []
          this.dataListLoading = false
        }
      })
    },
    timeFormater (value) {
      // console.log('@', value)
      var date = new Date(value)
      // let years = date.getFullYear()
      // let month = (date.getMonth() + 1) > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
      // let day = (date.getDate() >= 10) ? date.getDate() : '0' + date.getDate()
      let hours = (date.getHours() >= 10) ? date.getHours() : '0' + date.getHours()
      let minutes = (date.getMinutes() >= 10) ? date.getMinutes() : '0' + date.getMinutes()
      let seconds = (date.getSeconds() >= 10) ? date.getSeconds() : '0' + date.getSeconds()
      if (value) {
        // return years + '-' + month + '-' + day + '' + hours + ':' + minutes + ':' + seconds
        return hours + ':' + minutes + ':' + seconds
      } else {
        return 'N/A'
      }
    },
    charInit (data) {
      console.log(this.selectValue)
      this.chart = new Chart({
        container: 'showResult',
        autoFit: true,
        height: 500,
        padding: [50, 20, 50, 20]
      })
      // data.forEach(x => {
      //   x['value'] = x['value'] / 100000
      // })
      this.chart.data(data)
      this.chart.scale({
        time: {
          tickCount: 10
        },
        value: {
          nice: true
        }
      })
      this.chart.scale({
        time: {
          tickCount: 10
        },
        value: {
          nice: true,
          tickCount: 10
        }
      })
      this.chart.axis('value', {
        tickLine: null,
        label: {
          autoRotate: false,
          autoHide: false // 取消自动隐藏label
        }
      })
      this.chart.line().position('time*value')

      this.chart.render()
      // this.chart.interval().position('time*value')
    }
  }
}
</script>

<style scoped>

</style>
