<template>
  <a-card
    :style="{ width: '100%'}"
    size="small"
  >
  <div slot="title">
    <span>井号:{{wellRecord.JH}}&nbsp;&nbsp; 传输时间:</span><span style="color:red">{{ lastTime }}</span>
  </div>
    <a-spin :spinning="showLoading">
      <a-row :gutter="8">
        <template v-if="wellRecord.ltd == 1">
        <a-col span="12" v-for="item in ltdCards" :key="item.key" style="margin-bottom: 6px" >
          <a-input v-model="item.value" disabled :addonBefore="item.title" :suffix="item.unit"  :class="[item.diff?'inputRed':'inputFix']"/>
        </a-col>
        </template>
        <template v-else>
        <a-col span="12" v-for="item in zjyCards" :key="item.key" style="margin-bottom: 6px" >
          <a-input v-model="item.value" disabled :addonBefore="item.title" :suffix="item.unit"  :class="[item.diff?'inputRed':'inputFix']"/>
        </a-col>
        </template>


<!--        <a-col span="12" v-for="item in ltdCards" :key="item.key" style="margin-bottom: 6px" >-->
<!--          <a-input v-model="item.value" disabled :addonBefore="item.title" :suffix="item.unit"  :class="[item.diff?'inputRed':'inputFix']"/>-->
<!--        </a-col>-->
      </a-row>
    </a-spin>
  </a-card>
</template>

<script>
import warnApi from '@/api/warnApi'
import moment from 'moment'
import { mapState } from 'vuex'
import { EVENT_SET_CUR_DOT, EVENT_SET_RIGHT_tOP_DOT } from '@/WsMgr.js'

