<template>
  <a-spin class="fixHeight" :spinning="cardLoading">
    <a-table
      id="warnTable"
      ref="table"
      :scroll="{ y: 'calc(100% - 106px)', x: '100%' }"
      bordered
      :pagination="false"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :rowClassName="setRowClassName"
      style="height: calc(100% - 56px)"
      @change="handleTableChange"
      size="small"
    >
      <template slot="action" slot-scope="text, record">
        <a v-if="true" @click="handleSelect(record)">{{ text }}</a>
      </template>
      <template slot="getWarnDetail" slot-scope="text, record">
        <a @click="getWarnDetail(record)">{{ text }}</a>
      </template>
      <template slot="status" slot-scope="text, record">
        <!-- <div>{{ record.status == '0' || record.status == '1' ? '未解除' : '已解除' }}</div> -->
        <div v-if="record.status == '0' || record.status == '1'">
          <a-popconfirm
            :title="'是否确认解除该井预警?'"
            ok-text="是"
            cancel-text="否"
            @confirm="confirm(record)"
            @cancel="cancel"
          >
            <a href="#" style="color: #f0f0f0">{{ '解除预警' }}</a>
          </a-popconfirm>
        </div>
        <div v-else>{{ '已解除' }}</div>
      </template>
    </a-table>
    <a-modal v-model="showWarnDetail" :title="title + '信息'" width="1400px" :footer="null">
      <a-table
        size="small"
        :scroll="{ y: 500 }"
        bordered
        :pagination="detailPagination"
        :columns="detailColumns"
        :dataSource="detailDataSource"
        :loading="detailLoading"
      >
      </a-table>
    </a-modal>
  </a-spin>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import events from '@/views/top/events'
