/* eslint-disable */
<template>
  <div style='height: 600px;position: relative'>
    <a-spin :spinning='formLoading.visible' :tip='formLoading.tip' class='page'>
      <el-form ref='form' :model='form' label-width='140px'>
        <el-row v-if="warnType == 'qxz'">
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='钻头起下钻监测预警起始点' placement='top-start'>
              <el-form-item label='钻头监测阈值(米 m)' style='margin-top: 10px' label-width='200px'>
                <el-input v-model='form.bitdepth' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='起下钻监测报警阈值' placement='top-start'>
              <el-form-item label='报警阈值(千牛 KN)' style='margin-top: -10px' label-width='200px'>
                <el-input v-model='form.warnValue' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='一柱钻杆标准重量' placement='top-start'>
              <el-form-item label='1柱钻杆重量(千牛 KN)' style='margin-top: -10px' label-width='200px'>
                <!-- <el-input v-model="form.columnWeight"/></el-form-item> -->
                <el-select v-model='form.columnWeight' placeholder='请选择' size='mini' style='width: 100%'>
                  <el-option v-for='item in columnWeightOptions' :key='item.value' :label='item.label'
                             :value='item.value'></el-option>
                </el-select>
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='大钩上升下移过程中未到达最高/最低点位置时突变预警监测阈值'
                        placement='top-start'>
              <el-form-item label='大钩变化阈值(米 m)' style='margin-top: -10px' label-width='200px'>
                <el-input v-model='form.hkhRang' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row v-if="warnType == 'by'">
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='泵冲报警阈值' placement='top-start'>
              <el-form-item label='钻进/循环泵冲阈值(%)' style='margin-top: 10px' label-width='200px'>
                <el-input v-model='form.loopDrillingPump' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='钻压报警阈值' placement='top-start'>
              <el-form-item label='钻进/循环泵压阈值(%)' style='margin-top: -10px' label-width='200px'>
                <el-input v-model='form.loopDrillingSpp' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row v-if="warnType == 'nj'">
          <!-- <el-col :span="12">
            <el-tooltip class="item" effect="dark" content="距离当前点井深一米的最新的一点的扭矩值" placement="top-start">
              <el-form-item label="扭矩上一点井深(米 m)" style="margin-top: 10px"
                ><el-input v-model="form.torquepreviousjs"
              /></el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <el-tooltip
              class="item"
              effect="dark"
              content="计算波动幅度,当前点减去取值时间的时间范围之内的所有点数据的波动幅度(最大值-最小值)"
              placement="top-start"
            >
              <el-form-item label="波动取值时间范围(秒)" style="margin-top: 10px"
                ><el-input v-model="form.torguetimes"
              /></el-form-item>
            </el-tooltip>
          </el-col> -->
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='扭矩变化量报警阈值' placement='top-start'>
              <el-form-item label='扭矩变化量阈值(千牛 KN)' style='margin-top: 10px' label-width='200px'>
                <el-input v-model='form.torgueVariationThreshold' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='扭矩波动报警阈值' placement='top-start'>
              <el-form-item label='扭矩波动阈值(千牛 KN)' style='margin-top: -10px' label-width='200px'>
                <el-input v-model='form.torgueWaveThreshold' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row v-if="warnType == 'jl'">
          <el-col :span='24'>
            <el-tooltip class='item' effect='dark' content='距离下降起点总池体积差值超过该阈值报警'
                        placement='top-start'>
              <el-form-item label='总池体积报警阈值(立方米 m³)' style='margin-top: 10px' label-width='200px'>
                <el-input v-model='form.warnPittotal' size='mini' />
              </el-form-item>
            </el-tooltip>
          </el-col>
        </el-row>
        <!--      <el-form-item>
                <el-button type='primary' @click='submit' size='mini' plain>保存</el-button>
              </el-form-item>-->
        <el-row v-if="warnType == 'gkcs'">
          <el-col :span='24'>
            <!--            <div style="display: flex;flex-direction: column;height: 500px;width: 100%;overflow: scroll">-->

            <!--            -->
            <!--            </div>-->
            <el-form-item label='到达地面阈值 ' label-width='200px'>
              <el-input v-model='gkcsObj.approachingSurface' size='mini' />
            </el-form-item>
            <el-form-item label='坐卡阈值' label-width='200px'>
              <el-input v-model='gkcsObj.woh' size='mini' />
            </el-form-item>
            <el-form-item label=' 在井底阈值 ' label-width='200px'>
              <el-input v-model='gkcsObj.onBottom ' size='mini' />
            </el-form-item>
            <el-form-item label='停转阈值' label-width='200px'>
              <el-input v-model='gkcsObj.isRotationOff' size='mini' disabled/>
            </el-form-item>
            <el-form-item label='游车静止阈值' label-width='200px'>
              <el-input v-model='gkcsObj.blockldle ' size='mini' disabled/>
            </el-form-item>
            <el-form-item label='停泵阈值' label-width='200px'>
              <el-input v-model='gkcsObj.noFlow ' size='mini' disabled/>
            </el-form-item>
            <el-form-item label='立压为0阈值  ' label-width='200px'>
              <el-input v-model='gkcsObj.pressureZero ' size='mini' />
            </el-form-item>
            <el-form-item label='钻头上行阈值 ' label-width='200px'>
              <el-input v-model='gkcsObj.bitMovingUp ' size='mini' disabled/>
            </el-form-item>
            <el-form-item label=' 游车上行阈值 ' label-width='200px'>
              <el-input v-model='gkcsObj.blockMovingUp  ' size='mini' disabled/>
            </el-form-item>
            <el-form-item label='离开井底阈值 ' label-width='200px'>
              <el-input v-model='gkcsObj.farBottom  ' size='mini' disabled/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <!--    <a-form :model="form" :labelCol="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="钻头监测阈值(米 m)">
          <a-input v-model="form.bitdepth"></a-input>
        </a-form-item>
        <a-form-item label="报警阈值(千牛 KN)">
          <a-input v-model="form.warnValue"></a-input>
        </a-form-item>
        <a-form-item label="钻杆重量(吨 t)">
          <a-input v-model="form.columnWeight"></a-input>
        </a-form-item>
        <a-form-item label="大钩变化阈值(米 m)">
          <a-input v-model="form.hkhRang"></a-input>
        </a-form-item>
        <a-form-item label="钻进/循环泵冲阈值(%)">
          <a-input v-model="form.loopDrillingPump"></a-input>
        </a-form-item>
        <a-form-item label="钻进/循环力压阈值(%)">
          <a-input v-model="form.loopDrillingSpp"></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="submit">提交</a-button>
        </a-form-item>
      </a-form>-->

    </a-spin>
    <div style='position: absolute;bottom: 25px;right: 10px'>
      <el-button type='success' @click='submit' size='mini' plain>更新 && 重新计算</el-button>
      <el-button type='primary' @click='submit' size='mini' plain>更新 && 持续计算</el-button>
      <el-button type='info' @click='close()' size='mini' plain>关闭配置页签</el-button>
    </div>
  </div>
