<template>
  <div
    id="derrickChart"
    :style="{
      minHeight: `${minSize.height}px`,
      minWidth: `${minSize.width}px`,
      height: '100%',
    }"
  ></div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import config from './config'
import chartOption from './sub/chartOption'
import _ from 'lodash'
import { mapState } from 'vuex'
import { darkColors, lightColors } from './sub/colors'
import warnApi from '@/api/warnApi'

const showGridTipColor = 'transparent'
// -999.25
function pumpCheck (src) {
  if (_.isNumber(src)) {
    return src < -100 ? 0 : src
  } else {
    return '无数据'
  }
}
function negtive (src) {
  if (_.isNumber(src)) {
    return src < 0 ? '--.--' : src
  } else {
    return ''
  }
}
export default {
  name: 'Derrick',
  components: {

  },
  filters: {

  },
  data () {
    return {
      minSize: { width: 500, height: 800 },
      configProps: { mainSize: { width: 500 } },
      myChart: {},
      chartId: 'derrickChart',
      themeColors: lightColors,
      lastRecord: undefined
    }
  },
  mounted () {
    this.$nextTick(function () {
      document.getElementById(this.chartId).style.width = `${this.minSize.width}px`
      this.configProps = config.composeProps(this.minSize, this.themeColors)
      this.myChart = echarts.init(document.getElementById(this.chartId), 'shine')
      this.myChart.setOption(chartOption(this.configProps, showGridTipColor))
      const that = this
      setTimeout(() => {
        that.demoRun(true)
      }, 300)
    })
  },
  created () {
    this.debounceResize = _.debounce(() => {
      const { myChart, chartId, minSize } = this
      let { configProps } = this

      configProps = config.composeProps(minSize, this.themeColors)
      const option = chartOption(configProps, showGridTipColor)
      if (this.lastRecord) {
        const d = this.lastRecord
        // 大钩高度
        option.series[4].data[0].value[0] = d.HKH
        // 钻头位置
        option.series[4].data[0].value[1] = d.BITDEPTH

        // 泵冲1
        option.series[7].data[0].value[0] = pumpCheck(d.PUMP1)
        // 泵冲2
        option.series[7].data[0].value[1] = pumpCheck(d.PUMP2)
        // 泵冲3
        option.series[7].data[0].value[2] = pumpCheck(d.PUMP3)
        // 总池体积
        option.series[7].data[0].value[3] = negtive(d.PITTOTAL)
        // 体积变化量
        option.series[7].data[0].value[4] = negtive(d.ACTPITTOTAL)
        // 立管压力
        option.series[7].data[0].value[5] = negtive(d.SPP)
        // 出口流量
        option.series[7].data[0].value[6] = negtive(d.FLOWOUT)
      }
      myChart.setOption(option, true)
      document.getElementById(chartId).style.width = `${configProps.mainSize.width}px`
      myChart.resize()
    }, 200)
  },
  methods: {
    demoRun (goNext = false) {
      const { myChart, demoRun } = this
      // myChart.showLoading()
      warnApi.queryDerrickNow({ jh: this.jhRecord.JH, ltd: this.jhRecord.ltd + '' })
        .then(res => {
          if (res.result[0].JH !== this.jhRecord.JH) {
            return
          }

          const chartOption = myChart.getOption()
          const d = res.result[0]
          this.lastRecord = d
          // 大钩高度
          chartOption.series[4].data[0].value[0] = d.HKH
          // 钻头位置
          chartOption.series[4].data[0].value[1] = d.BITDEPTH

          // 泵冲1
          chartOption.series[7].data[0].value[0] = pumpCheck(d.PUMP1)
          // 泵冲2
          chartOption.series[7].data[0].value[1] = pumpCheck(d.PUMP2)
          // 泵冲3
          chartOption.series[7].data[0].value[2] = pumpCheck(d.PUMP3)
          // 总池体积
          chartOption.series[7].data[0].value[3] = negtive(d.PITTOTAL)
          // 体积变化量
          chartOption.series[7].data[0].value[4] = negtive(d.ACTPITTOTAL)
          // 立管压力
          chartOption.series[7].data[0].value[5] = negtive(d.SPP)
          // 出口流量
          chartOption.series[7].data[0].value[6] = negtive(d.FLOWOUT)

          myChart.setOption(chartOption)
          if (goNext && d.TIME.split(' ')[0] === moment().format('YYYY-MM-DD')) {
            setTimeout(function () {
              demoRun(true)
            }, this.jhRecord.ltd ? 8000 : 60000)
          }
        }).catch(e => {
          this.$message.info(e.message)
        }).finally(() => {
        })
    },
    resize () {
      this.debounceResize()
    }
  },
  watch: {

  },
  computed: {
    ...mapState({
      warnTheme: state => state.app.warnTheme,
      jhRecord: state => state.topWellChoosen.wellRecord
    })
  },
  watch: {
    warnTheme (val) {
      if (val === 'dark') {
        this.themeColors = darkColors
      } else {
        this.themeColors = lightColors
      }
      this.$nextTick(() => {
        this.debounceResize()
      })
    },
    jhRecord (val) {
      if (this.myChart.getOption) {
        this.demoRun(false)
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
