<template>
  <div>
    <div style="margin-bottom: 10px;display: flex">
      <div style="justify-content: flex-start;display: flex;width: 90%">
        <a-radio-group v-model="status" button-style="solid" @change="_debounceRefreshTable">
          <a-radio-button value="0">
            全部
          </a-radio-button>
          <a-radio-button value="1">
            已关注
          </a-radio-button>
          <a-radio-button value="2">
            未关注
          </a-radio-button>
        </a-radio-group>

        <a-input
          name="jh"
          style="width: 200px;margin: 0 20px"
          v-model="queryParams.jh"
          placeholder="请输入井号包含的字符"
          @change="_debounceRefreshTable"
          allowClear
        />
        <a-select
          allowClear
          style="width: 170px"
          v-model="queryParams.ej"
          name="ejdw"
          placeholder="请选择二级单位"
          @change="_debounceRefreshTable"
          :options="ejdwData"
          :getPopupContainer="triggerNode => triggerNode.parentNode"
        >
        </a-select>
      </div>
    </div>
    <a-form-model ref="configForm" layout="horizontal" :model="queryParams">
      <a-row class="form-row" :gutter="16">
        <a-col :span="24">
          <a-form-model-item>
            <span slot="label">查询结果</span>
            <s-table
              ref="table"
              size="middle"
              bordered
              rowKey="userId"
              :columns="columns2"
              :data="loadData"
              :loading="loading"
            >
              <span slot="rownum" slot-scope="text, record, index">
                {{ index + 1 + serailStartAt($refs.table) }}
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a v-if="record.focus === 1" @click="delFocus(record)">取消关注</a>
                  <!--                  <a v-else-if="record.ltd === 1 || record.zjy === 1" @click="setFocus(record)">关注</a>-->
                 <a v-else @click="setFocus(record)">关注</a>

                </template>
              </span>

              <span slot="selectInfo" slot-scope="text, record">
                <template>
                  <a v-if="record.ltd === 1 || record.zjy === 1" @click="handleSelect(record)">{{ text }}</a>
                  <span v-else>{{ text }}</span>
                </template>
              </span>
              <span slot="moxing" slot-scope="text">
                <a-tag :color="text === '默认' ? '' : '#f56c6c'" v-if="text != null && text !== ''">
                  {{ text }}
                </a-tag>
              </span>
              <span slot="lastDate" slot-scope="text">
                 {{ text }}
              </span>


              <span slot="flag" slot-scope="text, record">
                <template>
                  <a-tag color="green" v-if="record.ltd === 1">
                    录井仪{{ `(${record.ltdDay.replace(/-/g, '/')})` }}
                  </a-tag>
                  <template v-if="record.ltd === 1 && record.zjy === 1"> &nbsp; </template>
                  <a-tag color="cyan" v-if="record.zjy === 1">
                    钻井液{{ `(${record.zjyDay.replace(/-/g, '/')})` }}
                  </a-tag>
                </template>
              </span>
            </s-table>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import STable from '@/components/table/'
import warnApi from '@/api/warnApi'
import _ from 'lodash'

export default {
  name: 'FocusSelectWell',
  components: {
    STable
  },
  props: {},
  data() {
    return {
      queryParams: {
        jh: '',
        ej: undefined,
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      // table2
      columns2: [
        {
          title: '序号',
          key: 'rowIndex',
          dataIndex: '',
          width: 50,
          align: 'center',
          scopedSlots: { customRender: 'rownum' }
        },
        {
          title: '操作',
          width: 95,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '井号',
          dataIndex: 'JH',
          width: 136,
          align: 'center',
          scopedSlots: { customRender: 'selectInfo' }
        },
        {
          title: '预警模型',
          dataIndex: 'MX',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'moxing' }
        },
        {
          title: '最新数据日期',
          dataIndex: 'lastDate',
          align: 'center',
          width: 180,
          scopedSlots: { customRender: 'lastDate' }
        },
        {
          title: '数据状态',
          dataIndex: 'ltd',
          align: 'center',
          width: 180,
          scopedSlots: { customRender: 'flag' }
        },
        {
          title: '开钻日期',
          dataIndex: 'KZRQ',
          customRender: text => (text ? text.split(' ')[0] : ''),
          align: 'center',
          width: 110
        },
        {
          title: '设计井深(m)',
          dataIndex: 'DSJS',
          align: 'center',
          width: 110
        },
        {
          title: '实际井深(m)',
          dataIndex: 'SJJS',
          align: 'center',
          width: 110
        },
        {
          title: '二级单位',
          width: 150,
          align: 'center',
          dataIndex: 'EJDW'
        },
        {
          title: '队号',
          dataIndex: 'DH',
          align: 'center',
          width: 115
        },
        {
          title: '动态',
          dataIndex: 'DT',
          align: 'center',
          width: 85
        },
        {
          title: '油区',
          dataIndex: 'SGYQ',
          align: 'center',
          width: 85
        }
      ],
      loadData: parameter => {
        const queryFix = ++this.queryIndex
        let jwss = 'N'
        if (process.env.VUE_APP_JWSS === 'TRUE') {
          jwss = 'Y'
        }
        const bodyData = Object.assign(
          parameter,
          { jh: this.queryParams.jh, jwss: jwss, status: this.status },
          this.queryParams.ej ? { ejdw: this.queryParams.ej } : {}
        )
        return warnApi
          .getTopJhList2(bodyData)
          .then(res => {
            if (queryFix !== this.queryIndex) {
              throw new Error('')
            }
            return res.result
          })
          .catch(e => {
          })
      },
      options2: {
        alert: { show: false },
        rowSelection: null
      },
      // table2 end
      ejdwData: [],
      status: '0',
      queryIndex: 0
    }
  },
  methods: {
    serailStartAt(table) {
      const c = table.localPagination.current - 1
      return (c < 0 ? 0 : c) * table.localPagination.pageSize
    },
    setFocus(record) {
      var that = this
      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
      }
      warnApi.addFocusJh(parmams).then(res => {
        if (res.success) {
          that.$message.success(res.message)
          that._debounceRefreshTable()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    delFocus(record) {
      var that = this
      const parmams = { jh: record.JH }
      warnApi.deleteFocusJh(parmams).then(res => {
        if (res.success) {
          that.$message.success(res.message)
          that._debounceRefreshTable()
        } else {
          that.$message.warning(res.message)
        }
      })
    }
  },
  mounted() {
    warnApi
      .getRbEjdwList({})
      .then(res => {
        this.ejdwData = res.result.data.map(k => {
          return { key: k.EJDW, title: k.EJDW }
        })
      })
      .catch(e => {
      })
  },
  activated() {
  },
  created() {
    this._debounceRefreshTable = _.debounce(() => {
      this.$refs.table.refresh()
    }, 200)
  },
  computed: {}
}
</script>

<style lang="less" scoped></style>
