<template>
  <div class="chat">
    <!-- <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">
      <chartProfile :optionConfig='optionConfig' :lineData='lineData' :othDefault='othDefault'/>
    </div>
    <!-- <chat :optionConfig='optionConfig' :swData='swData' :wid='wid' :heig='heig' :isRR='isRR' :othDefault='othDefault'/> -->
    <!-- <label @click='change'>点击</label> -->
  </div>
</template>
<script>
/**
 * module:调用日期组件+（折线图+剖面图）组件的demo
 * author:lwt
 */
import chartProfile from '../../src/components/chartProfile/chartProfile'
import durtime from '../../src/components/durTime/durTime'
import quick from '../utils/quick'
export default {
  name: 'Myproject',
  props: {
    // dateConfig: Object
    chatConfig: Object
  },
  components: {
    durtime,
    chartProfile
  },
  data () {
    return {
      start: '2018-12-03 12:12', // 默认开始时间
      end: '2019-01-12 09:34', // 默认结束时间
      // width: 550, // 报图的宽
      // height: 420, // 报图的高
      loading: true,
      isRR: false, // true：水库，false：河道
      othDefault: {
        width: 0, // 报图的宽
        height: 0, // 报图的高
        isRR: false, // true：水库，false：河道
        isData: true,
        endData: []
      },
      lineData: [],
      swData: {
        bdgc: { val: 400.6, lineColor: '#000000', txtColor: '#000000', text: '坝顶高程' }, // 坝顶高程
        xxsw: { val: 47, lineColor: '#E62BB1', txtColor: '#E62BB1', text: '汛限水位' }, // 汛限水位
        sw: { val: 235, lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位' }, // 水位
        ssw: { val: 134, lineColor: '#112DE2', txtColor: '#112DE2', text: '死水位' }, // 死水位
        sjsw: { val: 98, lineColor: '#000000', txtColor: '#000000', text: '设计水位' }, // 设计水位
        fshg: { val: 187, lineColor: '#000000', txtColor: '#000000', text: '放水涵管' }, // 放水涵管
        jjsw: { val: 500, lineColor: '#C138B9', txtColor: '#C138B9', text: '警戒水位' },
        bzsw: { val: 157, lineColor: '#EB382A', txtColor: '#EB382A', text: '保证水位' },
        kr: 76.985, // 库容
        zxtm: 'xx' // 最新水位时间
      },
      optionConfig: {
        legend: {
          data: ['水位', '汛限水位', '正常水位']
        },
        xAxis: {
          data: ['周一2', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '水位',
          type: 'line',
          data: [120, 132, 101, 134, null, 230, 210]
        },
        {
          name: '汛限水位',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '正常水位',
          type: 'line',
          data: [150, 232, 201, 154, 190, 330, 410]
        }]
      }
    }
  },
  computed: {
    // dateStart () {
    //   return this.dateConfig.start
    // },
    // dateEnd () {
    //   return this.dateConfig.end
    // }
  },
  created () {
    // console.log('实例初始化完成调用')
    this.getData()
  },
  mounted () {
  },
  beforeDestroy () {
  },
  methods: {
    getData: function () {
      let { dateConfig } = this.chatConfig
      // this.start = dateConfig.start
      // this.end = dateConfig.end
      let tmpar = dateConfig
      // let tmpar = {
      //   start: dateConfig.start,
      //   end: dateConfig.end
      // }
      this.getProp(tmpar)
    },
    getProp: function (tmpar) { // 获取（折线图+剖面图）组件需要的参数
      this.loading = true
      this.start = tmpar.start
      this.end = tmpar.end
      let { chatConfig } = this.$props
      let { dataSourceParams, chatParams, chatDataKey, lineDataKey, lineParams, endData, option } = chatConfig
      let { xDataKey, yDataKey, yAxis } = chatParams
      let othd = {
        width: chatConfig.width,
        height: chatConfig.height,
        isRR: chatConfig.isRR
      }
      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 lineData = quick.datasourByStr(lineDataKey, ret.data) // 剖面图数据源
        that.lineData = lineParams
        let lastData = chatData.length === 0 ? [] : chatData[chatData.length - 1] // 报图数据源中最后（最新）的一条记录
        let swVal
        for (let key2 in endData) {
          if (endData.hasOwnProperty(key2)) {
            if (endData[key2].name === '水位') {
              swVal = quick.templateValue(endData[key2].key, lastData)
            }
            endData[key2].val = quick.templateValue(endData[key2].key, lastData) || ''
          }
        }
        othd.endData = endData
        othd.chatData = chatData
        for (let key1 in lineParams) {
          if (lineParams.hasOwnProperty(key1)) {
            if (lineParams[key1].text === '水位') {
              lineParams[key1].val = swVal
            } else {
              lineParams[key1].val = Number(quick.templateValue(lineParams[key1].key, lineData)) || ''
            }
          }
        }
        let legendData = []
        let seriesData = []
        let xAxisData = []
        let ndd = ['', null, 'null']
        if (chatData.length !== 0) {
          othd.isData = true
          for (let key in yDataKey) {
            if (yDataKey.hasOwnProperty(key)) {
              if (!yDataKey[key].alone) {
                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 = []
                for (let i in all) {
                  if (all.hasOwnProperty(i)) { 
                    let va = quick.templateValue(yDataKey[key].key, all[i])
                    ite.data.push(ndd.indexOf(va) > 0 ? null : Number(va))
                  }
                }
                seriesData.push(ite)
              } else {
                legendData.push(yDataKey[key].name)
                let ite = {}
                let da = quick.templateValue(yDataKey[key].key, quick.datasourByStr(yDataKey[key].source, ret.data))
                ite = yDataKey[key]
                // ite.name = yDataKey[key].name
                // ite.type = yDataKey[key].type
                ite.data = []
                for (let i = 0; i < chatData.length; i++) {
                  ite.data.push(ndd.indexOf(da) > 0 ? null : Number(da))
                }
                seriesData.push(ite)
              }
            }
          }
          for (let key3 in chatData) {
            if (chatData.hasOwnProperty(key3)) { 
               xAxisData.push(quick.templateValue(xDataKey, chatData[key3]))
            }
          }
        } else {
          othd.isData = false
        }
        let opt = {
          legend: { data: legendData },
          xAxis: { data: xAxisData },
          yAxis: yAxis || {},
          series: seriesData,
          option: option
        }
        that.othDefault = othd
        that.optionConfig = opt
        that.loading = false
      }
      ).catch(ret => {})
    },
    secFun: function (da) { // 点击查询的回调
      // console.log(da)
      let { dateConfig } = this.chatConfig
      let tep = quick.deepMerge(dateConfig, da)
      this.getProp(tep)
      // var conf = JSON.parse(JSON.stringify(this.optionConfig))
      // conf['xAxis']['data'] = ['周一7', '周二', '周三', '周四', '周五', '周六', '周日']
      // this.optionConfig = conf
      // this.swData = { 'sw': { val: 335, lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位' } }
    }
  },
  watch: {
    chatConfig: function (val, oldVal) {
      this.getData()
    }
    // dateConfig: function (val, oldVal) {
    //   this.getData()
    // }
  }
}
</script>

<style lang="scss">
  .chat{
    height: 100%;
  }
  .lad{
    height: calc(100% - 48px);
  }
</style>
