<template>
  <el-tabs v-loading='isLoading'
           v-model='activeName' @tab-click='handleClick' style='margin-top: -25px'>

    <el-tab-pane label='钩载预警' name='first'>
      <div slot='label'
           style='display:flex;justify-content: center;align-items:center;padding-top: 15px;height: 50px;min-width: 60px'>
        <el-badge :value='this.gjCount' :hidden='this.gjCount===0' class='item'>
          钩载预警
        </el-badge>
      </div>

      <warn-history
        ref='warnHistory'
        :jh='jh'
        :date='date'
        :startime='startime'
        :endTime='endTime'
        style='overflow: hidden; height: 568px; margin-bottom: 0px'
      />
    </el-tab-pane>
    <el-tab-pane label='泵压预警' name='second'>
      <div slot='label'
           style='display:flex;justify-content: center;align-items:center;padding-top: 15px;height: 50px;min-width: 60px'>
        <el-badge :value='this.byCount' :hidden='this.byCount===0' class='item'>
          泵压预警
        </el-badge>
      </div>
      <zj-warn-history
        ref='zjWarnHistory'
        :jh='jh'
        :date='date'
        :startime='startime'
        :endTime='endTime'
        style='overflow: hidden; height: 568px; margin-bottom: 0px'
      ></zj-warn-history>
    </el-tab-pane>
    <el-tab-pane label='扭矩预警' name='three'>
      <div slot='label'
           style='display:flex;justify-content: center;align-items:center;padding-top: 15px;height: 50px;min-width: 60px'>
        <el-badge :value='this.njCount' :hidden='this.njCount===0' class='item'>
          扭矩预警
        </el-badge>
      </div>
      <nj-warn-history
        ref='njWarnHistory'
        :jh='jh'
        :date='date'
        :startime='startime'
        :endTime='endTime'
        style='overflow: hidden; height: 568px; margin-bottom: 0px'
      ></nj-warn-history>
    </el-tab-pane>
    <el-tab-pane label='总池体积变化异常' name='four'>
      <div slot='label'
           style='display:flex;justify-content: center;align-items:center;padding-top: 15px;height: 50px;min-width: 60px'>
        <el-badge :value='this.tjCount' :hidden='this.tjCount===0' class='item'>
          总池体积变化异常
        </el-badge>
      </div>
      <jl-warn-history
        ref='jlWarnHistory'
        :jh='jh'
        :date='date'
        :startime='startime'
        :endTime='endTime'
        style='overflow: hidden; height: 568px; margin-bottom: 0px'
      ></jl-warn-history>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterObj } from '@/utils/util'
import vue from 'vue'
import warnHistory from './warning_table/warnHistory.vue'
import zjWarnHistory from './warning_table/zjWarnHistory.vue'
import njWarnHistory from './warning_table/njWarnHistory.vue'
import jlWarnHistory from './warning_table/jlWarnHistory.vue'
import newWarnApi from '@api/newWarnApi'

export default {
  name: 'YjTableDialogNew',
  mixins: [JeecgListMixin],
  components: { warnHistory, zjWarnHistory, njWarnHistory, jlWarnHistory },
  props: {
    jh: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    startime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    warnType: {
      type: String,
      default: '起下钻预警'
    }
  },
  data() {
    return {
      /* table加载状态 */
      detailLoading: false,
      activeName: 'first',
      detailColumns: [
        {
          title: '序号',
          key: 'rowIndex',
          dataIndex: '',
          width: 80,
          align: 'center',
          customRender: (t, r, i) => parseInt(i) + 1
        },
        {
          title: '井号',
          width: 100,
          align: 'center',
          dataIndex: 'JH',
          scopedSlots: { customRender: 'detailAction' }
        },
        {
          title: '报警类别',
          width: 90,
          align: 'center',
          dataIndex: 'SOURCE'
        },
        {
          title: '异常类型',
          width: 80,
          align: 'center',
          dataIndex: 'CATOGARY'
        },
        {
          title: '异常描述',
          align: 'center',
          dataIndex: 'BJNR',
          width: 300
        },
        {
          title: '报警时间',
          width: 120,
          dataIndex: 'WARN_TIME',
          align: 'center',
          sorter: true
        },
        {
          title: '现场判别',
          width: 100,
          dataIndex: 'JUDGE',
          align: 'center'
        },
        {
          title: '记录人',
          width: 80,
          dataIndex: 'RECORDER',
          align: 'center'
        },
        {
          title: '记录时间',
          width: 150,
          dataIndex: 'UPDATED',
          align: 'center'
        },
        {
          title: '备注',
          width: 100,
          dataIndex: 'REMARK',
          align: 'center'
        }


      ],
      isLoading: false,
      njCount: 0,
      tjCount: 0,
      byCount: 0,
      gjCount: 0
    }
  },
  watch: {},
  created() {
    console.log('aaa')
    this.swType()
  },
  mounted() {
    this.getWarnCount()
  },
  methods: {
    swType() {
      switch (this.warnType) {
        case '起下钻预警':
          this.activeName = 'first'
          break
        case '泵压变化预警':
          this.activeName = 'second'
          break
        case '扭矩异常报警':
          this.activeName = 'three'
          break
        case '总池体积变化异常':
          this.activeName = 'four'
          break
      }
    },
    callback(val) {
      console.log(val)
      if (val == 2) {
        this.$refs.warnHistory.init()
      }
    },
    getWarnCount() {
      this.isLoading = true

      newWarnApi.getPageCount(
        {
          jh: this.jh,
          starTime: this.startime,
          endTime: this.endTime
        }
      ).then((res) => {
        console.log(res)
        this.njCount = res.result.njCount
        this.tjCount = res.result.tjCount
        this.byCount = res.result.byCount
        this.gjCount = res.result.gjCount
        this.setTab()
      }).finally(() => {
        this.isLoading = false
      })
    },
    setTab() {
      if (this.gjCount !== 0) {
        this.activeName="first"
      }else if(this.byCount !== 0){
        this.activeName="second"
      }else if(this.njCount !== 0){
        this.activeName="three"
      }else if(this.tjCount !== 0){
        this.activeName="four"
      }else {
        this.activeName="first"
      }
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang='less' scoped>
/deep/ .ant-card-body {
  padding: 7px;
}

.fixHeight {
  height: 100%;

  /deep/ .ant-spin-nested-loading {
    height: calc(100% - 35px);

    .ant-spin-container {
      height: 100%;

      .ant-table {
        height: 100%;

        .ant-table-content {
          height: 100%;

          .ant-table-scroll {
            height: 100%;
            overflow: hidden;
          }
        }
      }
    }
  }
}

/deep/ .high-light-row {
  background: yellow;

  td {
    color: red;
  }
}
</style>