</template>

<script>
import newWarnApi from '@/api/newWarnApi'
import vue from 'vue'

export default {
  name: 'Mode',
  props: {
    warnType: {
      type: String,
      default: 'qxz'
    }
  },
  data() {
    return {
      wellConfig: {},
      formLoading: {
        visible: false,
        tip: '正在加载...',
        spinIcon: 'loading'
      },
      columnWeightOptions: [
        {
          value: 7.73,
          label: '5英寸钻杆(7.73 千牛 KN)'
        },
        {
          value: 9.73,
          label: '5.5英寸钻杆(9.73 千牛 KN)'
        }
      ],
      form: {
        id: '',
        jh: '',
        bitdepth: '',
        columnWeight: '',
        warnValue: '',
        hkhRang: ''
      },
      query: {
        jh: ''
      },
      realFields: [],
      jh: undefined,
      gkcsObj: {
        'id': '',
        'jh': '',
        'approachingSurface': null,
        'woh': null,
        'onBottom': null,
        'isRotationOff': null,
        'blockldle': null,
        'noFlow': null,
        'pressureZero': null,
        'bitMovingUp': null,
        'blockMovingUp': null,
        'farBottom': null
      }
    }
  },
  created() {
    this.query.jh = vue.ls.get('TOPLEFT_JH_SELECTED').JH
    // this.query.jh = this.jh
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {

      this.formLoading.visible = true

      if (this.warnType === 'gkcs') {
        newWarnApi.getOperatingCondition(this.query).then((res) => {
          if (res.result != null) {
            this.gkcsObj = res.result
          }
        }).finally(() => {
          this.formLoading.visible = false
        })
      } else {
        newWarnApi.getWorkCondition(this.query).then(res => {
          console.log('参数数据', res)
          if (res.result != null) {
            this.form = res.result
          }
        }).finally(() => {
          this.formLoading.visible = false

        })
      }

    },
    submit() {
      console.log(this.form)
      if (this.form.jh == 0) {
        this.form.jh = this.query.jh
        this.form.id = ''
      }
      console.log(this.form)
      this.formLoading.visible = true

      if (this.warnType === 'gkcs') {
        newWarnApi.setOperatingCondition(this.gkcsObj).then(res => {
          this.init()
        }).finally(() => {
            this.formLoading.visible = false
          })
      } else {
        newWarnApi.saveWorkCondition(this.form).then(res => {
          console.log(res)
          this.init()
        }).finally(() => {
          this.formLoading.visible = false
        })
      }

    },
    close() {
      this.$emit('close', true)
    }
  }
}
</script>

<style scoped>
.page {
  width: 100%;
  font-size: 12px;
}

.ant-form {
  font-size: 12px;
}

.ant-form label {
  font-size: 12px;
  line-height: 24px;
}

.ant-select {
  font-size: 12px;
}

.group-box {
  border: 1px solid #e8e8e8;
  position: relative;
  margin-top: 15px;
  padding: 15px 0 10px 5px;
}

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

.input-lable {
  display: inline-block;
  width: 70px;
  text-align: right;
}

.el-form-item {
  margin-bottom: 2px;
}
</style>