export default {
  name: 'ValueCard',
  data () {
    return {
      showLoading: false,
      mid: -1,
      interval: 30*1000,
      canRefresh: true,
      zjyRow: {},
      lastRow: {},
      lastTime: '',
      ltdCards: [
        { title: '井深', key: 'DEPTH', unit: 'm', value: '--.--',diff:false },
        { title: '钻时', key: 'ROPINST', unit: 'min/m', value: '--.--',diff:false },
        { title: '垂直井深', key: 'VDEPTH', unit: 'm', value: '--.--',diff:false },
        { title: '立压', key: 'SPP', unit: 'MPa', value: '--.--',diff:false },
        { title: '钻头位置', key: 'BITDEPTH', unit: 'm', value: '--.--',diff:false },
        { title: '套压', key: 'WHP', unit: 'MPa', value: '--.--',diff:false },
        { title: '大钩负荷', key: 'WOH', unit: 'kN', value: '--.--',diff:false },
        { title: '总烃', key: 'TG', unit: '%', value: '--.--',diff:false },
        { title: '钻压', key: 'WOB', unit: 'kN', value: '--.--',diff:false },
        { title: '泵冲1', key: 'PUMP1', unit: 'spm', value: '--.--',diff:false },
        { title: '转速', key: 'RPM', unit: 'r/min', value: '--.--',diff:false },
        { title: '泵冲2', key: 'PUMP2', unit: 'spm', value: '--.--',diff:false },
        { title: '转盘扭矩', key: 'TORQUE', unit: 'KN.m', value: '--.--',diff:false },
        { title: '泵冲3', key: 'PUMP3', unit: 'spm', value: '--.--' ,diff:false}
      ],
      zjyCards:[
        { title: '入口密度', key: 'RKMD', unit: 'g/cm³', value: '--.--',diff:false },
        { title: '入口流量', key: 'RKLL', unit: '%', value: '--.--',diff:false },
        { title: '出口密度', key: 'CKMD', unit: 'g/cm³', value: '--.--',diff:false },
        { title: '出口流量', key: 'CKLL', unit: '%', value: '--.--' ,diff:false},
        { title: '1#池体积', key: 'CTJ1', unit: 'm³', value: '--.--',diff:false },
        { title: '泵冲1', key: 'PUMP1', unit: 'spm', value: '--.--' ,diff:false},
        { title: '2#池体积', key: 'CTJ2', unit: 'm³', value: '--.--' ,diff:false},
        { title: '泵冲2', key: 'PUMP2', unit: 'spm', value: '--.--' ,diff:false},
        { title: '3#池体积', key: 'CTJ3', unit: 'm³', value: '--.--' ,diff:false},
        { title: '泵冲3', key: 'PUMP3', unit: 'spm', value: '--.--' ,diff:false},
        { title: '4#池体积', key: 'CTJ4', unit: 'm³', value: '--.--' ,diff:false},
        { title: '总池体积', key: 'ZTJ', unit: 'm³', value: '--.--' ,diff:false},
      ]
    }
  },
  created () {
    this.$bus.on(EVENT_SET_RIGHT_tOP_DOT, this.setCurrentDot)
  },
  beforeDestroy(){
    this.$bus.off(EVENT_SET_RIGHT_tOP_DOT, this.setCurrentDot)
  },
  mounted () {
    this.$nextTick(() => {
      // this.refreshNewest(this.mid)
    })
  },
  computed: {
    ...mapState({
      wellRecord: state => state.topWellChoosen.wellRecord
    })
  },
  methods: {
    refreshNewest (seqId) {
      if(this.wellRecord){
        const that = this
        function doNext () {
          that.showLoading = false
          that.mid++
          setTimeout(() => {
            that.refreshNewest(that.mid)
          }, that.interval)
        }
        if (seqId === this.mid&&this.wellRecord.JH) {
          this.showLoading = true
          let jh=this.wellRecord.JH
          let ltd=this.wellRecord.ltd
          let jwss='N'
          if(process.env.VUE_APP_JWSS === 'TRUE'){
            jwss='Y'
          }
          // rule time > last And day is last.day
          warnApi.queryLastRow({
            jh: this.wellRecord.JH,
            ltd: this.wellRecord.ltd == 1 ? '1' : '0',
            jwss:jwss
          }).then((ajax) => {
            console.log(ajax)
            const res = ajax.result.data
            const total = res.length
            if (total > 0) {
              this.lastRow = res[total - 1]
              if(this.wellRecord.JH==jh&&ltd==this.wellRecord.ltd){
                 if(ltd==1){
                    this.ltdCards.forEach(p => {
                      let itemKey=''
                      if(jwss=='Y'){
                        itemKey=p.key.toLowerCase()
                      }else{
                        itemKey=p.key
                      }
                      let resNum=Number(this.lastRow[itemKey]).toFixed(2)+''
                      if(p.value!=resNum){
                        if(p.value!='--.--'){
                          p.diff=true
                        }else{
                          p.diff=false
                        }
                        if(Number(this.lastRow[itemKey])>=0){
                          p.value = resNum
                        }
                      }else{
                        p.diff=false
                      }
                    })
                 }else{
                    this.zjyCards.forEach(p => {
                      let resNum=Number(this.lastRow[p.key]).toFixed(2)+''
                      if(p.value!=resNum){
                        if(p.value!='--.--'){
                          p.diff=true
                        }else{
                          p.diff=false
                        }
                        if(Number(this.lastRow[p.key])>=0){
                          p.value = resNum
                        }
                      }else{
                        p.diff=false
                      }
                    })
                 }

              }
            }
            if(this.lastRow.TIME.length>20){
              this.lastRow.TIME=this.lastRow.TIME.substring(0,19)
            }
            if (moment().format('YYYY-MM-DD') === this.lastRow.TIME.split(' ')[0]) {
              doNext()
            }
          }).catch(e => {
            that.showLoading = false
            //this.$message.error('获取最新数据时出错')
            doNext()
          }).finally(() => {
            that.showLoading = false
          })
        }
      }
    },
    setCurrentDot(websocketData){
      console.warn("value card setCurrentDot")
      if(websocketData.hasOwnProperty('totaldays')){
        this.lastTime = websocketData.time
        this.ltdCards.forEach(p => {
          let itemKey= p.key.toLowerCase()
          if(itemKey === 'ropinst'){
            itemKey = 'ropInst'
          }
          let resNum=Number(websocketData[itemKey]).toFixed(2)+''
          if(p.value!=resNum){
            if(p.value!='--.--'){
              p.diff=true
            }else{
              p.diff=false
            }
            if(Number(websocketData[itemKey])>=0){
              p.value = resNum
            }
          }else{
            p.diff=false
          }
        })
      }else{
        this.zjyCards.forEach(p => {
          this.lastTime = websocketData.sj
          let resNum=Number(websocketData[p.key]).toFixed(2)+''
          if(p.value!=resNum){
            if(p.value!='--.--'){
              p.diff=true
            }else{
              p.diff=false
            }
            if(Number(websocketData[p.key])>=0){
              p.value = resNum
            }
          }else{
            p.diff=false
          }
        })
      }
    }
  },
  watch:{
  }
};
</script>

<style scoped lang="less">
.inputFix {
  /deep/ .ant-input-group-addon {
    width: 78px;
    text-align: left;
  }
  /deep/ .ant-input-disabled {
    color: green;
    border-color: green;
  }
}
.inputRed{
  /deep/ .ant-input-group-addon {
    width: 78px;
    text-align: left;
  }
  /deep/ .ant-input-disabled {
    color: red;
    border-color: red;
  }
}
</style>
