<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table
          class="tableClass"
          stripe
          border
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="520"
          max-height="520"
          size="small"
          :header-cell-style="{ background: '#EFEFEF', color: '#000000' }"
        >
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column prop="warnType" label="报警类别" width="100" align="center"> </el-table-column>
          <el-table-column prop="warnTime" label="报警时间" width="130" align="center">
            <template slot-scope="scope"
              ><span :style="{ fontWeight: 'border', color: 'red' }">{{ scope.row.warnTime }}</span></template
            >
          </el-table-column>
          <el-table-column prop="warnTime" label="报警钩载(KN)" width="80" align="center">
            <template slot-scope="scope"
              ><span>{{ scope.row.warnWoh.toFixed(2) }}</span></template
            >
          </el-table-column>
          <el-table-column prop="warnCondition" label="报警工况" width="80" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.warnCondition == 'DrillDown'">下钻</span>
              <span v-else-if="scope.row.warnCondition == 'Trip'">起钻</span>
              <span v-if="scope.row.wholeCondition == 'Drilling'">钻进</span>
              <span v-else-if="scope.row.wholeCondition == 'Circulate'">循环</span>
            </template>
          </el-table-column>
          <el-table-column prop="normalStarttime" label="上一柱时间区间" width="180" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.warnType == '钩载变化异常'">
                <span>{{ '开始点：' + scope.row.normalStarttime }}</span>
                <br />
                <span>{{ '结束点：' + scope.row.normalEndtime }}</span>
              </template>
              <template v-if="scope.row.warnType == '泵压变化异常'">
                <span>{{ scope.row.normalStarttime }}</span></template
              >
            </template>
          </el-table-column>
          <el-table-column prop="normalWoh" label="上一柱钩载极值(KN)" width="110" align="center">
            <template slot-scope="scope"
              ><span>{{ scope.row.normalWoh.toFixed(2) }}</span></template
            >
          </el-table-column>
          <!-- <el-table-column prop="wholeCondition" label="整体工况" width="120" align="center">

          </el-table-column> -->
          <el-table-column prop="warnTime" label="异常描述详情" align="center">
            <template slot-scope="scope">
<!--              <span>{{ scope.row.jh + '在' + scope.row.warnTime + '发生' }}</span>-->
<!--              <span v-if="scope.row.warnCondition == 'DrillDown'">下钻遇阻</span>-->
<!--              <span v-else-if="scope.row.warnCondition == 'Trip'">起钻遇卡</span>-->
<!--              <span v-if="scope.row.wholeCondition == 'Drilling'">钻进预警</span>-->
<!--              <span v-else-if="scope.row.wholeCondition == 'Circulate'">循环预警</span>-->

              <div style="white-space: pre-wrap;text-align: left" v-html='scope.row.warnDes'></div>

            </template>
          </el-table-column>
          <el-table-column label="详情" width="120" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="openWarnTemplte(scope.row)" type="text" icon="el-icon-setting"
                >模板</el-button
              >
              <el-button size="mini" @click="openWarnData(scope.row)" type="text" icon="el-icon-tickets"
                >数据</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          background
          style="padding: 19px 12px 0px 12px"
          @size-change="showSizeChange"
          @current-change="change"
          :current-page="query.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="query.pageSize"
          layout="->, total, sizes, prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="预警模板" append-to-body :visible.sync="dialogVisible" width="500px">
      <el-form :model="templateData" disabled label-position="left" label-width="170px" style="margin-top: -10px">
        <el-form-item label="钻头监测阈值(米 m)：" v-show="templateData.warnType == '钩载变化异常'">
          <el-input v-model="templateData.bitdepth" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="钻杆重量(千牛 KN)：" v-show="templateData.warnType == '钩载变化异常'">
          <el-input v-model="templateData.columnWeight" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="大钩变化阈值(米 m)：" v-show="templateData.warnType == '钩载变化异常'">
          <el-input v-model="templateData.hkhRang" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="报警阈值(千牛 KN)：" v-show="templateData.warnType == '钩载变化异常'">
          <el-input v-model="templateData.warnValue" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="钻进/循环泵冲阈值(%)：" v-show="templateData.warnType == '泵压变化异常'">
          <el-input v-model="templateData.loopDrillingPump" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="钻进/循环力压阈值(%)：" v-show="templateData.warnType == '泵压变化异常'">
          <el-input v-model="templateData.loopDrillingSpp" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="时刻数据" append-to-body :visible.sync="dialogVisibleWarn" width="500px">
      <el-form :model="templateData1" disabled label-position="left" label-width="150px" style="margin-top: -10px">
        <el-form-item label="报警类别：">
          <el-input v-model="templateData1.warnType" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="报警点钩载(KN)：">
          <el-input v-model="templateData1.warnWoh" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="报警点大钩位置(m)：">
          <el-input v-model="templateData1.warnHkh" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="报警点工况：">
          <el-input v-model="templateData1.warnCondition" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="报警点钻头位置(m)：">
          <el-input v-model="templateData1.warnBitdepth" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上一柱开始时间：" v-show="templateData1.warnType == '钩载变化异常'">
          <el-input v-model="templateData1.normalStarttime" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上一点时间：" v-show="templateData1.warnType == '泵压变化异常'">
          <el-input v-model="templateData1.normalStarttime" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上一点泵冲：" v-show="templateData1.warnType == '泵压变化异常'">
          <el-input v-model="templateData1.normalWoh" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上一点泵压：" v-show="templateData1.warnType == '泵压变化异常'">
          <el-input v-model="templateData1.perSpp" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上一柱结束时间：" v-show="templateData1.warnType == '钩载变化异常'">
          <el-input v-model="templateData1.normalEndtime" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上一柱钩载：" v-show="templateData1.warnType == '钩载变化异常'">
          <el-input v-model="templateData1.normalWoh" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleWarn = false" size="mini">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
  <!--  <div style='position: relative;display: none'>
    <a-table
      size="small"
      :scroll="{ y: 500 }"
      bordered
      :pagination="false"
      :columns="detailColumns"
      :dataSource="tableData"
      :loading="detailLoading">
    </a-table>
    <a-pagination
      size="small"
      :current="query.pageNo"
      :pageSize="query.pageSize"
      :total="total"
      style='position: absolute;bottom: 0px;right: 0px'
      show-size-changer
      @change="change"
      @showSizeChange="showSizeChange"
    />
  </div>-->
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import newWarnApi from '@/api/newWarnApi'
import vue from 'vue'

