<template>
  <div class="hum-page-container">
    <el-form :model="form" :rules="rules" size="large" ref="form" label-position="top">
      <div class="hum-page-title">测流设置</div>
      <div class="hum-page-form">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="设备类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择设备类型" clearable>
                <el-option
                  v-for="option in typeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行驶速度" prop="speed">
              <el-select v-model="form.speed" placeholder="请选择行驶速度" clearable>
                <el-option
                  v-for="option in speedOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="左岸右岸标识" prop="local">
              <el-select v-model="form.local" placeholder="请选择左岸右岸标识" clearable>
                <el-option
                  v-for="option in localOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小车位置的偏移量" prop="offset">
              <el-input
                v-model="form.offset"
                placeholder="请输入小车位置的偏移量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小车测流停泊时间（s）" prop="stoptime">
              <el-input
                v-model="form.stoptime"
                placeholder="请输入小车测流停泊时间（s）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="测流最低水位" prop="wlevelmin">
              <el-input
                v-model="form.wlevelmin"
                placeholder="请输入测流最低水位"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="测流最高水位" prop="wlevelmax">
              <el-input
                v-model="form.wlevelmax"
                placeholder="请输入测流最高水位"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="测流低电量保护（百分比）" prop="eqmin">
              <el-input
                v-model="form.eqmin"
                placeholder="请输入测流低电量保护（百分比）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位采集时间间隔" prop="wltime">
              <el-input
                v-model="form.wltime"
                placeholder="请输入水位采集时间间隔"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位基值" prop="wbaselevel">
              <el-input
                v-model="form.wbaselevel"
                placeholder="请输入水位基值"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="hum-page-title" style="margin-top: 30px">水位计设置</div>
      <div class="hum-page-form">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="水位计485丛机地址" prop="wladdr">
              <el-input
                v-model="form.wladdr"
                placeholder="请输入水位计485丛机地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位计数据类型" prop="wltype">
              <el-select v-model="form.wltype" placeholder="请选择水位计数据类型" clearable>
                <el-option
                  v-for="option in dataTypeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位计存储首地址" prop="wlfirstadd">
              <el-input
                v-model="form.wlfirstadd"
                placeholder="请输入水位计存储首地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位计缩放精度" prop="wlzoom">
              <el-input
                v-model="form.wlzoom"
                placeholder="请输入水位计缩放精度"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位计数据长度" prop="wllength">
              <el-input
                v-model="form.wllength"
                placeholder="请输入水位计数据长度"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位计度量单位" prop="wlunit">
              <el-select v-model="form.wlunit" placeholder="请选择水位计度量单位" clearable>
                <el-option
                  v-for="option in unitOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位计偏移量" prop="wloffset">
              <el-input
                v-model="form.wloffset"
                placeholder="请输入水位计偏移量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水位修正系数" prop="wlfactor">
              <el-input
                v-model="form.wlfactor"
                placeholder="请输入水位修正系数"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="hum-page-title" style="margin-top: 30px">流速仪设置</div>
      <div class="hum-page-form">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="流速仪485丛机地址" prop="wsaddr">
              <el-input
                v-model="form.wsaddr"
                placeholder="请输入流速仪485丛机地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速仪数据类型" prop="wstype">
              <el-select v-model="form.wstype" placeholder="请选择流速仪数据类型" clearable>
                <el-option
                  v-for="option in dataTypeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速仪存储首地址" prop="wsfirstadd">
              <el-input
                v-model="form.wsfirstadd"
                placeholder="请输入流速仪存储首地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速仪缩放精度" prop="wszoom">
              <el-input
                v-model="form.wszoom"
                placeholder="请输入流速仪缩放精度"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速仪数据长度" prop="wslength">
              <el-input
                v-model="form.wslength"
                placeholder="请输入流速仪数据长度"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速仪度量单位" prop="wsunit">
              <el-select v-model="form.wsunit" placeholder="请选择流速仪度量单位" clearable>
                <el-option
                  v-for="option in unitOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速仪偏移量" prop="wsoffset">
              <el-input
                v-model="form.wsoffset"
                placeholder="请输入流速仪偏移量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="流速修正系数" prop="wsfactor">
              <el-input
                v-model="form.wsfactor"
                placeholder="请输入流速修正系数"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="hum-page-form-action">
        <el-button @click="$router.back()">取消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getSite, getConfig, addConfig, updateConfig } from '@/api/site/site'

