<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="返回多井预警" @back="goBack" />
    <a-card size="small">
      <div style="width: 100%; display: flex; flex-direction: row">
        <a-input
          name="jh"
          style="width: 200px; margin: 0 20px"
          v-model="queryParams.jh"
          placeholder="请输入井号包含的字符"
          allowClear
        />
        <a-select
          allowClear
          style="width: 170px"
          v-model="queryParams.ejdw"
          name="ejdw"
          placeholder="请选择二级单位"
          :options="ejdwData"
          :getPopupContainer="(triggerNode) => triggerNode.parentNode"
        >
        </a-select>
        <a-button style="margin-left: 20px" type="primary" @click="doSearch">搜索</a-button>
      </div>
    </a-card>

    <a-table
      style="flex: 1; margin-top: 0px"
      :showHeader="true"
      :columns="columns"
      :data-source="dataSource"
      :pagination="ipagination"
      size="small"
      :loading="tableLoading"
      @change="handleTableChange"
      :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    >
      <span slot="num" slot-scope="text, records, index">
        {{ Number(index) + 1 }}
      </span>
      <template slot="company" slot-scope="text, record">
        <a @click="handleSelect(record)">{{ text }}</a>
      </template>
      <template slot="zjdt" slot-scope="text, record">
        <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start">
          <div
            v-if="record.DT !== null"
            style="height: 10px; width: 10px; background: #00a0e9; border-radius: 5px"
          ></div>
          <div style="color: #00a0e9; margin-left: 4px">{{ record.DT }}</div>
        </div>
      </template>

      <template slot="getWarnDetail" slot-scope="text, record">
        <a @click="handleFabClickedNew(record)">{{ text }}</a>
      </template>
      <!--      <template slot='tjCount' slot-scope='text, record'>-->
      <!--        <a @click='getWarnDetail(record,"总池体积变化异常")'>{{ record.tjCount }}</a>-->
      <!--      </template>-->
      <!--      <template slot='njCount' slot-scope='text, record'>-->
      <!--        <a @click='getWarnDetail(record,"扭矩变化异常")'>{{ record.njCount }}</a>-->
      <!--      </template>-->
      <!--      <template slot='byCount' slot-scope='text, record'>-->
      <!--        <a @click='getWarnDetail(record,"泵压变化异常")'>{{ record.byCount }}</a>-->
      <!--      </template>-->
      <!--      <template slot='gzCount' slot-scope='text, record'>-->
      <!--        <a @click='getWarnDetail(record,"钩载变化异常")'>{{ record.gzCount }}</a>-->
      <!--      </template>-->
      <template slot="warnIcon" slot-scope="text, record">
        <svg
          v-if="record.warnCount === 0"
          style="width: 20px; height: 20px"
          t="1695866245515"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2599"
          width="200"
          height="200"
        >
          <path
            d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
            fill="#15B3F7"
            p-id="2600"
          ></path>
        </svg>
        <svg
          v-else
          style="width: 20px; height: 20px"
          t="1695866197239"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5752"
          width="200"
          height="200"
        >
          <path
            d="M512 4.12672c280.49408 0 507.87328 227.3792 507.87328 507.87328 0 280.49408-227.3792 507.87328-507.87328 507.87328C231.50592 1019.87328 4.12672 792.49408 4.12672 512 4.12672 231.50592 231.50592 4.12672 512 4.12672zM512 685.96736c-42.47552 0-76.91264 34.42688-76.91264 76.91264 0 42.47552 34.43712 76.91264 76.91264 76.91264 42.47552 0 76.91264-34.43712 76.91264-76.91264C588.91264 720.39424 554.47552 685.96736 512 685.96736zM509.78816 625.83808c36.58752 0 66.24256-29.66528 66.24256-66.24256l0-309.1456c0-36.58752-29.65504-66.24256-66.24256-66.24256-36.58752 0-66.24256 29.66528-66.24256 66.24256l0 309.1456C443.5456 596.18304 473.20064 625.83808 509.78816 625.83808z"
            fill="#f4ea2a"
            p-id="5753"
          ></path>
        </svg>
      </template>
      <template slot="warnState" slot-scope="text, record">
        <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>
    </a-table>
  </div>
</template>
<script>
import vue from 'vue'
import { TOP_WELL_CHOOSEN, USER_INFO } from '@/store/mutation-types'
import events from '@views/top/events'
import moment from 'moment/moment'
import warnApi from '@api/warnApi'
import Vue from 'vue'
import { getAction } from '@api/manage'