import vue from 'vue'
import { TOP_WELL_CHOOSEN, USER_NAME } from '@/store/mutation-types'
import warnApi from '@/api/warnApi'
import warnManageApi from '@/api/warnManageApi'
import wellInfo from '@/api/wellInfo'
const lsJhKey = 'TOPLEFT_JH_SELECTED'
export default {
  name: 'zhWarnTable',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      warnOperate: '',
      showWarnOperate: false,
      warnOperateForm: {},
      title: '',
      showWarnDetail: false,
      /* 分页参数 */
      detailPagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      detailDataSource: [],
      detailLoading: false,
      cardLoading: false,
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '序号',
          key: 'rowIndex',
          dataIndex: '',
          width: 50,
          align: 'center',
          customRender: (t, r, i) => parseInt(i) + 1
        },
        {
          title: '井号',
          width: 80,
          align: 'center',
          dataIndex: 'jh',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '报警类别',
          width: 70,
          align: 'center',
          dataIndex: 'yjlb'
        },
        // {
        //   title: '时间区间报警总和',
        //   width: 100,
        //   align: 'center',
        //   dataIndex: 'lsbjcs',
        //   scopedSlots: { customRender: 'getWarnDetail' }
        // },
        {
          title: '最新报警时间',
          width: 120,
          dataIndex: 'zxbjsj',
          align: 'center',
          sorter: true
        },
        {
          title: '状态',
          width: 120,
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        }
        // ,
        // {
        //   title: '异常描述',
        //   align: 'left',
        //   dataIndex: 'yjms',
        //   ellipsis: false,
        //   width: 500,
        //   customRender: t => {
        //     // var text = filterBjnr(t)
        //     var text = t.replace(/<br>/g, '\n')
        //     return <span style="white-space: pre-line" >{text}</span>
        //     //
        //   }
        // }
      ],
      detailColumns: [],
      //钩载信息字段
      detailGzColumns: [{
        title: '井号',
        width: 70,
        align: 'center',
        dataIndex: 'jh'
      }, {
        title: '预警点动作',
        width: 70,
        align: 'center',
        dataIndex: 'motion'
      }, {
        title: '预警点工况',
        width: 70,
        align: 'center',
        dataIndex: 'workingCondition'
      }, {
        title: '预警点时间',
        width: 70,
        align: 'center',
        dataIndex: 'warnTime'
      }, {
        title: '预警点钩载',
        width: 70,
        align: 'center',
        dataIndex: 'warnWoh'
      }, {
        title: '参考柱钩载值',
        width: 70,
        align: 'center',
        dataIndex: 'referenceWoh'
      }],
      //扭矩信息字段
      detailNjColumns: [{
        title: '井号',
        width: 70,
        align: 'center',
        dataIndex: 'jh'
      }, {
        title: '预警点动作',
        width: 70,
        align: 'center',
        dataIndex: 'motion'
      }, {
        title: '预警点工况',
        width: 70,
        align: 'center',
        dataIndex: 'workingCondition'
      }, {
        title: '预警取值开始时间',
        width: 70,
        align: 'center',
        dataIndex: 'warnStartTime'
      }, {
        title: '预警取值结束时间',
        width: 70,
        align: 'center',
        dataIndex: 'warnEndTime'
      }, {
        title: '预警点扭矩',
        width: 70,
        align: 'center',
        dataIndex: 'warnTorque'
      }, {
        title: '预警点扭矩均值',
        width: 70,
        align: 'center',
        dataIndex: 'warnMeanValue'
      }, {
        title: '预警点扭矩波动值',
        width: 70,
        align: 'center',
        dataIndex: 'warnFluctuatedValue'
      }, {
        title: '参考值起点时间',
        width: 70,
        align: 'center',
        dataIndex: 'referenceStartTime'
      }, {
        title: '参考值结束时间',
        width: 70,
        align: 'center',
        dataIndex: 'referenceEndTime'
      }, {
        title: '参考值扭矩均值',
        width: 70,
        align: 'center',
        dataIndex: 'referenceMeanValue'
      }, {
        title: '参考值扭矩波动值',
        width: 70,
        align: 'center',
        dataIndex: 'referenceFluctuatedValue'
      }],
      //泵压信息字段
      detailByColumns: [{
        title: '井号',
        width: 70,
        align: 'center',
        dataIndex: 'jh'
      }, {
        title: '预警点动作',
        width: 70,
        align: 'center',
        dataIndex: 'motion'
      }, {
        title: '预警点工况',
        width: 70,
        align: 'center',
        dataIndex: 'workingCondition'
      }, {
        title: '预警点时间',
        width: 70,
        align: 'center',
        dataIndex: 'warnTime'
      }, {
        title: '预警点立管压力',
        width: 70,
        align: 'center',
        dataIndex: 'warnSpp'
      }, {
        title: '预警点总泵冲',
        width: 70,
        align: 'center',
        dataIndex: 'warnTotalPump'
      }, {
        title: '参考点时间',
        width: 70,
        align: 'center',
        dataIndex: 'referenceTime'
      }, {
        title: '参考点立管压力',
        width: 70,
        align: 'center',
        dataIndex: 'referenceSpp'
      }, {
        title: '参考点总泵冲',
        width: 70,
        align: 'center',
        dataIndex: 'referenceTotalPump'
      }],
      //总池体积信息字段
      detailZctjColumns: [{
        title: '井号',
        width: 70,
        align: 'center',
        dataIndex: 'jh'
      }, {
        title: '预警点动作',
        width: 70,
        align: 'center',
        dataIndex: 'motion'
      }, {
        title: '预警点工况',
        width: 70,
        align: 'center',
        dataIndex: 'workingCondition'
      }, {
        title: '预警点时间',
        width: 70,
        align: 'center',
        dataIndex: 'warnTime'
      }, {
        title: '预警类别:',
        width: 70,
        align: 'center',
        dataIndex: 'totalWarnType'
      }, {
        title: '预警点总池体积',
        width: 70,
        align: 'center',
        dataIndex: 'warnPittotal'
      }, {
        title: '总池体积参考值',
        width: 70,
        align: 'center',
        dataIndex: 'referenceValue'
      }, {
        title: '参考值起点时间',
        width: 70,
        align: 'center',
        dataIndex: 'referenceStartTime'
      }, {
        title: '参考值结束时间',
        width: 70,
        align: 'center',
        dataIndex: 'referenceEndTime'
      }],
    }
  },
  created() { },
  mounted() { },
  methods: {
    init(data) {
      this.dataSource = data
    },
    updateLoad(loading) {
      this.loading = loading
    },
    confirm(e) {
      console.log(e);

      this.saveWarnOperateLog(e.warnLogId, e.jh, e.yjlb)
    },
    saveWarnOperateLog(id, jh, type) {
      var params = {
        id: id,
        jh: jh,
        type: type
      }
      wellInfo.saveWarnOperateLog(params).then(res => {
        console.log('更新预警状态数据')
        this.$message.success('预警已解除');
        this.$emit('success');
      })
    },
    cancel(e) {
      console.log(e);
      this.$message.error('Click on No');
    },

    setRowClassName(record, index) {
      var status = record.status
      console.log('record', record)
      if (status == '0' || status == '1') {
        return 'warn-row'
      } else {
        return ''
      }
    },
    getWarnDetail(record) {
      console.log(record.yjlb)
      var type = ''
      switch (record.yjlb) {
        case '钩载变化异常':
          this.detailColumns = this.detailGzColumns
          type = '钩载预警'
          break;
        case '扭矩变化异常':
          this.detailColumns = this.detailNjColumns
          type = '扭矩预警'
          break;
        case '泵压变化异常':
          this.detailColumns = this.detailByColumns
          type = '泵压预警'
          break;
        case '总池体积变化异常':
          this.detailColumns = this.detailZctjColumns
          type = '总池体积预警'
          break;
        default:
          break;
      }
      this.title = type
      this.showWarnDetail = true
      this.getWarnLogPage(type, record.jh)
    },
    handleSelect(record) {
      const time = new Date(record.zxbjsj)
      const timeStr = moment(time).format('YYYY-MM-DD')
      warnApi.getInfoByJh({ jh: record.jh }).then(res => {
        console.log(res.result)
        let parmams = res.result
        parmams.ltd = 1
        this.$store.commit('serchJhSet', parmams.JH)
        vue.ls.set(lsJhKey, parmams)
        this.$store.commit(TOP_WELL_CHOOSEN, parmams)
        // events.$emit('jhSelected', { jh: parmams.JH, record: parmams, tid: moment().unix(),serchTime: timeStr,gcyj:1})
        // this.$emit('ok');
        this.$router.push({ name: 'topCompare', query: { jh: parmams.JH, serchTime: timeStr, gcyj: 1 } })
      })
    },
    getWarnLogPage(type, jh) {
      let parmams = {
        pageNo: this.detailPagination.current,
        pageSize: this.detailPagination.pageSize,
        type: type,
        jh: jh
      }
      warnManageApi.getWarnLogPageByType(parmams).then(res => {
        console.log(res)
        this.detailLoading = true
        if (res.success) {
          this.detailLoading = false
          this.detailDataSource = res.result.records
          this.detailPagination.total = res.result.total
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 7px;
}
/deep/ .ant-table-tbody > .warn-row {
  background-color: #ce0d0d;
  color: #f0f0f0;
}
/deep/ .ant-table-tbody > tr {
  &:hover {
    td {
      color: #e70e0e !important; // 鼠标悬停时的背景颜色
    }
  }
}
.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>
<style>
.ant-modal-content {
  margin-top: 100px;
}
</style>
