<template>
  <div :class="wrpCls">
    <a-dropdown placement="bottomRight">
      <span class="ant-pro-account-avatar toolText">
        <div style="position: relative; line-height: 32px; display: inline-block; margin-left: 8px">
          <div class="imgIcon" v-if="false"></div>
          <a-input-search
            placeholder="请选择"
            @search="onSearch"
            style="width: 206px; margin-left: 0px"
            v-model="selectedJhx"
            id="jhInput"
            @click="onSearch"
          >
            <template v-slot:enterButton> <a-button>选择正钻井</a-button></template>
          </a-input-search>
          <span style="display: inline-block; outline: none; line-height: 1.5; vertical-align: top; margin-left: 8px">
            <a-input-group style="width: 320px" compact>
<!--                  <a-date-picker-->
              <!--                    :disabled="!time"-->
              <!--                    :placeholder="time ? '请选择日期' : '正在加载...'"-->
              <!--                    @change="onTimeChange"-->
              <!--                    :allowClear="false"-->
              <!--                    :disabled-date="disabledDate"-->
              <!--                    v-model="time"-->
              <!--                    style="width:118px;"-->
              <!--                    :openChange="onOpenChange"-->
              <!--                    :panelChange="onPanelChange"-->
              <!--                  >-->
              <!--                <a-icon v-if="time" slot="suffixIcon" type="calendar" />-->
              <!--                <a-icon v-else slot="suffixIcon" type="sync" />-->
              <!--              </a-date-picker>-->
               <el-date-picker
                 size="small"
                 style="width: 130px"
                 v-model="time"
                 type="date"
                 :picker-options="pickOpt"
                 :disabledDate="disabledDate"
                 @change="onTimeChange"
                 placeholder="选择日期">
              </el-date-picker>
              <!--               <a-date-picker-->
              <!--                 :disabled-date="disabledDate"-->
              <!--                 v-model="time"-->
              <!--               >-->
              <!--              </a-date-picker>-->
              <a-select
                style='margin-left: 10px'
                placeholder="预警类型"
                v-model="warnTrackType"
                class="cmbYjFix"
                mode="multiple"
                ref="yjSelect"
                @select="handleWarnTrackItemSelect"
                @deselect="handleWarnTrackItemDeselect"
                :options="yjSelectData"
              >
              </a-select>
              <a-button type="link" @click="gotoWorkCondition" class="toolText"> 周工况 </a-button>
              <a-button type="link" @click="gotoWorkConditionByDay"
                        class="toolText"> 日工况 </a-button>
               <a-button type="link" @click="showRecalculateTable"
                         class="toolText"> 重新计算 </a-button>
               <a-button type="link" @click="go2comparePage"
                         class="toolText"> 对比计算 </a-button>
              <span v-if="false" style="line-height: 32px; padding: 0px 8px">单线像素:</span>
              <a-input-number
                v-if="flase"
                style="width: 50px"
                v-model="chartLineWidth"
                :min="1"
                :max="10"
                @change="handleLineWidthChanged"
              />
            </a-input-group>
          </span>


          <!--    <span style="display: inline-block; outline: none; line-height: 1.5; vertical-align: top; margin-left: 98px">
                <a-select
                  placeholder="范围"
                  v-model="timeRange"
                  ref="timeRange"
                  style="width: 90px"
                  @change="handleTimeRangeChanged"
                >
                  <a-select-option v-for="i in 5" :key="i" :value="Math.pow(2, i - 1)">
                    {{ Math.pow(2, i - 1) + '小时' }}
                  </a-select-option>
                  <a-select-option :value="24">24小时</a-select-option>
                </a-select>
              </span>-->
        </div>
      </span>
    </a-dropdown>

    <a-drawer
      title="选择井"
      width="1200"
      placement="right"
      v-if="drawerVisible"
      :visible="drawerVisible"
      @close="onRightClose"
    >
      <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="onChange">
            <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"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          >
            <a-select-option v-for="(item, index) in ejdwData" :key="index" :value="item.G_CNAME">
              {{ item.G_CNAME }}
            </a-select-option>
          </a-select>
        </div>

        <div style="display: flex; justify-content: flex-end">
          <a-button style="margin-left: 20px" @click="selectHistory">选择历史井</a-button>
        </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>
              <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="userId"
                :pagination="ipagination"
                :columns="columns2"
                :dataSource="dataSource"
                :loading="loading"
                @change="handleTableChange"
              >
                <span slot="rownum" slot-scope="text, record, index">
                  {{ index + 1 + serailStartAt($refs.table2) }}
                </span>
                <span slot="action" slot-scope="text, record">
                  <template>
                    <!--                    <a v-if="record.ltd === 1 || record.zjy === 1" @click="handleSelect(record)">选择</a>-->
                    <!--                    <br/>-->
                    <a v-if="record.focus === 1" @click="delFocus(record)">取消关注</a>
                    <a v-else-if="record.ltd === 1 || record.zjy === 1" @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, record">
                  <a-tag :color="text === '默认' ? '' : '#f56c6c'" v-if="text != null && text !== ''">
                    {{ text }}
                  </a-tag>
                </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>
              </a-table>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-drawer>

    <a-modal
      title="提示"
      :visible="jhTipVisible"
      :okButtonProps="{ style: { display: 'none' } }"
      :cancelButtonProps="{ style: { display: 'none' } }"
    >
      <p>正在加载井信息...</p>
    </a-modal>

    <a-modal v-model="dialogTableVisible" title="计算日志" :footer="null" width="1040px">
      <div style="display: flex;flex-direction: column">
        <div style="display: flex;flex-direction: row">
          <a-button type="primary" @click="addRecalculate">
            新增
          </a-button>
          <a-button style="margin-left: 8px" @click="refresh">
            刷新
          </a-button>
        </div>
        <el-table :data="tableData" v-loading="isLoading" stripe>
          <el-table-column property="startTime" label="开始时间" width="160"></el-table-column>
          <el-table-column property="endTime" label="结束时间" width="160"></el-table-column>
          <el-table-column label="计算状态">
            <template slot-scope="scope">
              <div v-if="scope.row.isCalculate==='1'">
                <el-tag>待计算</el-tag>
              </div>
              <div v-if="scope.row.isCalculate==='2'">
                <el-tag type="danger">计算中</el-tag>
              </div>
              <div v-if="scope.row.isCalculate==='3'">
                <el-tag type="success">计算完成</el-tag>
              </div>

            </template>
          </el-table-column>
          <el-table-column property="calTime" label="计算时间" width="160"></el-table-column>
          <el-table-column property="createTime" label="创建时间" width="160"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.calculateType==='0'">
                <el-tag>工况计算</el-tag>
              </div>
              <div v-if="scope.row.calculateType==='1'">
                <el-tag type="danger">钩载报警</el-tag>
              </div>
              <div v-if="scope.row.calculateType==='2'">
                <el-tag type="danger">总池体积报警</el-tag>
              </div>
              <div v-if="scope.row.calculateType==='3'">
                <el-tag type="danger">扭矩报警</el-tag>
              </div>
              <div v-if="scope.row.calculateType==='4'">
                <el-tag type="danger">泵压报警</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <a-button type="primary" @click="doRecalculate(scope.row.id)" :disabled="scope.row.isCalculate!=='1'">
                重新计算
              </a-button>

            </template>
          </el-table-column>

        </el-table>
        <div
          style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 8px">
          <el-pagination
            style="align-self: flex-end;"
            background
            layout="prev, pager, next"
            :page-size="formData.pageSize"
            :total="totalNum"
            :current-page="formData.pageNo"
            @current-change="onPageChange">
          </el-pagination>
        </div>
      </div>

    </a-modal>
    <a-modal v-model="showRecalculatePanel" title="设置计算参数" :footer="null">
      <div style="display: flex;flex-direction: column" v-loading="isLoading2">
        <div style="display: flex;flex-direction: row;margin-bottom: 8px;">
          <el-select v-model="calculateType" placeholder="请选择类型">
            <el-option
              key="0"
              label="工况计算"
              value="0">
            </el-option>
            <el-option
              key="1"
              label="钩载报警"
              value="1">
            </el-option>
            <el-option
              key="2"
              label="总池体积报警"
              value="2">
            </el-option>
            <el-option
              key="3"
              label="扭矩报警"
              value="3">
            </el-option>
            <el-option
              key="4"
              label="泵压报警"
              value="4">
            </el-option>
          </el-select>
        </div>
        <el-date-picker
          v-model="calculateTimeRange"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <div style="display: flex;flex-direction: row;margin-top: 8px;">
          <el-select v-model="clearRedis" placeholder="是否清除缓存">
            <el-option
              key="0"
              label="不清除缓存"
              value="0">
            </el-option>
            <el-option
              key="1"
              label="清除缓存"
              value="1">
            </el-option>
          </el-select>
        </div>
        <a-button type="primary" @click="setRecalculateParam"
                  style="width: 80px;margin-top: 8px;align-self: flex-start">
          确定
        </a-button>
      </div>

    </a-modal>

  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import events from '@/views/top/events'
