<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="50px">
        <el-form-item label="日期" prop="warnTime">
          <el-date-picker
            v-model="queryParams.warnTime"
            type="date"
            placeholder="选择日期"
            style="width: 130px"
            size="small"
            value-format="yyyy-MM-dd"
            :start-placeholder="startDate"
            :end-placeholder="endDate"
            :picker-options="startPickerOptions"
            :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
            size="small"
            style="width: 120px"
            @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: 98%"
        height="501"
        max-height="501"
        size="small"
        :header-cell-style="{ background: '#f0f0f0', color: '#000' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column key="jh" label="井号" prop="jh" width="100" align="center">
          <template slot-scope="{ row }">
            <a @click="getJhInfo(row.jh)" style="color: blue; cursor: pointer">{{ row.jh }}</a>
            <!-- <span>{{ row.jh }}</span> -->
          </template>
        </el-table-column>
        <el-table-column key="tag" label="预警类型" prop="tag" width="200" align="center">
          <template slot-scope="{ row }">
            <block v-for="(item, index) in row.tag.split(',')" :key="index">
              <el-tag :type="item == '起下钻预警' ? 'success' : ''">{{ item }}</el-tag>
            </block>
            <!-- <span>{{ row.tag }}</span> -->
          </template>
        </el-table-column>
        <el-table-column key="warnTime" label="预警时间" width="150" prop="warnTime" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.warnTime }}</span>
          </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 warnApi from '@/api/warnApi'
import { formatDate } from '@/utils/util'
import moment from 'moment'
export default {
  name: 'warnLeft',
  props: {
    geprDayList: {
      type: Array,
      default: []
    },
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      queryParams: {
        jh: '',
        warnTime: moment(new Date()).format('YYYY-MM-DD'),
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      startPickerOptions: {
        disabledDate: time => this.disabledDate(time)
      }
    }
  },
  created() {
    this.init()

  },
  methods: {
    init() {
      this.getPage()
    },
    getPage() {
      this.loading = true
      newWarnApi.groupSelct(this.queryParams).then(res => {
        this.loading = false
        this.total = res.result.total
        this.current = res.result.current
        this.tableData = res.result.records
      })
    },
    sizeChangeHandle(val) {
      this.query.pageSize = val
      this.query.pageNo = 1
      this.getPage()
    },
    currentChangeHandle(val) {
      this.query.pageNo = val
      this.getPage()
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getPage()
    },
    resetQuery() {
      this.queryParams = {
        jh: '',
        warnTime: moment(new Date()).format('YYYY-MM-DD'),
        pageNo: 1,
        pageSize: 10
      }
      this.getPage()
    },
    getJhInfo(jh) {
      var parameter = {
        pageNo: 1,
        pageSize: 1,
        status: 0
      }
      let jwss = 'N'
      if (process.env.VUE_APP_JWSS === 'TRUE') {
        jwss = 'Y'
      }
      const bodyData = Object.assign(
        parameter,
        { jh: jh },
        { jwss: jwss }
      )
      warnApi.getTopJhList2(bodyData).then(res => {
        console.log('获取的录井数据', res)
        this.$emit('closeDis', res.result.data[0])
      })
    },
    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: 98%;
  }
  .table-con {
    width: 98%;
  }
}
</style>