export default {
  data() {
    return {
      id: 0,
      site: {},
      isAdd: true,
      loading: false,
      form: {
        type: '',
        speed: '',
        local: '',
        offset: '',
        stoptime: '',
        wlevelmin: '',
        wlevelmax: '',
        eqmin: '',
        wltime: '',
        wbaselevel: '',
        wladdr: '',
        wltype: '',
        wlfirstadd: '',
        wlzoom: '',
        wllength: '',
        wlunit: '',
        wloffset: '',
        wlfactor: '',
        wsaddr: '',
        wstype: '',
        wsfirstadd: '',
        wszoom: '',
        wslength: '',
        wsunit: '',
        wsoffset: '',
        wsfactor: '',
      },
      rules: {
        type: [
          { required: true, message: "设备类型不能为空", trigger: "change" }
        ],
        speed: [
          { required: true, message: "行驶速度不能为空", trigger: "change" }
        ],
        local: [
          { required: true, message: "左岸右岸标识不能为空", trigger: "change" }
        ],
        offset: [
          { required: true, message: "小车位置的偏移量不能为空", trigger: "blur" }
        ],
        stoptime: [
          { required: true, message: "小车测流停泊时间不能为空", trigger: "blur" }
        ],
        wlevelmin: [
          { required: true, message: "测流最低水位不能为空", trigger: "blur" }
        ],
        wlevelmax: [
          { required: true, message: "测流最低高位不能为空", trigger: "blur" }
        ],
        eqmin: [
          { required: true, message: "测流低电量保护不能为空", trigger: "blur" }
        ],
        wltime: [
          { required: true, message: "水位采集时间间隔不能为空", trigger: "blur" }
        ],
        wbaselevel: [
          { required: true, message: "水位基值不能为空", trigger: "blur" }
        ],
        wladdr: [
          { required: true, message: "水位计485丛机地址不能为空", trigger: "blur" }
        ],
        wltype: [
          { required: true, message: "水位计数据类型不能为空", trigger: "change" }
        ],
        wlfirstadd: [
          { required: true, message: "水位计存储首地址不能为空", trigger: "blur" }
        ],
        wlzoom: [
          { required: true, message: "水位计缩放精度不能为空", trigger: "blur" }
        ],
        wllength: [
          { required: true, message: "水位计数据长度不能为空", trigger: "blur" }
        ],
        wlunit: [
          { required: true, message: "水位计度量单位不能为空", trigger: "change" }
        ],
        wloffset: [
          { required: true, message: "水位计偏移量不能为空", trigger: "blur" }
        ],
        wlfactor: [
          { required: true, message: "水位修正系数不能为空", trigger: "blur" }
        ],
        wsaddr: [
          { required: true, message: "流速仪485丛机地址不能为空", trigger: "blur" }
        ],
        wstype: [
          { required: true, message: "流速仪数据类型不能为空", trigger: "change" }
        ],
        wsfirstadd: [
          { required: true, message: "流速仪存储首地址不能为空", trigger: "blur" }
        ],
        wszoom: [
          { required: true, message: "流速仪缩放精度不能为空", trigger: "blur" }
        ],
        wslength: [
          { required: true, message: "流速仪数据长度不能为空", trigger: "blur" }
        ],
        wsunit: [
          { required: true, message: "流速仪度量单位不能为空", trigger: "change" }
        ],
        wsoffset: [
          { required: true, message: "流速仪偏移量不能为空", trigger: "blur" }
        ],
        wsfactor: [
          { required: true, message: "流速修正系数不能为空", trigger: "blur" }
        ],
      },
      typeOptions: [
        { value: 0, label: '移动测流' },
        { value: 1, label: '固定测流' },
      ],
      speedOptions: [
        { value: 1, label: '低' },
        { value: 2, label: '中' },
        { value: 3, label: '高' },
      ],
      localOptions: [
        { value: 0, label: '右岸' },
        { value: 1, label: '左岸' },
      ],
      dataTypeOptions: [
        { value: 0, label: 'int型' },
        { value: 1, label: 'float型' },
      ],
      unitOptions: [
        { value: 0, label: 'CM' },
        { value: 1, label: 'M' },
      ],
    }
  },
  methods: {
    loadSite() {
      getSite(this.id).then((res) => {
        this.site = { ...res.data };
      })
    },
    loadConfig() {
      getConfig(this.id).then((res) => {
        if (res.data) {
          this.isAdd = false;
          this.form = { ...res.data };
        }
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        this.loading = true;
        const data = {
          ...this.form,
          id: this.site.id,
          siteId: this.site.siteId,
        }
        const promise = this.isAdd ? addConfig(data) : updateConfig(data);
        promise.then(response => {
          this.$modal.msgSuccess(this.isAdd ? "新增成功" : "编辑成功");
          this.$router.back();
        }).finally(() => {
          this.loading = false;
        });
      });
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    if (this.id) {
      this.loadConfig();
      this.loadSite();
    }
  }
}
</script>

<style scoped>

</style>