export default {
  name: 'warnHistory',
  mixins: [JeecgListMixin],
  props: {
    jh: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    startime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },

  },
  data() {
    return {
      query: {
        jh: '',
        warnType: '钩载变化异常',
        warnTime: '',
        pageSize: 10,
        pageNo: 1,
        starTime: '',
        endTime: ''
      },
      dialogVisible: false,
      dialogVisibleWarn: false,
      total: 0,
      templateData: {},
      templateData1: {},
      tableData: [],
      /* table加载状态 */
      detailLoading: false,
      tabOption: [],
      detailColumns: [
        {
          title: '序号',
          key: 'rowIndex',
          dataIndex: '',
          width: 65,
          align: 'center',
          customRender: (t, r, i) => parseInt(i) + 1
        },
        {
          title: '报警时间',
          width: 145,
          dataIndex: 'warnTime',
          align: 'center'
        },
        {
          title: '报警类别',
          width: 100,
          dataIndex: 'warnType',
          align: 'center'
        },
        {
          title: '报警工况',
          width: 100,
          dataIndex: 'warnCondition',
          align: 'center',
          customRender: function (text, record, index) {
            var res = ''
            if (record.warnCondition == 'DrillDown') {
              res = '下钻'
            } else if (record.warnCondition == 'Trip') {
              res = '起钻'
            } else if (record.warnCondition == 'Drilling') {
              res = '钻进'
            } else if (record.warnCondition == 'Circulate') {
              res = '循环'
            }
            return res
          }
        },
        {
          title: '整体工况',
          width: 100,
          dataIndex: 'wholeCondition',
          align: 'center',
          customRender: function (text, record, index) {
            var res = ''
            if (record.wholeCondition == '4') {
              res = '起钻'
            } else if (record.wholeCondition == '8') {
              res = '下钻'
            }
            return res
          }
        },
        {
          title: '异常描述',
          width: 100,
          dataIndex: 'wholeCondition',
          align: 'center',
          customRender: function (text, record, index) {
            let content = record.jh + '，该井在' + record.normalStarttime + '至' + record.normalEndtime + '时间段发生' + record.warnType + '。'
            return content
          }
        },
        {
          title: '大钩位置',
          width: 100,
          align: 'center',
          dataIndex: 'warnHkh'
        },
        {
          title: '钻头位置',
          width: 100,
          align: 'center',
          dataIndex: 'warnBitdepth'
        },
        {
          title: '大钩负荷',
          align: 'center',
          dataIndex: 'warnWoh',
          width: 100
        },
        {
          title: '上一柱起始时间',
          width: 150,
          dataIndex: 'normalStarttime',
          align: 'center'
        },
        {
          title: '上一柱结束时间',
          width: 150,
          dataIndex: 'normalEndtime',
          align: 'center'
        },
        {
          title: '正常柱钩载最值',
          width: 120,
          dataIndex: 'normalWoh',
          align: 'center'
        },
        {
          title: '间隔正常柱数量',
          width: 80,
          dataIndex: 'normalNum',
          align: 'center'
        }
      ]
    }
  },
  watch: {
  },
  created() {
    //this.getWarningJhOption()
    console.log('井号' + this.jh)
    console.log('时间' + this.date)
    this.query.jh = this.jh
    this.query.starTime = this.startime
    this.query.endTime = this.endTime
    //  this.query.warnTime = this.date
    this.init()
  },
  mounted() {
    console.log('新模型')
  },
  methods: {
    init() {
      this.getNewWarnHistoryPage()
      //this.getNewWarnHistoryPage()
    },
    getNewWarnHistoryPage() {
      this.detailLoading = true
      newWarnApi.getNewWarnHistory(this.query).then(res => {
        console.log('历史数据', res)
        this.detailLoading = false
        this.total = res.result.total
        this.current = res.result.current
        this.tableData = res.result.records

      })
    },
    openWarnTemplte(row) {
      this.templateData = row
      this.dialogVisible = true
    },
    openWarnData(row) {
      if (row.warnCondition == 'DrillDown') {
        row.warnCondition = '下钻'
      } else if (row.warnCondition == 'Trip') {
        row.warnCondition = '起钻'
      } else if (row.warnCondition == 'Drilling') {
        row.warnCondition = '钻进'
      } else {
        row.warnCondition = '循环'
      }
      this.templateData1 = row
      this.dialogVisibleWarn = true
    },
    showSizeChange(val) {
      this.query.pageSize = val
      this.query.pageNo = 1
      this.getNewWarnHistoryPage()
    },
    change(val) {
      this.query.pageNo = val
      this.getNewWarnHistoryPage()
    }
  },
  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;
  }
}
.tableClass .cell {
  padding: 0 !important;
  height: 40px;
  line-height: 30px !important;
  text-align: center;
}
/deep/ .el-dialog__body {
  padding: 10px 30px;
}
/deep/ .el-form-item {
  margin-bottom: 0px;
}
</style>
