<template>
  <a-row type="flex" :gutter="16" style="margin-top:20px">
    <a-col :md="5" :sm="24">
      <div class="options-list">
        <h4>关注井列表</h4>
        <a-table
          :showHeader="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="dataSource"
          :pagination="true"
          :scroll="{ y: 586}"
          style="margin-top:30px"
        >
          <template slot="action" slot-scope="text, record">
            <a @click="handleSelect(record)">{{ text }}</a>
          </template>
          <template slot="delete" slot-scope="text, record">
            <a @click="delFocus(record)">删除</a>
          </template>
          <template slot="dt" slot-scope="text, record">
            <a-tag color="geekblue">{{ text }}</a-tag>
          </template>
        </a-table>
      </div>

    </a-col>
    <a-col :md="24-5" :sm="24">
      <div class="options-list">
        <h4>关注井报警信息</h4>
        <focus-list-right v-model="jhList" @ok="closeModel" />
      </div>
    </a-col>
  </a-row>
</template>
<script>
import { getAction } from '@/api/manage'
import FocusListRight from './sub/FocusListRight'
import warnApi from '@/api/warnApi'
import events from '@/views/top/events'
import moment from 'moment'
import vue from 'vue'
import { TOP_WELL_CHOOSEN } from '@/store/mutation-types'

const lsJhKey = 'TOPLEFT_JH_SELECTED'
export default {
  name: 'FocusWarning',
  components: { FocusListRight },
  data() {
    return {
      dataSource: [],
      columns: [
        {
          title: '井号',
          dataIndex: 'jh',
          align: 'left',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '动态',
          dataIndex: 'dt',
          align: 'right',
          scopedSlots: { customRender: 'dt' }
        }
        // {
        //   title: '删除',
        //   align:"right",
        //   dataIndex: 'dt',
        //   width:60,
        //   scopedSlots: { customRender: 'delete' }
        // },
      ],
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      jhList: ''
    }
  },
  created() {
    this.loadLeftData()
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  methods: {
    loadLeftData() {
      var params = {}//查询条件
      this.loading = true
      getAction('/focusJh/list', params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    start() {
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
      }, 1000)
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.jhList = this.selectedRowKeys.map(item => {
        return this.dataSource[item].jh
      }).join()
    },
    handleSelect(record) {
      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() })
      this.$emit('ok')
    },
    closeModel() {
      this.$emit('ok')
    },
    delFocus(record) {
      var that = this
      const parmams = { jh: record.jh }

      warnApi.deleteFocusJh(parmams).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadLeftData()
        } else {
          that.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';

.options-list {
  height: 740px;
  border: 2px solid #e8e8e8;
  position: relative;
  padding: 10px 5px;
  box-sizing: border-box
}

h4 {
  position: absolute;
  top: -14px;
  padding: 1px 8px;
  margin-left: 16px;
  border-radius: 2px 2px 0 0;
  background: #fff;
  font-size: 14px;
  width: auto;
}
</style>
