<template>
  <div class="process">
    <!-- <tab :initdate='"2019-01-11"' :parkey='parkey' :pars='pars' :dateColor="dateColor"/> -->
    <durtime :startTm='start' :endTm='end' :secFun='secFun'/>
    <div v-loading="loading" loadingText="数据加载中... " class="lad">
      <div :style='{"display": isData ? "" : "none", "overflow": "hidden"}'>
        <div class="inbk lf" :id='proceId' :style='{"width":width + "px", "height":height + "px"}'></div>
      </div>
      <div v-if='!isData' class="conted">
        <img src="~public/lwt-vue-components/default/assets/process/noData.png" />
      </div>
    </div>
    <!-- <chat :optionConfig='optionConfig' :swData='swData' :wid='wid' :heig='heig' :isRR='isRR' :othDefault='othDefault'/> -->
    <!-- <label @click='change'>点击</label> -->
  </div>
</template>
<script>
/**
 * module:请求数据，时间组件+（echarts折线图）
 * author:lwt
 */
import durtime from '../../src/components/durTime/durTime'
import quick from '../utils/quick'
export default {
  name: 'Myproject',
  props: {
    dateConfig: Object,
    chatConfig: Object
  },
  components: {
    durtime
  },
  data () {
    return {
      start: '2018-12-03 12:12', // 默认开始时间
      end: '2019-01-12 09:34', // 默认结束时间
      width: 550, // 报图的宽
      height: 420, // 报图的高
      option: {},
      loading: false,
      isData: true,
      proceId: ''
    }
  },
  computed: {

  },
  created () {
    // console.log('实例初始化完成调用')
    this.proceId = 'process' + Math.random() * 10
    let { dateConfig, chatConfig } = this.$props
    this.width = chatConfig.width
    this.height = chatConfig.height
    this.getProp(dateConfig)
  },
  mounted () {
  },
  beforeDestroy () {
  },
  methods: {
    getProp: function (tmpar) { // 请求报图数据
      this.loading = true
      this.start = tmpar.start
      this.end = tmpar.end
      let { chatConfig } = this.$props
      let { dataSourceParams, chatParams, chatDataKey, option } = chatConfig
      let { xDataKey, yDataKey } = chatParams
      let params = {}
      // let dataSourceParams = chatConfig.dataSourceParams
      // let vals = { time: '[' + tmpar.start + ',' + tmpar.end + ']' }
      for (let key in dataSourceParams) {
        params[key] = quick.templateValue(dataSourceParams[key], tmpar) || ''
      }
      var that = this
      this.$api({ url: chatConfig.chatPath, 'params': params }).then(ret => {
        let chatData = quick.datasourByStr(chatDataKey, ret.data) // 报图数据源
        let legendData = []
        let seriesData = []
        let xAxisData = []
        if (chatData.length !== 0) {
          that.isData = true
          for (let key in yDataKey) {
            if (yDataKey.hasOwnProperty(key)) {
              legendData.push(yDataKey[key].name)
              let ite = {}
              let all = quick.datasourByStr(yDataKey[key].source, ret.data)
              // ite.name = yDataKey[key].name
              // ite.type = yDataKey[key].type
              ite = yDataKey[key]
              ite.data = []
              all.map(v => {
                ite.data.push(Number(quick.templateValue(yDataKey[key].key, v)))
              })
              // for (let i in all) {
              //   ite.data.push(Number(quick.templateValue(yDataKey[key].key, all[i])))
              // }
              seriesData.push(ite)
            }
          }
          for (let key in chatData) {
            xAxisData.push(quick.templateValue(xDataKey, chatData[key]))
          }
        } else {
          that.isData = false
        }
        let opt = {
          legend: { data: legendData },
          xAxis: { data: xAxisData },
          series: seriesData
        }
        that.option = quick.deepMerge(that.option, option)
        that.option = quick.deepMerge(that.option, opt)
        that.loading = false
        // that.othDefault = othd
        // that.optionConfig = option
        that.drawLine()
      }
      ).catch(ret => {})
    },
    drawLine: function () { // 加载报图
      var that = this
      var option = {
        title: { text: '' },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left'
          }
        },
        legend: {
          data: [],
          top: '5'
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '50',
          bottom: '45'
        },
        xAxis: {
          data: [],
          type: 'category',
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: {
            show: true
          }
        },
        yAxis: {
          // min: min,
          // max: max,
          splitLine: {
            show: true
          }
        },
        series: []
      }
      option = Object.assign(option, this.option)
      let max0, min0, max1, min1
      let fix0 = 1, fix1 = 1
      let yA = option.yAxis
      if (yA.length === undefined) {
        fix0 = yA.fix === undefined ? fix0 : yA.fix
      } else {
        for (let m=0; m<yA.length; m++) {
          if (m===0){
            fix0 = yA[m].fix === undefined ? fix0 : yA[m].fix
          } else {
            fix1 = yA[m].fix === undefined ? fix1 : yA[m].fix
          }
        }
      }
      option.series.filter(ite =>{
        if(ite.yAxisIndex === 1) {
          let mx1 = Math.max(...ite.data)
          let mi1 = Math.min(...ite.data)
          if (max1 === undefined) {
            max1 = mx1
          } else {
            max1 = max1 > mx1 ? max1 : mx1
          }
          if (min1 === undefined) {
            min1 = mi1
          } else {
            min1 = min1 < mi1 ? min1 : mi1
          }
        } else{
          let mx0 = Math.max(...ite.data)
          let mi0 = Math.min(...ite.data)
          if (max0 === undefined) {
            max0 = mx0
          } else {
            max0 = max0 > mx0 ? max0 : mx0
          }
          if (min0 === undefined) {
            min0 = mi0
          } else {
            min0 = min0 < mi0 ? min0 : mi0
          }
        }
      })
      if (max0 !== undefined) {
        let dr0 = (max0 - min0) === 0 ? max0 : (max0 - min0)
        let limite0 = dr0 / 6
        let dur0 = dr0 === 0 ? 0 : (1/ Math.pow(10, (fix0+1)))
        limite0 = limite0 < dur0 ? dur0 : limite0
        min0 = (min0 - limite0) < 0 ? 0 : fix0 === 0 ? parseInt(min0 - limite0) : (min0 - limite0).toFixed(fix0)
        max0 = fix0 === 0 ? Math.ceil(max0 + limite0) :(max0 + limite0).toFixed(fix0)
      }
      if (max1 !== undefined) {
        let dr1 = (max1 - min1) === 0 ? max1 : (max1 - min1)
        let limite1 = dr1 / 6
        let dur1 = dr1 === 0 ? 0 : (1/ Math.pow(10, (fix1+1))) 
        limite1 = limite1 < dur1 ? dur1 : limite1
        min1 = (min1 - limite1) < 0 ? 0 : fix1 === 0 ? parseInt(min1 - limite1) :(min1 - limite1).toFixed(fix1)
        max1 = fix1 === 0 ? Math.ceil(max1 + limite1) :(max1 + limite1).toFixed(fix1)
      }
      if (yA.length === undefined) {
        option.yAxis.max = max0
        option.yAxis.min = min0
      } else {
        for (let m=0; m<yA.length; m++) {
          if(m===0){
            option.yAxis[0].max = max0
            option.yAxis[0].min = min0
          }else{
            option.yAxis[1].max = max1
            option.yAxis[1].min = min1
          }
        }
      }
      // option.legend = Object.assign(option.legend, this.$props.optionConfig.legend)
      // option.xAxis = Object.assign(option.xAxis, this.$props.optionConfig.xAxis)
      // option.yAxis = Object.assign(option.yAxis, this.$props.optionConfig.yAxis)
      // option.series = Object.assign(option.series, this.$props.optionConfig.series)
      var myChart = this.$echarts.init(document.getElementById(this.proceId))
      myChart.setOption(option, true)
      myChart.resize({ width: that.width, height: that.height })
    },
    secFun: function (da) { // 点击查询的回调
      // console.log(da)
      this.getProp(da)
    }
  },
  watch: {
    chatConfig: function (val, oldVal) {
      let { chatConfig } = this.$props
      this.width = chatConfig.width
      this.height = chatConfig.height
      this.getProp(this.dateConfig)
    },
    dateConfig: function (val, oldVal) {
      this.getProp(val)
    }
  }
}
</script>

<style lang="scss">
.process{height: 100%;}
.conted{
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lad{
    height: calc(100% - 48px);
  }
</style>