export default {
  name: 'WarningPage',
  data() {
    return {
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'num' },
          align: 'center'
        },
        {
          title: '钻井公司',
          dataIndex: 'EJDW',
          align: 'center'
        },
        {
          title: '施工地点',
          dataIndex: 'SGDD',
          align: 'center'
        },
        {
          title: '甲方单位',
          dataIndex: 'JFDW',
          align: 'center'
        },
        {
          title: '队号',
          dataIndex: 'DH',
          align: 'center'
        },
        {
          title: '井号',
          dataIndex: 'JH',
          align: 'center',
          scopedSlots: { customRender: 'company' }
        },
        {
          title: '井别',
          dataIndex: 'JB',
          align: 'center'
        },
        {
          title: '井型',
          dataIndex: 'JX',
          align: 'center'
        },
        {
          title: '钻机动态',
          align: 'left',
          scopedSlots: { customRender: 'zjdt' }

        },
        {
          title: '预警提醒',
          align: 'center',
          scopedSlots: { customRender: 'warnIcon' }
        }, {
          title: '总预警次数',
          dataIndex: 'warnCount',
          align: 'center',
          scopedSlots: { customRender: 'getWarnDetail' }

        },
        // {
        //   title: '总池体积变化异常',
        //   align: 'center',
        //   scopedSlots: { customRender: 'tjCount' }
        // },
        // {
        //   title: '扭矩变化异常',
        //   align: 'center',
        //   scopedSlots: { customRender: 'njCount' }
        // },
        // {
        //   title: '泵压变化异常',
        //   align: 'center',
        //   scopedSlots: { customRender: 'byCount' }
        // },
        // {
        //   title: '钩载变化异常',
        //   align: 'center',
        //   scopedSlots: { customRender: 'gzCount' }
        // },
        {
          title: '数据状态',
          align: 'center',
          scopedSlots: { customRender: 'warnState' }
        },
        {
          title: '最新预警日期',
          dataIndex: 'newWarnTime',
          align: 'center'
        }


      ],
      dataSource: [],
      tableLoading: false,
      ipagination: {
        current: 1,
        pageSize: 16,
        // pageSizeOptions: ['10', '20', '30'],
        total: 0
      },
      queryParams: {
        jh: null,
        ejdw: undefined
      },
      ejdwData: []
    }
  },
  methods: {
    goBack() {
      this.$router.push({ name: '/FocusWarningPage' })
    },
    handleSelect(record) {
      console.log(record)
      const parmams = {
        ID: record.ID,
        DH: record.ID,
        zjy: record.ZJY,
        SGYQ: record.SGYQ,
        SJDW: record.SJDW,
        zjyDay: record.ZJYDAY,
        DT: record.DT,
        EJDW: record.EJDW,
        ltd: 1,
        ltdDay: record.LTDDAY,
        JH: record.JH
      }
      this.$store.commit('serchJhSet', parmams.JH)

      vue.ls.set('TOPLEFT_JH_SELECTED', parmams)
      this.$store.commit(TOP_WELL_CHOOSEN, parmams)
      events.$emit('jhSelected', { jh: parmams.JH, record: parmams, tid: moment().unix() })
      this.$emit('ok')
      this.$router.push({ name: 'topCompare', query: { jh: parmams.JH } })
    },
    doSearch() {
      this.ipagination.current = 1
      this.loadData()
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.loadData()
    },
    loadData() {
      // pageNo: 1
      // pageSize: 15
      this.tableLoading = true
      getAction('/dataVue/common/getJhWarnList', {
        jh: this.queryParams.jh,
        ejdw: this.queryParams.ejdw,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      })
        .then(res => {
          this.dataSource = []
          console.log(res.result)
          this.dataSource.push(...res.result.data)
          this.ipagination.total = res.result.totalCount
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    async getWarnDetail(record, category) {
      // todo FocusListRightPage cv  写的什么逼玩意

      console.log(record)
      let jh = record.JH
      let lb = category
      //let time=record.WARN_TIME.substring(0,10)
      let time = ''
      this.$dialog(
        () => import('@/views/tools/sub/YjTableDialogNew.vue'),
        {
          jh: jh, date: time, lb: lb, warnTimeRange: ['', '']
        },
        {
          title: `${jh}  预警信息`,
          width: document.body.offsetWidth * 0.75,
          height: document.body.offsetHeight * 1,
          centered: true,
          maskClosable: true,
          okButtonProps: { style: { display: 'none' } },
          cancelText: '关闭'
        }
      )

    },

    // todo indexEcharts2.vue
    handleFabClickedNew(record) {
      console.log('新预警信息')
      this.$dialog(
        () => import('@/views/part1/YjTableDialogNewCompare.vue'),
        {
          // jh: this.jh, date: moment(this.time).format('YYYY-MM-DD'), startime: this.time1, endTime: this.time2 },
          jh: record.JH, date: moment().format('YYYY-MM-DD'), startime: '', endTime: ''
        },

        {
          title: `${record.JH}   预警信息`,
          width: document.body.offsetWidth * 0.75,
          height: document.body.offsetHeight * 0.85,
          centered: true,
          maskClosable: true,
          okButtonProps: { style: { display: 'none' } },
          cancelText: '关闭'
        }
      )
      // }
    }

  },
  mounted() {
    warnApi
      .getRbEjdwList({})
      .then(res => {
        this.ejdwData = res.result.data.map(k => {
          return { key: k.EJDW, title: k.EJDW }
        })
      })
      .catch(e => {
      })
    this.loadData()
  }
}

</script>


<style lang='less' scoped>
.ant-table-striped .table-striped td {
  background-color: #b3d4fc;
}

/deep/ .ant-table-body {
  //min-height:300px;
}
</style>