<template>
  <a-card class="j-address-list-right-card-box" :loading="cardLoading" :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="10">
            <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                style="width: 210px"
                v-model="queryParam.warnTimeRange"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="10">
            <a-form-model-item label="报警类别" prop="status">
              <a-select style="width: 220px" v-model="queryParam.source" placeholder="请选择报警类别">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="工程预警">工程预警</a-select-option>
                <!--                <a-select-option value="邻井复杂">邻井复杂</a-select-option>-->
                <a-select-option value="钻井液">钻井液</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
                <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload"
                          style="margin-left: 8px;left: 10px">重置</a-button>
            </a-col>
          </span>

        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      size="middle"
      :scroll="{ y: 530 }"
      bordered
      rowKey="userId"
      :pagination="ipagination"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      @change="handleTableChange">

      <template slot="action" slot-scope="text, record">
        <a v-if="true" @click="handleSelect(record)">{{ text }}</a>
      </template>

      <template slot="editRemark" slot-scope="text, record">
        <a-button type="link" @click="toEdit(record)">编辑</a-button>
      </template>


    </a-table>

    <template>
      <a-modal
        title="编辑"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel">

        <div style="">
          <div style="margin-bottom: 20px;display: flex">
            <div style="padding-top: 4px;padding-right: 10px">判&nbsp;&nbsp;&nbsp;别&nbsp; :</div>
            <div>
              <a-select v-model="defaultSelect" style="width: 120px" @change="handleChange">
                <a-select-option value="报警属实">
                  报警属实
                </a-select-option>
                <a-select-option value="误报">
                  误报
                </a-select-option>
              </a-select>
            </div>
          </div>

          <div style="margin-bottom: 20px;display: flex">
            <div style="padding-top: 4px;padding-right: 10px">备&nbsp;&nbsp;&nbsp;注&nbsp; :</div>
            <div>
              <a-input v-model="remark" placeholder="请输入备注" />
            </div>
          </div>

          <div style="display: flex">
            <div style="padding-top: 4px;padding-right: 10px">操作人 :</div>
            <div>
              <a-input v-model="recorder" placeholder="请输入操作人" />
            </div>
          </div>

        </div>

      </a-modal>
    </template>


  </a-card>


</template>

<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterObj,filterBjnr } from '@/utils/util'
import moment from 'moment'
import events from '@/views/top/events'
import vue from 'vue'
import { TOP_WELL_CHOOSEN } from '@/store/mutation-types'
import { editWarning } from '@/api/api'
import warnApi from '@/api/warnApi'

