/*eslint-disable*/
<template>
  <a-spin :spinning="formLoading.visible" :tip="formLoading.tip" class="page">
    <a-icon slot="indicator" :type="formLoading.spinIcon" :spin="jh" />
    <a-form layout="inline">
      <div style="width: 100%; height: 35px">
        <label style="float: left">井号：{{ jh }}</label>
        <a-button @click="save" size="small" style="width: 75px; float: right"> 保存</a-button>

        <a-button @click="resetDefault" size="small" style="width: 120px; float: right;margin-right: 10px"> 恢复默认
        </a-button>
        <a-button v-if="!iframeCheck" @click="saveDefault" size="small"
                  style="width: 100px; float: right;margin-right: 10px"> 更改默认
        </a-button>
        <a-button v-if="!iframeCheck" @click="recoveryDefault" size="small"
                  style="width: 120px; float: right;margin-right: 10px"> 恢复初始化
        </a-button>

        <a-modal
          title="恢复初始化"
          :visible="recoveryDefaultVisible"
          @ok="recoveryDefaultOk"
          @cancel="recoveryDefaultCancel"
        >
          <p>您确定恢复初始化吗?</p>
        </a-modal>

        <a-modal
          title="保存默认"
          :visible="saveDefaultVisible"
          @ok="saveDefaultOk"
          @cancel="saveDefaultCancel"
        >
          <p>您确定更改默认数据吗?</p>
        </a-modal>

      </div>
      <div style="width: 100%">
        <label style="margin-left: 5px">异常：</label>
        <a-select v-model="selectedAlarmTypeIndex" size="small" style="width: 120px" @change="handleAlarmTypeChange">
          <a-select-option v-for="(item, index) in wellConfig.AlarmTypeList" :key="index" :value="index">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-checkbox style="margin-left: 5px" v-model="selectedAlarmType.isEnable"> 启用此配置</a-checkbox>
        <label style="margin-left: 20px">预警发生时的工况：</label>
        <a-checkbox v-model="drillState.fdTrip" @change="drillStateChange(4)"> 起钻</a-checkbox>
        <a-checkbox v-model="drillState.fdDrillDown" @change="drillStateChange(8)"> 下钻</a-checkbox>
        <a-checkbox v-model="drillState.fdDrilling" @change="drillStateChange(1)"> 钻进</a-checkbox>
        <a-checkbox v-model="drillState.fdCirculate" @change="drillStateChange(2)"> 循环</a-checkbox>
        <a-checkbox v-model="drillState.fdTakePipe" @change="drillStateChange(32)"> 坐卡</a-checkbox>
        <a-checkbox v-model="drillState.fdClearHole" @change="drillStateChange(64)"> 划眼</a-checkbox>
        <a-checkbox v-model="drillState.fdStop" @change="drillStateChange(16)"> 停钻</a-checkbox>
        <div style="display: flex;justify-content: flex-start;align-items: center;margin-left: 190px;margin-top: 8px">
          报警图标颜色：
          <!--          <el-color-picker v-model="selectedAlarmType.curveColor" @change="getColor"></el-color-picker>-->
          <colorPicker v-model="selectedAlarmType.curveColor"
                       style="width: 100px;border: 1px solid #d9d9d9;padding: 5px;border-radius:4px;" />
        </div>

      </div>
      <div class="content">
        <div class="left">
          <div class="options-list">
            <h4>参数列表</h4>
            <a-radio-group v-model="selectedFieldIndex" @change="onFieldChange">
              <a-radio
                v-for="(item, index) in selectedAlarmType.FieldRules"
                :key="index"
                :style="radioStyle"
                :value="index"
              >
                {{ item.name }}
              </a-radio>
            </a-radio-group>
          </div>
          <a-popconfirm placement="top" ok-text="确认" cancel-text="取消" @confirm="addParam">
            <template slot="title">
              <p>请输入参数名称:</p>
              <p>
                <a-input v-model="newParamName"></a-input>
              </p>
            </template>
            <a-button size="small" style="width: 85px; margin-top: 10px"> 添加参数</a-button>
          </a-popconfirm>
          <a-popconfirm placement="top" title="确认删除吗?" ok-text="确认" cancel-text="取消" @confirm="delParam">
            <a-button type="danger" size="small" style="width: 85px; margin-left: 10px; margin-top: 10px">
              删除参数
            </a-button>
          </a-popconfirm>
        </div>
        <div class="right">
          <h4>参数设置</h4>
          <div class="first">
            <div class="first-item">
              <label>条件名称</label>
              <a-checkbox v-model="selectedField.Continue" style="margin-top: 10px"> 低于正常值</a-checkbox>
            </div>
            <div class="first-item">
              <a-input v-model="selectedField.name" style="width: 100px" size="small"></a-input>
              <div>
                <a-input-number
                  v-model="selectedField.continueValue"
                  style="width: 100px; margin-top: 10px"
                  size="small"
                  value="0.250"
                />
                <label style="margin-left: 5px"> 判断正常 </label>
              </div>
            </div>
            <div class="first-item" style="flex: 1;margin-left: 5px">
              <div>
                <label>对应字段</label>
                <a-select
                  v-model="selectedField.realField"
                  size="small"
                  style="width: 120px; margin-left: 5px"
                  :options="realFields"
                  @change="handleChange"
                  :dropdownMatchSelectWidth="false"
                  :dropdownStyle="{ width: '160px'}"
                >
                </a-select>
              </div>
              <div style="margin-top: 10px">
                <label> 曲线颜色</label>
                <a-input value="#000000" type="color" style="width: 120px; margin-left: 5px" size="small"></a-input>
              </div>
            </div>
            <div class="first-item" style="margin-left: 5px">
              <div class="radio-list">
                <h4>参与条件</h4>
                <a-radio-group v-model="selectedField.fieldHandleType">
                  <a-radio :value="1"> 与</a-radio>
                  <a-radio :value="2"> 或</a-radio>
                </a-radio-group>
                <label style="margin-left: 5px; margin-right: 5px"> 分组编号 </label>
                <a-input style="width: 50px" size="small" v-model="selectedField.fzNum"></a-input>
              </div>
              <a-checkbox v-model="selectedField.fieldUseable" style="margin-top: 8px"> 字段是否有效</a-checkbox>
            </div>
          </div>
          <div class="group-box">
            <h4>时间参数</h4>
            <div>
              <lable class="time-lable">监控时间</lable>
              <a-input-number style="width: 100px" size="small" v-model="selectedField.monitorTime"></a-input-number>
              <lable style="margin-left: 5px">秒</lable>
              <lable style="margin-left: 15px">
                提示:监控时间用于选择参考点的位置，取参考值的时间(当前时间-监控时间)
              </lable>
            </div>
            <div style="margin-top: 5px">
              <lable class="time-lable">异常持续时间</lable>
              <a-input style="width: 100px" size="small" v-model="selectedField.continuedTime"></a-input>
              <lable style="margin-left: 5px">秒</lable>
              <lable style="margin-left: 15px"> 提示:超出了异常持续时间参数生效，此时间设置要小于监控时间</lable>
            </div>
          </div>
          <div class="group-box">
            <h4>分析条件设置（设置要与时间参数联用）</h4>
            <div style="padding: 5px 0">
              <a-radio-group name="radioGroup1" v-model="selectedField.analyseType" @change="onChange">
                <a-radio :style="radioStyle" :value="1">
                  按门限设置

                  <lable class="input-lable" style="">超出区间</lable>
                  <a-input-number style="width: 100px; margin-left: 5px" size="small"
                                  :value="selectedField.minTotalNum"
                                  :disabled="selectedField.preconditions"
                                  @change="(val)=>{this.$set(this.selectedField, 'minTotalNum', val)}" />
                  <lable style="margin-left: 5px">-</lable>
                  <a-input-number style="width: 100px; margin-left: 5px" size="small"
                                  :value="selectedField.maxTotalNum"
                                  :disabled="selectedField.preconditions"
                                  @change="(val)=>{this.$set(this.selectedField, 'maxTotalNum', val)}" />
                  <lable style="margin-left: 5px">{{ this.unitName }}</lable>
                </a-radio>
                <div style="display: flex;flex-direction: column;padding-left: 8px;font-size: 12px">
                  <div
                    style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-bottom: 4px">
                    <div style="display: flex;flex-direction: row;align-items: center;font-weight: bold">
                      <el-checkbox v-model="selectedField.preconditions"
                                   @change="onPreCondiChange"
                                   style="margin-right: 4px">
                      </el-checkbox>
                      前置条件
                    </div>
                    <div style="margin-left: 8px;font-weight: bold">
                      <label>字段:</label>
                      <a-select
                        :disabled="!selectedField.preconditions"
                        v-model="selectedField.preconditionsField"
                        size="small"
                        style="width: 115px; margin-left: 5px"
                        :options="realFields"
                        @change="handleFieldChange"
                      ></a-select>
                    </div>
                    <div style="margin-left: 20px;font-weight: bold">判断规则：</div>
                  </div>
                  <!--                  <a-table-->
                  <!--                    style="margin-top: 8px"-->
                  <!--                    size="middle"-->
                  <!--                    bordered-->
                  <!--                    rowKey="userId"-->
                  <!--                    :columns="columns"-->
                  <!--                    :pagination="false"-->
                  <!--                    v-if="false"-->
                  <!--                    :dataSource="selectedField.doorList">-->

                  <!--                    <span slot="range" slot-scope="text, record, index">-->
                  <!--                        <div>-->
                  <!--                          <el-button type="danger" icon="el-icon-delete" size="mini"-->
                  <!--                                     style="margin-right: 8px" @click="delRule(index)"></el-button>-->
                  <!--                          <el-input v-model="record.preconditionMin" placeholder="请输入" size="mini"-->
                  <!--                                    :disabled="rangeDisable"-->
                  <!--                                    style="width: 64px;padding: 0"></el-input>-->
                  <!-- -                         <el-input v-model="record.preconditionMax" placeholder="请输入" size="mini"-->
                  <!--                                    :disabled="rangeDisable"-->
                  <!--                                    style="width: 64px;padding: 0"></el-input>-->
                  <!--                          <span v-text="targetUnit" style="margin-left: 4px;font-size: 12px"></span>-->
                  <!--                        </div>-->
                  <!--                    </span>-->
                  <!--                    <span slot="outRange" slot-scope="text, record">-->
                  <!--                      <el-input v-model="record.ruleMax" placeholder="请输入" size="mini"-->
                  <!--                                style="width: 64px;padding: 0"></el-input>-->
                  <!-- -                         <el-input v-model="record.ruleMin" placeholder="请输入" size="mini"-->
                  <!--                                    style="width: 64px;padding: 0"></el-input>-->
                  <!--                          <span v-text="unitName" style="margin-left: 4px;font-size: 12px"></span>-->
                  <!--                    </span>-->
                  <!--                    <span slot="absIncrease" slot-scope="text, record">-->
                  <!--                      <el-checkbox v-model="record.isAmplification" style="margin-right: 4px"></el-checkbox>-->
                  <!--                      <el-input v-model="record.amplification" placeholder="请输入" size="mini"-->
                  <!--                                style="width: 64px;padding: 0"></el-input>-->
                  <!--                      <span v-text="unitName" style="margin-left: 4px;font-size: 12px"></span>-->
                  <!--                    </span>-->
                  <!--                    <span slot="perIncrease" slot-scope="text, record">-->
                  <!--                      <el-checkbox v-model="record.isPercentage" style="margin-right: 4px"></el-checkbox>-->

                  <!--                      <el-input v-model="record.percentage" placeholder="请输入" size="mini"-->
                  <!--                                style="width: 56px;padding: 0"></el-input> %-->
                  <!--                    </span>-->
                  <!--                  </a-table>-->
                  <div v-for="(item,index) in selectedField.doorList"
                       style="display: flex;flex-direction: row;align-items: center;font-size: 12px">
                    <div style="display: flex;flex-direction: row;align-items: center;width: 230px">
                      <a :disabled="!selectedField.preconditions"
                         style="width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;"
                         @click="newRule">
                        <i class="el-icon-circle-plus-outline" style="color: #0076db;font-size: 18px"></i>
                      </a>

                      <a :disabled="!selectedField.preconditions"
                         style="margin-right: 4px;width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;"
                         @click="delRule(index)">
                        <i class="el-icon-remove-outline" style="color: red;font-size: 18px"></i>
                      </a>
                      区间：
                      <!--                      <el-button type="danger" icon="el-icon-delete" size="mini"-->
                      <!--                                 style="margin-right: 8px;width: 20px;padding: 12px" @click="delRule(index)"></el-button>-->

                      <el-input v-model="item.preconditionMin" placeholder="请输入" size="mini"
                                :disabled="!selectedField.preconditions" onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                                style="width: 36px;padding: 0"></el-input>
                      -
                      <el-input v-model="item.preconditionMax" placeholder="请输入" size="mini"
                                :disabled="!selectedField.preconditions" onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                                style="width: 40px;padding: 0"></el-input>
                      <span v-text="targetUnit" style="margin-left: 4px;font-size: 12px"></span>
                    </div>
                    <div
                      style="display: flex;flex-direction: row;align-items: center;margin-right: 10px;margin-left: 10px">
                      超出区间：
                      <el-input v-model="item.ruleMin" placeholder="请输入" size="mini" style="width: 36px;padding: 0"
                                onkeyup="value=value.replace(/[^\d||/.]/g,'')"></el-input>
                      -
                      <el-input v-model="item.ruleMax" placeholder="请输入" size="mini" style="width: 36px;padding: 0"
                                onkeyup="value=value.replace(/[^\d||/.]/g,'')"></el-input>
                      <span v-text="unitName" style="margin-left: 4px;font-size: 12px"></span>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center;margin-right: 10px">
                      <el-checkbox v-model="item.isAmplification" style="margin-right: 4px;"></el-checkbox>
                      绝对增幅：
                      <el-input v-model="item.amplification" placeholder="请输入" size="mini"
                                onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                                style="width: 36px;padding: 0"></el-input>
                      <span v-text="unitName" style="margin-left: 4px;font-size: 12px"></span>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center;">
                      <el-checkbox v-model="item.isPercentage" style="margin-right: 4px;"></el-checkbox>
                      百分比增幅：
                      <el-input v-model="item.percentage" placeholder="请输入" size="mini"
                                onkeyup="value=value.replace(/[^\d||/.]/g,'')"

                                style="width: 28px;padding: 0"></el-input>
                      %
                    </div>
                  </div>

                  <!--                  <el-button type="primary" style="margin-top: 4px;width: 230px" @click="newRule">新建条件和规则</el-button>-->


                </div>
                <a-radio :style="radioStyle" :value="2">
                  按振幅设置
                  <lable class="input-lable" style="">震荡次数大于</lable>
                  <a-input-number style="width: 100px; margin-left: 5px" size="small"
                                  :value="selectedField.zdCount"
                                  @change="(val)=>{this.$set(this.selectedField, 'zdCount', val)}" />
                  <lable style="margin-left: 5px">次</lable>
                </a-radio>
                <a-radio :style="radioStyle" :value="8">
                  按波动范围
                  <lable class="input-lable" style="">小于</lable>
                  <a-input-number style="width: 100px; margin-left: 5px" size="small"
                                  :value="selectedField.bdLtValue"
                                  @change="(val)=>{this.$set(this.selectedField, 'bdLtValue', val)}" />
                  <lable style="margin-left: 5px">{{ this.unitName }}</lable>
                </a-radio>
              </a-radio-group>
            </div>
            <div style="display: flex">
              <div>
                <a-radio-group name="radioGroup1" v-model="selectedField.analyseType" @change="onChange">
                  <a-radio :value="4" style="display: block" selected="true"> 趋势判别法</a-radio>
                </a-radio-group>
                <label>趋势类型</label>
                <a-select size="small" v-model="selectedField.trendType" style="width: 100px; margin-left: 5px">
                  <a-select-option :value="1">上升</a-select-option>
                  <a-select-option :value="2"> 平稳</a-select-option>
                  <a-select-option :value="4"> 下降</a-select-option>
                </a-select>
              </div>
              <div style="margin-left: 10px" class="group-box">
                <h4>趋势参数</h4>
                <div style="width: 570px">
                  <a-radio-group v-model="selectedField.trendTypeParam">
                    <a-radio :value="1"> 按总量</a-radio>
                    <a-radio :value="2"> 按倍数（适用于气测异常）</a-radio>
                  </a-radio-group>
                  <a-checkbox v-model="selectedField.pchx"> 排除</a-checkbox>
                  <a-input style="width: 50px" size="small" v-model="selectedField.pchxTime" />
                  <label>分钟后效气体</label>
                </div>
                <label>总量</label>
                <a-input-number style="width: 100px; margin-left: 5px" size="small" v-model="selectedField.TotalNum" />
                <label>{{ ' ' + this.unitName + '&#12288;从' }}</label>
                <a-input-number
                  style="width: 100px; margin-left: 5px"
                  size="small"
                  v-model="selectedField.beginValue"
                />
                <label style="margin-left: 5px">至</label>
                <a-input-number style="width: 100px; margin-left: 5px" size="small" v-model="selectedField.endValue" />
                <label style="margin-left: 5px">大于</label>
                <a-input-number style="width: 100px; margin-left: 5px" size="small" v-model="selectedField.mul" />
                <label style="margin-left: 5px">倍</label>
              </div>
            </div>
          </div>
          <div class="group-box">
            <h4>受开停泵影响的参数，误报处理设置</h4>
            <div style="width: 100%">
              <a-checkbox v-model="selectedField.isPumpRunJump"> 开泵</a-checkbox>
              <a-input-number style="width: 50px" size="small" v-model="selectedField.isPumpRunJumpTime" />
              <label style="margin-left: 5px">秒出现异常不报警</label>
              <a-checkbox v-model="selectedField.isPumpStopJump" style="margin-left: 25px"> 停泵</a-checkbox>
              <a-input-number style="width: 50px" size="small" v-model="selectedField.isPumpStopJumpTime" />
              <label style="margin-left: 5px">秒出现异常不报警</label>
            </div>
            <div style="width: 100%; padding: 5px 30px; text-align: left">
              <label>提示:开泵停泵的时间要&lt;时间参数的异常持续时间</label>
            </div>
          </div>
        </div>
      </div>
    </a-form>
  </a-spin>