import moment from 'moment'
import STable from '@/components/table/'
import warnApi from '@/api/warnApi'
import DvDecoration11 from '@/views/top/sub/DvDecoration11'
import { mapState } from 'vuex'
import _ from 'lodash'
import { TOP_WELL_CHOOSEN } from '@/store/mutation-types'
import vue from 'vue'
import vueBusEvents from '@/utils/vueBusEvents'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { getDateStr } from '@/utils/util'
import newWarnApi from '@api/newWarnApi'

const lsJhKey = 'TOPLEFT_JH_SELECTED'
export default {
  name: 'TopLeftContent',
  components: {
    AvatarDropdown,
    SelectLang,
    STable,
    DvDecoration11
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  created() {
    this.loadData({ pageNo: this.page, pageSize: this.ipagination.pageSize, status: this.status })
    this.$bus.on(vueBusEvents.chartTimeLoaded, this.chartTimeLoaded)
    this.$bus.on(vueBusEvents.topLeftYjListAsync, this.updateYjlxList)
  },
  beforeDestroy() {
    this.$bus.off(vueBusEvents.chartTimeLoaded, this.chartTimeLoaded)
    this.$bus.off(vueBusEvents.topLeftYjListAsync, this.updateYjlxList)
  },
  data() {
    this.dateFormat = 'YYYY-MM-DD HH:mm:ss'
    return {
      locale,
      defaultEndValue: {
        time: [],
        dateFrom: null,
        dateTo: null
      },
      selectedJh: '',
      dateString: [],
      endValue: '',
      endOpen: false,
      page: 1,
      ipagination: {
        // pageSize: 15,
        current: 1,
        pageSize: 10,
        total: 0
      },
      drawerVisible: false,
      dataSource: [],
      queryParams: {
        jh: '',
        ej: undefined,
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      // table2
      columns2: [
        {
          title: '序号',
          key: 'rowIndex',
          dataIndex: '',
          width: 50,
          align: 'center',
          customRender: (t, r, i) => (this.ipagination.current - 1) * 10 + parseInt(i) + 1
        },
        {
          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: 'ltd',
          align: 'center',
          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 => {
        console.log(parameter)
        console.log('参数参数')
        this.page = parameter.pageNo
        // if(parameter.pageNo===1){
        // this.ipagination.current = 1
        // }
        let jwss = 'N'
        if (process.env.VUE_APP_JWSS === 'TRUE') {
          jwss = 'Y'
        }
        const bodyData = Object.assign(
          parameter,
          { jh: this.queryParams.jh },
          { jwss: jwss },
          this.queryParams.ej ? { ejdw: this.queryParams.ej } : {}
        )
        //TODO:定时任务版本  getTopJhList2
        warnApi
          .getTopJhList2(bodyData)
          .then(res => {
            console.log(res)
            this.dataSource = res.result.data
            this.ipagination.total = res.result.totalCount
          })
          .catch(e => {
            this.$message.warn(e)
          })
      },

      loadData2: parameter => {
        console.log(parameter)
        console.log('参数参数')
        this.page = parameter.pageNo
        let jwss = 'N'
        if (process.env.VUE_APP_JWSS === 'TRUE') {
          jwss = 'Y'
        }
        const bodyData = Object.assign(
          parameter,
          { jh: this.queryParams.jh },
          { jwss: jwss },
          this.queryParams.ej ? { ejdw: this.queryParams.ej } : {}
        )
        //TODO:定时任务版本  getTopJhList2
        return warnApi
          .getTopJhList2(bodyData)
          .then(res => {
            return res.result
          })
          .catch(e => {
            this.$message.warn(e)
          })
      },
      options2: {
        alert: { show: false },
        rowSelection: null
      },
      // table2 end
      ejdwData: [],
      jhTipVisible: false,
      status: '0',
      time: '2022-01-10',
      timeAllDate: [],
      warnTrackType: [],
      yjSelectData: [
        { key: 'fzqk', title: '邻井复杂', disabled: false, loading: false },
        { key: 'gcyj', title: '工程预警', disabeld: false, loading: false },
        { key: 'csyj', title: '参数预警', disabeld: false, loading: false }
      ],
      chartLineWidth: 1,
      timeRange: 1,
      pickOpt: {
        disabledDate: (time) => {
          let result = true
          // console.log("timeAllDate")
          // console.log(this.timeAllDate)
          // console.log(moment(time).format('YYYY-MM-DD'))
          result = !this.timeAllDate.some(son => {
            return moment(time).isSame(son, 'day')
          })
          return result
        }
      },
      dialogTableVisible: false,
      isLoading: false,
      formData: {
        jh: '',
        pageNo: 1,
        pageSize: 15
      },
      totalNum: 0,
      tableData: [],

      showRecalculatePanel: false,
      calculateTimeRange: [],
      calculateType: '',
      clearRedis: '0',

      isLoading2: false

    }
  },
  methods: {
    onSearch() {
      //todo 在这里加
      this.dataSource = []
      this.ipagination.current = this.page
      this.loadData({ pageNo: this.page, pageSize: this.ipagination.pageSize, status: this.status })

      this.drawerVisible = true
    },
    selectHistory() {
      let jh = this.queryParams.jh

      //未选中则删除
      if (jh === null || jh === undefined || jh === '') {
        this.$message.error('请输入井号')
        return true
      }
      warnApi
        .queryLastRow({
          jh: jh,
          ltd: '1',
          jwss: 'N'
        })
        .then(ajax => {
          if (ajax != null && ajax.code === 0) {
            let res = ajax.result.data[0]
            let record = {
              DH: '',
              DT: '',
              EHDW: '',
              ID: jh,
              JH: jh,
              JJDR: null,
              KZRQ: '',
              LTD: 1,
              LTDDAT: /\d{4}-\d{1,2}-\d{1,2}/g.exec(res.TIME)[0],
              SGTQ: '',
              SJDW: null,
              ZJY: 0,
              ZJYDAY: null,
              ltd: 1,
              ltdDay: /\d{4}-\d{1,2}-\d{1,2}/g.exec(res.TIME)[0],
              zjy: 0,
              zjyDay: null
            }

            this.drawerVisible = false
            this.selectedJh = record.JH
            this.$store.commit('serchJhSet', record.JH)
            vue.ls.set(lsJhKey, record)
            this.$store.commit(TOP_WELL_CHOOSEN, record)
            events.$emit('jhSelected', { jh: this.selectedJh, record, tid: moment().unix() })
            this.$bus.emit(vueBusEvents.closeSideBar)
          } else {
            this.$message.error('井号不存在')
            return false
          }
        })
    },
    handleSelect(record) {
      console.log('aaa', record)
      this.$bus.emit(vueBusEvents.closeGCYJ)
      this.drawerVisible = false
      this.selectedJh = record.JH
      this.$store.commit('serchJhSet', record.JH)
      vue.ls.set(lsJhKey, record)
      this.$store.commit(TOP_WELL_CHOOSEN, record)
      events.$emit('jhSelected', { jh: this.selectedJh, record, tid: moment().unix() })
      this.$bus.emit(vueBusEvents.closeSideBar)

      // 202211
      this.timeRange = 1

      let isTopCompare = window.location.href.includes('topCompare')
      console.warn('isTopCompare', isTopCompare)
      if (isTopCompare) {
        // let routerUrl = this.$router.resolve({
        //   name: 'topCompare',
        //   query: {
        //     jh: vue.ls.get('TOPLEFT_JH_SELECTED').JH,
        //     serchTime: moment(this.time).format('YYYY-MM-DD'), gcyj: 1, ltd: this.wellRecord.ltd
        //   }
        //
        // })
        // // vue.ls.get('topWellChoosen').ltd
        // window.open(routerUrl.href, '_blank')
        this.$router.push({ name: 'topCompare', query: { jh: this.selectedJh, time: 'getTime' } })
      } else {
        this.$router.push({ name: 'top', query: { jh: this.selectedJh, time: 'getTime' } })

      }

    },
    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.$refs.table2.refresh()
          that.loadData({ pageNo: this.page, pageSize: this.ipagination.pageSize, status: this.status })
        } 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.loadData({ pageNo: this.page, pageSize: this.ipagination.pageSize, status: this.status })
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    onRightClose() {
      this.ipagination.current = 1
      this.drawerVisible = false
    },
    _debounceRefreshTable(res) {
      this.ipagination.current = 1
      this.loadData({ pageNo: 1, pageSize: this.ipagination.pageSize, status: this.status })
    },
    handleTableChange(pagination, filters, sorter) {
      console.log('aa', pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData({ pageNo: pagination.current, pageSize: this.ipagination.pageSize, status: this.status })
    },
    serailStartAt() {
      const c = this.$refs.table2.localPagination.current - 1
      return (c < 0 ? 0 : c) * this.$refs.table2.localPagination.pageSize
    },
    onChange() {
      this.ipagination.current = 1
      this.loadData({ pageNo: 1, pageSize: this.ipagination.pageSize, status: this.status })
    },
    /* 不能被选中的时间 */
    disabledDate(current) {
      let result = true
      // console.log("timeAllDate")
      // console.log(this.timeAllDate)
      console.log(current.format('YYYY-MM-DD'))
      result = !this.timeAllDate.some(son => {
        return moment(current).isSame(son, 'day')
      })
      return result
    },
    onOpenChange(status) {
      console.log('onOpenChange')
      console.log(status)
    },
    onPanelChange(value, mode) {
      console.log('onPanelChange')
      console.log(value)
      console.log(mode)
    },
    chartTimeLoaded(src) {
      console.log('chartTimeLoaded')
      console.log(src)
      this.time = src.time[0]
      this.timeAllDate = src.timeAllDate
    },
    onTimeChange(date) {
      //  this.$bus.emit(vueBusEvents.chartTimeChanged, { date, dateString })
      console.log('onTimeChange')
      console.log(moment(date).format('YYYY-MM-DD'))

      this.$bus.emit(vueBusEvents.chartTimeChanged, {
        date: moment(date),
        dateString: moment(date).format('YYYY-MM-DD')
      })
      this.timeRange = 1
    },
    handleWarnTrackItemSelect(v, o) {
      this.$globle.setWarningValue(this.warnTrackType)
      this.$bus.emit(vueBusEvents.warnTrackAdd, { checked: true, key: v })
      this.$refs.yjSelect.blur()
    },
    handleWarnTrackItemDeselect(v, o) {
      this.$bus.emit(vueBusEvents.warnTrackRemove, { checked: false, key: v })
      this.$refs.yjSelect.blur()
    },
    handleLineWidthChanged() {
      this.$bus.emit(vueBusEvents.lineWidthChanged, this.chartLineWidth)
    },
    updateYjlxList(params) {
      const { type, key } = params
      if (type === 'add') {
        if (!_.find(this.warnTrackType, p => p === key)) {
          this.warnTrackType = [key, ...this.warnTrackType]

        }
      } else if (type === 'remove') {
        if (_.find(warnTrackType, p => p === key)) {
          this.warnTrackType = _.remove(this.warnTrackType, p => p === key)
        }
      }
      this.$globle.setWarningValue(this.warnTrackType)
    },
    changeInvalidTime(date, dateString) {
      this.defaultEndValue.dateFrom = dateString[0]
      this.defaultEndValue.dateTo = dateString[1]
    },
    moment,
    gotoWorkCondition() {
      let routerUrl = this.$router.resolve({
        name: '/workConditionsPage',
        query: { curJh: vue.ls.get('TOPLEFT_JH_SELECTED').JH }
      })
      window.open(routerUrl.href, '_blank')
    },
    gotoWorkConditionByDay() {
      let routerUrl = this.$router.resolve({
        name: '/dayWorkConditionsPage',
        query: { curJh: vue.ls.get('TOPLEFT_JH_SELECTED').JH }
      })
      window.open(routerUrl.href, '_blank')
    },
    showRecalculateTable() {
      this.dialogTableVisible = true
      this.getData(1)
    },
    addRecalculate() {
      this.showRecalculatePanel = true
    },
    doRecalculate(id) {
      this.isLoading = true
      newWarnApi.doRecalculate({
        id: id
      }).then((res) => {
        this.$notification.success({
          message: '提示',
          description:
            '提交成功'
        })
        this.getData(1)
      }).finally(() => {
        this.isLoading = false
      })
    },
    go2comparePage() {
      console.warn('go2comparePage')
      let routerUrl = this.$router.resolve({
        name: 'topCompare',
        query: {
          jh: vue.ls.get('TOPLEFT_JH_SELECTED').JH,
          serchTime: moment(this.time).format('YYYY-MM-DD'), gcyj: 1, ltd: 1
        }

      })
      // vue.ls.get('topWellChoosen').ltd
      window.open(routerUrl.href, '_blank')
    },
    refresh() {
      this.getData(1)
    },
    getData(page) {
      this.isLoading = true
      this.formData.pageNo = page
      this.formData.jh = vue.ls.get('TOPLEFT_JH_SELECTED').JH
      console.log(this.formData)
      newWarnApi.getWorkLog(this.formData).then((res) => {
        this.totalNum = res.result.total
        this.tableData = res.result.records
      }).finally(() => {
        this.isLoading = false
      })

    },
    onPageChange(num) {
      this.getData(num)
    },
    setRecalculateParam() {
      this.formData.jh = vue.ls.get('TOPLEFT_JH_SELECTED').JH
      console.log(this.calculateTimeRange)
      if (this.calculateTimeRange.length < 2) {
        this.$notification.error({
          message: '提示',
          description:
            '请正确设置重新计算的起止时间'
        })
        return
      }
      this.isLoading2 = true

      newWarnApi.addRecalculate({
        jh: this.formData.jh,
        calculateType: this.calculateType,
        startTime: this.calculateTimeRange[0],
        endTime: this.calculateTimeRange[1],
        isDelRedis: this.clearRedis
      }).then((res) => {
        this.showRecalculatePanel = false
        this.calculateType = ''
        this.calculateTimeRange = []
        this.clearRedis = '0'
        this.$notification.success({
          message: '提示',
          description:
            '设置成功'
        })
        this.getData(1)
      }).finally(() => {
        this.isLoading2 = false
      })
    }
  },
  computed: {
    wrpCls() {
      return {
        'ant-pro-global-header-index-left': true,
        [`ant-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true
      }
    },
    selectedJhx() {
      return this.$store.state.lineConfig.selectedJhx
    },
    ...mapState({
      warnTheme: state => state.app.warnTheme,
      wellRecord: state => state.topWellChoosen.wellRecord
    })
  },
  mounted() {
    this.$globle.setWarningValue(this.warnTrackType)
    if (this.warnTheme === 'dark') this.$refs.dv11.setA([700, 90])
    warnApi
      .getEjdwList({})
      .then(res => {
        this.ejdwData = res.result.data
      })
      .catch(e => {
      })
    let urlJh = this.$route.query.jh
    let urlSerchTime = this.$route.query.serchTime

    const lsJh = vue.ls.get(lsJhKey)
    let jwss = 'N'
    if (process.env.VUE_APP_JWSS === 'TRUE') {
      jwss = 'Y'
    }
    if (urlSerchTime) {
      return false
    }
    console.log(urlJh + '-------------------')
    if (urlJh) {
      this.jhTipVisible = true
      console.log({ jwss: jwss, jh: urlJh, console: 11111111111 })
      warnApi
        .getAJhByJh({ jwss: jwss, jh: urlJh })
        .then(res => {
          console.log(res.result)
          this.selectedJh = res.result.JH
          this.$store.commit(TOP_WELL_CHOOSEN, res.result)
          events.$emit('jhSelected', { jh: urlJh, record: res.result, tid: moment().unix() })
        })
        .catch(() => {
        })
        .finally(() => {
          this.jhTipVisible = false
        })
    } else if (lsJh) {
      this.selectedJh = lsJh.JH
      this.$store.commit(TOP_WELL_CHOOSEN, lsJh)
      events.$emit('jhSelected', { jh: lsJh.JH, record: lsJh, tid: moment().unix() })
    } else {
      this.jhTipVisible = true
      warnApi
        .getAvaliableJh2({ jwss: jwss })
        .then(res => {
          console.log(res.result)
          this.selectedJh = res.result.JH
          this.$store.commit(TOP_WELL_CHOOSEN, res.result)
          events.$emit('jhSelected', { jh: res.result.JH, record: res.result, tid: moment().unix() })
        })
        .catch(() => {
        })
        .finally(() => {
          this.jhTipVisible = false
        })
    }
  },
  watch: {
    warnTheme(val) {
      this.$nextTick(() => {
        val === 'dark' && this.$refs.dv11.setA([700, 90])
      })
    },
    selectedJhx() {
      this.selectedJh = this.$store.state.lineConfig.selectedJhx
    }
  }
}
</script>
<style lang="less" scoped>
@pro-header-hover-trigger-action-bg: rgba(0, 0, 0, 0.025);
.ant-pro-global-header-index-left {
  float: left;
  height: 100%;
  width: calc(100% - 676px);
  margin-left: auto;
  overflow: hidden;

  .ant-pro-global-header-index-action {
    display: inline-block;
    height: 100%;
    padding: 0 12px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: @pro-header-hover-trigger-action-bg;
    }
  }
}

.toolText {
  color: #000000ee;
  font-size: 16px;

  /deep/ i {
    color: #337ab7;
  }
}

.imgIcon {
  display: inline-block;
  outline: none;
  line-height: 1.5;
  vertical-align: top;
  margin-left: 8px;
  width: 36px;
  height: 32px;
  background-image: url(/tip.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.cmbYjFix {
  width: 296px;

  /deep/ .ant-select-selection {
    max-height: 32px;
  }
}
</style>
