/* eslint-disable */
<template>
  <a-spin :spinning="formLoading.visible" :tip="formLoading.tip" class="page">
    <a-form>
      <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>
      </div>
      <div class="group-box">
        <h4>工况取值字段</h4>
        <div>
          <label class="input-lable">泵冲1</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldBc1"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
          <label class="input-lable">泵冲2</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldBc2"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
          <label class="input-lable">泵冲3</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.FieldBc3"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
        </div>
        <div style="margin-top: 10px">
          <label class="input-lable">钻头位置</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldZtwz"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
          <label class="input-lable">实测井深</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldScjs"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
          <label class="input-lable">迟到时间</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldCdsj"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
        </div>
        <div style="margin-top: 10px">
          <label class="input-lable">大钩高度</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldDggd"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
          <label class="input-lable">大钩负荷</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldDgfh"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
        </div>
        <div style="margin-top: 10px">
          <label class="input-lable">转速</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldZpzs"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
          <label class="input-lable">立压</label>
          <a-select
            :options="realFields"
            size="small"
            v-model="wellConfig.fieldLy"
            style="width: 150px; margin-left: 5px"
          >
          </a-select>
        </div>
      </div>
    </a-form>
  </a-spin>
</template>

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

export default {
  name: 'Mode',
  props: {
  },
  data () {
    return {
      wellConfig: {},
      formLoading: {
        visible: false,
        tip: '正在加载...',
        spinIcon: 'loading'
      },
      realFields: [],
      jh: undefined
    }
  },
  created () { },
  mounted () {
    this.jh = vue.ls.get('TOPLEFT_JH_SELECTED').JH
    if (!this.jh) {
      this.formLoading.visible = true
      this.formLoading.tip = '尚未选择井号'
      this.formLoading.spinIcon = 'exclamation'
    } else {
      this.loadConfig()
    }
  },
  computed: {},
  watch: {
  },
  activated () {
    this.loadConfig()
  },
  methods: {
    loadConfig () {
      this.realFields = warningFuncs.realFields()
      this.formLoading.visible = true
      warnApi.getWellOwnSingle({ jh: this.jh })
        .then(res => {
          this.wellConfig = JSON.parse(res.result.template)

          this.formLoading.visible = false
        }).catch(e => {
          this.formLoading.visible = false
        })
    },
    save () {
      warnApi.saveWellEngineerTemplate({ jh: this.jh, largeText: JSON.stringify(this.wellConfig) })
        .then(res => {
          this.$message.success('工程预警模型配置已保存')
        }).catch(e => {
          this.$message.error('保存失败')
        })
    }
  }
}
</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;
}
</style>