</template>

<script>
import warnApi from '@/api/warnApi'
import warningFuncs from './sub/warningFuncs'
import vue from 'vue'

/*eslint-disable*/
export default {
  name: 'warning',
  data() {
    return {
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      formLoading: {
        visible: false,
        tip: '正在加载...',
        spinIcon: 'loading'
      },
      wellConfig: {},
      selectedAlarmTypeIndex: 0,
      selectedAlarmType: {},
      selectedFieldIndex: 0,
      selectedField: {},
      recoveryDefaultVisible: false,
      saveDefaultVisible: false,
      drillState: {
        fdTrip: false,
        fdDrillDown: false,
        fdDrilling: false,
        fdCirculate: false,
        fdTakePipe: false,
        fdClearHole: false,
        fdStop: false
      },
      realFields: [],
      jh: undefined,
      newParamName: '',
      unitName: '',
      curveColor: '',
      targetUnit: '',
      columns: [
        {
          title: '区间',
          align: 'center',
          width: 260,
          scopedSlots: { customRender: 'range' }
        },
        {
          title: '超出区间',
          align: 'center',
          width: 220,
          scopedSlots: { customRender: 'outRange' }
        },
        {
          title: '绝对增幅',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'absIncrease' }
        },
        {
          title: '百分比增幅',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'perIncrease' }
        }
      ],
      dataSource: [],
      rangeDisable: false,
      frameCheck: process.env.VUE_APP_IFRAME_CHECK
    }
  },
  props: {
    newJH: {
      required: false,
      type: String,
      default: ''
    }
  },
  methods: {
    pickDrillState(alarmType) {
      let flag = 0
      if (alarmType !== null) {
        flag = alarmType.drillState
      }
      this.drillState.fdCirculate = (flag & 2) === 2
      this.drillState.fdDrilling = (flag & 1) === 1
      this.drillState.fdTrip = (flag & 4) === 4
      this.drillState.fdDrillDown = (flag & 8) === 8
      this.drillState.fdTakePipe = (flag & 32) === 32
      this.drillState.fdClearHole = (flag & 64) === 64
      this.drillState.fdStop = (flag & 16) === 16
    },
    setDrillStateNum() {

    },
    loadConfig() {
      this.formLoading.visible = true
      warnApi.getWellOwnSingle({ jh: this.jh })
        .then(res => {
          this.wellConfig = JSON.parse(res.result.template)
          const al = this.wellConfig.AlarmTypeList
          if (al.length > 0) {
            this.selectedAlarmType = al[0]
            this.pickDrillState(al[0])
            if (al[0].FieldRules.length > 0) {
              this.selectedField = al[0].FieldRules[0]
            } else {
              this.selectedField = {}
            }
          } else {
            this.selectedAlarmType = {}
            this.selectedField = {}
            this.pickDrillState(null)
          }
          // console.log("al")
          // console.log(al)
          //todo 屏蔽部分AlarmTypeList
          let list = []
          this.wellConfig.AlarmTypeList.forEach((item, i) => {
            if (i <= 3) {
              list.push(item)
            }
          })
          this.wellConfig.AlarmTypeList = list
          this.formLoading.visible = false
          this.initUnit(this.selectedField.realField)
          // todo 迁移数据
          if (this.selectedField.doorList.length === 0) {
            this.selectedField.doorList.push({
              amplification: 0,
              isAmplification: false,
              isPercentage: false,
              percentage: 0,
              preconditionMax: 0,
              preconditionMin: 0,
              ruleMax: this.selectedField.maxTotalNum,
              ruleMin: this.selectedField.minTotalNum
            })
          }
        }).catch(e => {
        this.formLoading.visible = false
      })
    },
    handleAlarmTypeChange(e, opts) {
      this.selectedAlarmType = this.wellConfig.AlarmTypeList[this.selectedAlarmTypeIndex]
      this.pickDrillState(this.selectedAlarmType)
      if (this.selectedAlarmType.FieldRules.length > 0) {
        // this.selectedAlarmTypeIndex = 0
        this.selectedFieldIndex = 0
        this.selectedField = this.selectedAlarmType.FieldRules[0]
      } else {
        this.selectedFieldIndex = null
        this.selectedField = {}
      }
    },
    onFieldChange(e) {
      // load field
      this.selectedField = this.selectedAlarmType.FieldRules[this.selectedFieldIndex]
    },
    drillStateChange(num) {
      switch (num) {
        case 1:
          this.selectedAlarmType.drillState += (this.drillState.fdDrilling ? 1 : -1) * num
          break
        case 2:
          this.selectedAlarmType.drillState += (this.drillState.fdCirculate ? 1 : -1) * num
          break
        case 4:
          this.selectedAlarmType.drillState += (this.drillState.fdTrip ? 1 : -1) * num
          break
        case 8:
          this.selectedAlarmType.drillState += (this.drillState.fdDrillDown ? 1 : -1) * num
          break
        case 16:
          this.selectedAlarmType.drillState += (this.drillState.fdStop ? 1 : -1) * num
          break
        case 32:
          this.selectedAlarmType.drillState += (this.drillState.fdTakePipe ? 1 : -1) * num
          break
        case 64:
          this.selectedAlarmType.drillState += (this.drillState.fdClearHole ? 1 : -1) * num
          break
      }
    },
    save() {
      this.formLoading.visible = true
      this.formLoading.tip = '正在保存...'
      warnApi.saveWellEngineerTemplate({ jh: this.jh, largeText: JSON.stringify(this.wellConfig) })
        .then(res => {
          this.$message.success('工程预警模型配置已保存')
        }).catch(e => {
        this.$message.error('保存失败')
      }).finally(() => {
        this.formLoading.visible = false
      })
    },
    recoveryDefault() {
      this.recoveryDefaultVisible = true

    },
    recoveryDefaultOk() {
      warnApi.restoreDefault()
        .then(res => {
          this.$message.success('恢复默认数据成功')
          this.loadConfig()
        })
      this.recoveryDefaultVisible = false
    },
    recoveryDefaultCancel() {
      this.recoveryDefaultVisible = false
    },

    saveDefault() {
      this.saveDefaultVisible = true
    },
    resetDefault() {
      this.$confirm('即将恢复默认, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        warnApi.resetDefault({ jh: this.jh })
          .then(res => {
            this.$message.success('设置成功')
            this.loadConfig()
          }).catch(e => {
          this.$message.error('保存失败')
        })
      }).catch((E) => {
        console.log(E)
      })
    },
    saveDefaultOk() {
      this.saveDefaultVisible = false

      warnApi.saveWellEngineerTemplate({ jh: '默认', largeText: JSON.stringify(this.wellConfig) })
        .then(res => {
          this.$message.success('已保存')
          this.loadConfig()
        }).catch(e => {
        this.$message.error('保存失败')
      })

      // warnApi.saveDefault({
      //   modelKey: this.selectedAlarmTypeIndex,
      //   paramKey: this.selectedFieldIndex,
      //   template: JSON.stringify(this.selectedField)
      // }).then(res => {
      //   this.$message.success('已保存')
      // }).catch(e => {
      //   this.$message.error('保存失败')
      // })
    },
    saveDefaultCancel() {
      this.saveDefaultVisible = false
    },

    delParam() {
      if (this.selectedFieldIndex !== 0 && !this.selectedFieldIndex) {
        this.$message.error('请选择一个参数。')
        return
      }
      this.formLoading.visible = true
      this.formLoading.tip = '正在保存...'
      _.pullAt(this.selectedAlarmType.FieldRules, this.selectedFieldIndex)
      this.selectedAlarmType.FieldRules = [...this.selectedAlarmType.FieldRules]
      warnApi.saveWellEngineerTemplate({ jh: this.jh, largeText: JSON.stringify(this.wellConfig) })
        .then(res => {
          this.$message.success('工程预警模型配置已保存')
        }).catch(e => {
        this.$message.error('保存失败')
      }).finally(() => {
        this.formLoading.visible = false
      })
    },
    addParam() {
      if (!this.newParamName) {
        this.$message.warning('请输入参数名称')
        return
      }
      if (_.some(this.selectedAlarmType.FieldRules, p => p.name === this.newParamName)) {
        this.$message.warning(`名称${this.newParamName}已存在，请使用其他名称`)
        return
      }
      this.selectedAlarmType.FieldRules.push(warningFuncs.newFieldRule(this.newParamName))
      this.selectedFieldIndex = this.selectedAlarmType.FieldRules.length
      this.selectedField = _.last(this.selectedAlarmType.FieldRules)
    },
    handleChangex(val) {
      let unit = ''
      this.realFields.forEach((item) => {
        if (item.key === val) {
          unit = item.unit
        }
      })

      if (unit === '') {
        unit = '*单位'
      }
      this.unitName = unit
    },
    handleChangey(val) {
      let unit = ''
      this.realFields.forEach((item) => {
        if (item.key === val) {
          unit = item.unit
        }
      })

      if (unit === '') {
        unit = '*单位'
      }
      this.targetUnit = unit
    },
    initUnit(keyStr) {
      let unit = ''
      this.realFields.forEach((item) => {
        if (item.key === keyStr) {
          unit = item.unit
        }
      })

      if (unit === '') {
        unit = '*单位'
      }
      console.log(keyStr + unit)
      this.unitName = unit
    },
    getColor(val) {
      console.log(val)
      this.$set(this.selectedAlarmType, 'curveColor', val)
    },
    newRule() {
      this.selectedField.doorList.push({
        preconditionMin: 0,
        preconditionMax: 0,
        ruleMax: 0,
        ruleMin: 0,
        isAmplification: false,
        amplification: 0,
        isPercentage: false,
        percentage: 0
      })
    },
    delRule(index) {
      if (this.selectedField.doorList.length <= 1) {
        return
      }
      this.selectedField.doorList.splice(index, 1)
    },
    handleFieldChange() {
      if (this.selectedField.doorList.length > 1) {
        let cache = this.selectedField.doorList[0]
        this.selectedField.doorList = []
        this.selectedField.doorList.push(cache)
      }
    },
    onPreCondiChange(res) {
      console.log(res)
      this.rangeDisable = !res
      if (!res && this.selectedField.doorList.length > 1) {
        let cache = this.selectedField.doorList[0]
        this.selectedField.doorList = []
        this.selectedField.doorList.push(cache)
      }
    }
  },
  created() {
  },
  mounted() {
    if (this.newJH !== '' && this.newJH !== null) {
      this.jh = this.newJH
    } else {
      this.jh = vue.ls.get('TOPLEFT_JH_SELECTED').JH
    }
    console.log(this.newJH)
    if (!this.jh) {
      this.formLoading.visible = true
      this.formLoading.tip = '尚未选择井号'
      this.formLoading.spinIcon = 'exclamation'
    } else {
      this.loadConfig()
      this.realFields = warningFuncs.realFields()
    }
  },
  computed: {
    iframeCheck() {
      return process.env.VUE_APP_IFRAME_CHECK === 'TRUE'
    }
  },
  watch: {
    'selectedField.realField'(val) {
      console.log(val + 'selectedField.realField')
      this.handleChangex(val)
    },

    'selectedField.preconditionsField'(val) {
      this.handleChangey(val)
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .el-input__inner {
  padding: 0 2px;
  height: 22px;
}

.page {
  width: 100%;
  /*height: 600px;*/
  font-size: 12px;
}

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

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

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

.content {
  margin-top: 20px;
  width: 100%;
  display: flex;
}

.left {
  /*height: 100%;*/
  flex: 1;
}

.options-list {
  height: 100%;
  border: 1px solid #e8e8e8;
  position: relative;
  padding: 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;
}

.options-item {
  border: 2px solid rgba(0, 0, 0, 0.45);
  height: 100%;
  width: 100%;
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
}

.right {
  margin-left: 10px;
  border: 1px solid #e8e8e8;
  position: relative;
  padding: 20px 20px 20px 10px;
  flex: 4;
}

.first {
  width: 100%;
  display: flex;
}

.first-item {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 15px;
}

.radio-list {
  border: 1px solid #e8e8e8;
  position: relative;
  padding: 2px 5px 2px 5px;
}

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

.time-lable {
  display: inline-block;
  width: 100px;
}

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

.m-colorPicker /deep/ .colorBtn {
  width: 100%;
  height: 12px;
}


</style>
