<template>
  <div class="page">
    <div class="search-from">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="日期" prop="warnTime">
              <el-date-picker
                v-model="queryParams.warnTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :start-placeholder="startDate"
                :end-placeholder="endDate"
                :picker-options="startPickerOptions"
                style="width: 150px"
                size="small"
                :clearable="false"
                @keyup.enter.native="handleQuery"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="井号" prop="jh">
              <el-input
                v-model="queryParams.jh"
                placeholder="请输入井号"
                clearable
                style="width: 130px"
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="table-con">
      <el-table
        class="tableClass"
        stripe
        :border="false"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 95%"
        height="501"
        max-height="501"
        size="small"
        :header-cell-style="{ background: '#f0f0f0', color: '#000' }"
      >
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column prop="jh" label="井号" width="100" 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="120" align="center">
          <template slot-scope="scope"
            ><span>{{ scope.row.warnWoh.toFixed(2) }}</span></template
          >
        </el-table-column>
        <el-table-column prop="warnCondition" label="报警工况" width="100" 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="250" align="center">
          <template slot-scope="scope"
            ><span v-if="scope.row.warnType == '起下钻预警'"
              >{{ scope.row.normalStarttime }}~{{ scope.row.normalEndtime }}</span
            >
            <span v-else-if="scope.row.warnType == '泵压变化预警'">{{ scope.row.normalStarttime }}</span></template
          >
        </el-table-column>
        <el-table-column prop="normalWoh" label="上一柱钩载极值(KN)" width="150" 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" width="200">
          <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.ycms'></div>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import newWarnApi from '@/api/newWarnApi'
import moment from 'moment'
export default {
  name: 'warnRight',
  props: {
    geprDayList: {
      type: Array,
      default: []
    },
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      queryParams: {
        jh: '',
        warnType: '',
        warnTime: moment(new Date()).format('YYYY-MM-DD'),
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      startPickerOptions: {
        disabledDate: time => this.disabledDate(time)
      },
      // startDate: '',
      // endDate: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log('初始化')
      this.getPage()
    },
    getPage() {
      this.loading = true
      console.log(this.queryParams)
      newWarnApi.getNewWarnHistory(this.queryParams).then(res => {
        console.log('历史数据', res)
        this.loading = false
        this.total = res.result.total
        this.current = res.result.current
        this.tableData = res.result.records
      })
    },
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val
      this.queryParams.pageNo = 1
      this.getPage()
    },
    currentChangeHandle(val) {
      console.log('第' + val + '页')
      this.queryParams.pageNo = val
      this.getPage()
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getPage()
    },
    resetQuery() {
      this.queryParams = {
        jh: '',
        warnType: '',
        warnTime: moment(new Date()).format('YYYY-MM-DD'),
        pageNo: 1,
        pageSize: 10
      }
      this.getPage()
    },

    disabledDate(time) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      if (month < 10) month = '0' + month;
      let day = time.getDate();
      if (day < 10) day = '0' + day;
      const ymd = year + '-' + month + '-' + day
      return !this.geprDayList.includes(ymd)
    }
  }
}
</script>

<style scoped>
</style>
<style lang="less" scoped>
.page {
  width: 100%;
  display: flex;
  flex-wrap: wrap !important;
  .search-from {
    width: 99%;
  }
  .table-con {
    width: 99%;
  }
}
</style>