const lsJhKey = 'TOPLEFT_JH_SELECTED'
export default {
  name: 'FocusListRight',
  mixins: [JeecgListMixin],
  components: {},
  props: ['value'],
  data() {
    return {
      description: '用户信息',
      remark: '',
      id: 0,
      defaultSelect: '',
      recorder: '',
      cardLoading: true,
      visible: false,
      positionInfo: {},
      // 查询条件
      queryParam: {
        warnTimeRange: [],
        source: '工程预警'
      },
      columns: [
        // {
        //   title: '#',
        //   key: 'rowIndex',
        //   dataIndex: '',
        //   width: 40,
        //   align: 'center',
        //   customRender: (t, r, i) => parseInt(i) + 1
        // },
        {
          title: '井号',
          width: '8%',
          align: 'center',
          dataIndex: 'jh',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '报警类别',
          width: '6%',
          align: 'center',
          dataIndex: 'source'
        },
        {
          title: '异常类型',
          width: '6%',
          align: 'center',
          dataIndex: 'catogary'
        },
        {
          title: '异常描述',
          width: '30%',
          align: 'center',
          dataIndex: 'bjnr',
          customRender: (t)=> filterBjnr(t)
        },
        {
          title: '报警时间',
          width: '13%',
          dataIndex: 'warnTime',
          align: 'center',
          sorter: true
        },
        {
          title: '现场判别',
          width: '6%',
          dataIndex: 'judge',
          align: 'center'
        },
        {
          title: '记录人',
          width: '5%',
          dataIndex: 'recorder',
          align: 'center'
        },
        {
          title: '记录时间',
          width: '12%',
          dataIndex: 'updated',
          align: 'center'
        },
        {
          title: '备注',
          width: '8%',
          dataIndex: 'remark',
          align: 'center'
        },
        {
          title: '操作',
          width: '5%',
          dataIndex: 'remark',
          align: 'center',
          scopedSlots: { customRender: 'editRemark' }
        }
      ],
      url: {
        list: '/focusJh/listWarning'
      },
      jhRecordList: []
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(orgCode) {
        this.dataSource = []
        this.loadData(1, orgCode)
      }
    }
  },
  created() {
    this.loadAllJh()
  },
  methods: {
    loadAllJh() {
      var params = {}//查询条件
      getAction('/focusJh/list', params).then((res) => {
        if (res.success) {
          this.jhRecordList = res.result.records || res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    loadData(pageNum, jhList) {
      this.loading = true
      if (pageNum === 1) {
        this.ipagination.current = 1
      }
      // update-begin- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
      if (!jhList) {
        getAction(this.url.list, {
          ...this.getQueryParams2()
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        // update-end- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
      } else {
        //加载数据 若传入参数1则加载第一页的内容
        getAction(this.url.list, {
          jh: jhList,
          ...this.getQueryParams2()
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      }
    },
    handleSelect(record1) {
      console.log(record1)
      let record = record1
      let exist = false
      this.jhRecordList.forEach(item => {
        if (record1.jh == item.jh) {
          exist = true
          record = { ...item }
        }
      })
      const time = new Date(record1.warnTime)
      const timeStr = moment(time).format('YYYY-MM-DD')
      if (!exist) {
        warnApi.getInfoByJh({ jh: record1.jh })
          .then(res => {
            console.log(res.result)
            const parmams = res.result
            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')
          })
      } else {
        const parmams = {
          ID: record.id,
          DH: record.dh,
          zjy: record.zjy,
          SGYQ: record.sgyq,
          SJDW: record.sjdw,
          zjyDay: record.zjyDay,
          DT: record.dt,
          EJDW: record.ejdw,
          ltd: record.ltd,
          ltdDay: record.ltdDay,
          JH: record.jh
        }
        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')
      }

    },
    getQueryParams2() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      delete param.warnTimeRange // 时间参数不传递后台
      return filterObj(param)
    },
    searchQuery() {
      this.loadData(1, this.value)
    },
    timeRefreshData() {

      setTimeout(function() {
        console.log(111)
        this.loadData(1, this.value)
      }, 5000)//参数是函数名
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1, this.value)
    },
    handleOk(e) {
      if (!this.defaultSelect) {
        this.$message.warning('辨别不能为空')
        return
      }
      let data = {
        id: this.id,
        remark: this.remark,
        judge: this.defaultSelect,
        recorder: this.recorder
      }

      editWarning(data).then((res) => {
        if (res.success) {
          this.visible = false
          this.$message.success(res.message)

        } else {
          this.visible = false
          this.$message.warning(res.message)
        }
        console.log(223)
        this.loadData(1, this.value)
        this.remark = null
        this.defaultSelect = null
        this.recorder = null
        this.id = 0

      })
    },
    handleCancel(e) {
      this.remark = null
      this.defaultSelect = null
      this.recorder = null
      this.id = 0
      this.visible = false
    },

    handleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData(null, this.value)
    },
    onDateChange: function(value, dateString) {
      this.queryParam.warnTime_begin = dateString[0]
      this.queryParam.warnTime_end = dateString[1]
    },

    toEdit(data) {
      console.log('-=-=-=-=-=-=======' + data)
      if (data.judge === '报警属实' || data.judge === '误报') {
        this.defaultSelect = data.judge
      }

      this.recorder = data.recorder
      this.remark = data.remark
      this.id = data.id
      this.visible = true
    }

  },
  mounted() {

    this.timer = window.setInterval(() => {
      setTimeout(() => {
        this.loadData(null, this.value)
      }, 0)
    }, 10000)

  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>
<style>
.j-address-list-right-card-box .ant-table-placeholder {
  min-height: 46px;
}
</style>
<style scoped>
.j-address-list-right-card-box {
  height: 100%;
  min-height: 300px;
}
</style>
