<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      height="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="params"
        label-width="150px"
      >
        <p class="from-title">
          基础信息<i style="margin-left: 8px" class="el-icon-d-arrow-right"></i>
        </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="大坝名称：" prop="damName">
              <el-input
                size="mini"
                placeholder="请输入大坝名称"
                v-model="params.damName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="大坝代码：" prop="damCode">
              <el-input
                size="mini"
                placeholder="请输入大坝代码"
                v-model="params.damCode"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在水库：" prop="rscd">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.rscd"
                clearable
                placeholder="请选择所在水库"
              >
                <el-option
                  v-for="item in resNames"
                  :key="item.id"
                  :label="item.rsnm"
                  :value="item.rscd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>   
         <el-row>
          <el-col :span="8">
            <el-form-item label="大坝级别：" prop="damGrad">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.damGrad"
                clearable
                placeholder="请选择大坝级别"
              >
                <el-option
                  v-for="item in damGrads"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工程等级：" prop="engGrad">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.engGrad"
                clearable
                placeholder="请选择工程等级"
              >
                <el-option
                  v-for="item in prgrs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="大坝材料类型：" prop="damTypeMat">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.damTypeMat"
                clearable
                placeholder="请选择大坝材料类型"
              >
                <el-option
                  v-for="item in damTypeMats"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否主坝：" prop="ifMainDam">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.ifMainDam"
                clearable
                placeholder="请选择是否主坝"
              >
                <el-option
                  v-for="item in ifMainDams"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="大坝结构类型：" prop="damTypeStr">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.damTypeStr"
                clearable
                placeholder="请选择大坝结构类型"
              >
                <el-option
                  v-for="item in damTypeStrs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="高程系统：" prop="elevSys">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.elevSys"
                clearable
                placeholder="请选择高程系统"
              >
                <el-option
                  v-for="item in elevSyss"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="最大坝高(m)：" prop="damMaxHeig">
              <el-input
                @input="damMaxHeigs"
                size="mini"
                placeholder="请输入最大坝高"
                v-model="params.damMaxHeig"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="坝顶长度(m)：" prop="damTopLen">
              <el-input
                @input="damTopLens"
                size="mini"
                placeholder="请输入坝顶长度"
                v-model="params.damTopLen"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="坝顶宽度(m)：" prop="damTopWid">
              <el-input
                @input="damTopWids"
                size="mini"
                placeholder="请输入坝顶宽度"
                v-model="params.damTopWid"
              ></el-input>
            </el-form-item>
          </el-col>          
          <el-col :span="6">
            <el-form-item label="坝顶高程(m)：" prop="damTopElev">
              <el-input
                @input="dikeTopWidMaxs"
                size="mini"
                placeholder="请输入坝顶高程"
                v-model="params.damTopElev"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>        
        <el-form-item label="备注：" prop="note">
          <el-input
            type="textarea"
            :autosize="{minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="params.note"
          >
          </el-input>
        </el-form-item>
        <p class="from-title">
          所在位置<i style="margin-left: 8px" class="el-icon-d-arrow-right"></i>
        </p>
        <el-row>
          <el-col :span="6">
            <el-form-item label="起点经度：" prop="startLong">
              <el-input
                    @input="deadLevs('1')"
                size="mini"
                placeholder="请输入起点经度"
                v-model="params.startLong"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起点纬度：" prop="startLat">
              <el-input
                    @input="deadLevs('2')"
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入起点经度"
                v-model="params.startLat"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="终点经度：" prop="endLong">
              <el-input
                    @input="deadLevs('3')"
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入终点经度"
                v-model="params.endLong"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="终点纬度：" prop="endLat">
              <el-input
                    @input="deadLevs('4')"
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入终点纬度"
                v-model="params.endLat"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="大坝所在位置描述：" prop="damLoc">
              <el-input type="textarea"
                :autosize="{minRows: 2, maxRows: 4}"
                size="mini"
                placeholder="请输入描述"
                v-model="params.damLoc"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
          <p class="from-title">
          建设情况<i style="margin-left: 8px" class="el-icon-d-arrow-right"></i>
        </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工程建设情况：" prop="engStat">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.engStat"
                clearable
                placeholder="请选择工程建设情况"
              >
                <el-option
                  v-for="item in engStats"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开工时间：" prop="startDate">
              <el-date-picker
                style="width: 100%"
                value-format="yyyy-MM-dd"
                v-model="params.startDate"
                type="date"
                placeholder="选择开工时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建成时间：" prop="compDate">
              <el-date-picker
                style="width: 100%"
                value-format="yyyy-MM-dd"
                v-model="params.compDate"
                type="date"
                placeholder="选择建成时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import damManager from '@/api/reservoirManagement/damManager.js'
import req from '@/request.js'
import latitude from '@/mixins/latitude'
export default {
  name: 'damForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        damCode: null, //大坝代码
        damName: null, //大坝名称
        damGrad: null, //大坝级别
        damLoc: null, //大坝所在位置
        damMaxHeig: null, //最大坝高（
        damTopElev: null, //坝顶高程
        damTopLen: null, //坝顶长度
        damTopWid: null, //坝顶宽度
        damTypeMat: null, //大坝材料类型（参考字典）
        damTypeStr: null, //大坝结构类型（参考字典）
        elevSys: null, //高程系统（参考字典）
        endLat: null, //终点纬度（单位：度）
        endLong: null, //终点经度（单位：度）
        engGrad: null, //工程等别（参考字典）
        engStat: null, //工程建设情况
        ifMainDam: null, //是否主坝
        rscd: null, //水库代码
        rsnm: null, //水库名称只在列表展示使用
        startDate: null, //开工时间
        startLat: null, //起点纬度（单位：度
        startLong: null, //起点经度（单位：度）
        note: null,
      },
      prgrs: [], //工程等别（字典
      prscs: [], //工程规模（参考字典)
      damGrads: [], //大坝级别
      resNames: [],
      ifMainDams: [
        {name: '未知', value: '0'},
        {name: '是', value: '1'},
        {name: '否', value: '2'},
      ],
      damTypeMats: [],
      damTypeStrs: [],
      elevSyss: [],
      engStats: [
        {name: '在建', value: '0'},
        {name: '已建', value: '1'},
      ], //工程建设情况
      rules: {
        damName: [
          {
            required: true,
            message: '请输入大坝名称',
            trigger: 'blur',
          },
        ],
        damCode: [{required: true, message: '请输入大坝代码', trigger: 'blur'}],
        damGrad: [{required: true, message: '请选择大坝级别', trigger: 'blur'}],
        rscd: [{required: true, message: '请选择关联水库', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getSysDict()
    // 水库查询
    damManager.getResName({}, (res) => {
      this.resNames = res.value;
      if(this.title=='新增'){
        this.params.rscd=this.resNames[0].rscd;
      }
    })
  },
  methods: {
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.startLong = latitude.TreeFour(this.params.startLong)
          break
        case '2':
          this.params.startLat = latitude.TreeFour(this.params.startLat)
          break
        case '3':
          this.params.endLong = latitude.TreeFour(this.params.endLong)
          break
        default:
          this.params.endLat = latitude.TreeFour(this.params.endLat)
      }
    },
    dikeTopWidMaxs() {
      this.params.damTopElev = this.SixTwo(this.params.damTopElev)
    },
    damTopWids() {
      this.params.damTopWid = this.FiveTwo(this.params.damTopWid)
    },
    damTopLens() {
      this.params.damTopLen = this.SevenTwo(this.params.damTopLen)
    },
    damMaxHeigs() {
      this.params.damMaxHeig = this.FiveTwo(this.params.damMaxHeig)
    },
    SixTwo(value) {
      value = value.replace(/^0*(0\.|[1-3])/, '$1')
      value = value.replace(/[^\d.]/g, '') //清除"数字"和"."以外的字符
      value = value.replace(/^\./g, '') //验证第一个字符是数字而不是字符
      value = value.replace(/\.{1,}/g, '.') //只保留第一个.清除多余的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      value = value.replace(/^(\-)*(\d*)\.(\d\d).*$/, '$1$2.$3') //只能输入两个小数
      value =
        value.indexOf('.') > 0
          ? value.split('.')[0].substring(0, 4) + '.' + value.split('.')[1]
          : value.substring(0, 4)
      return value
    },
    FiveTwo(value) {
      value = value.replace(/^0*(0\.|[1-3])/, '$1')
      value = value.replace(/[^\d.]/g, '') //清除"数字"和"."以外的字符
      value = value.replace(/^\./g, '') //验证第一个字符是数字而不是字符
      value = value.replace(/\.{1,}/g, '.') //只保留第一个.清除多余的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      value = value.replace(/^(\-)*(\d*)\.(\d\d).*$/, '$1$2.$3') //只能输入两个小数
      value =
        value.indexOf('.') > 0
          ? value.split('.')[0].substring(0, 3) + '.' + value.split('.')[1]
          : value.substring(0, 3)
      return value
    },
    SevenTwo(value) {
      value = value.replace(/^0*(0\.|[1-3])/, '$1')
      value = value.replace(/[^\d.]/g, '') //清除"数字"和"."以外的字符
      value = value.replace(/^\./g, '') //验证第一个字符是数字而不是字符
      value = value.replace(/\.{1,}/g, '.') //只保留第一个.清除多余的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      value = value.replace(/^(\-)*(\d*)\.(\d\d).*$/, '$1$2.$3') //只能输入两个小数
      value =
        value.indexOf('.') > 0
          ? value.split('.')[0].substring(0, 5) + '.' + value.split('.')[1]
          : value.substring(0, 5)
      return value
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        this.getSysDict()
        damManager.detailId(this.pId, (res) => {
          this.params = res.value
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        damCode: null, //大坝代码
        damName: null, //大坝名称
        damGrad: null, //大坝级别
        damLoc: null, //大坝所在位置
        damMaxHeig: null, //最大坝高（
        damTopElev: null, //坝顶高程
        damTopLen: null, //坝顶长度
        damTopWid: null, //坝顶宽度
        damTypeMat: null, //大坝材料类型（参考字典）
        damTypeStr: null, //大坝结构类型（参考字典）
        elevSys: null, //高程系统（参考字典）
        endLat: null, //终点纬度（单位：度）
        endLong: null, //终点经度（单位：度）
        engGrad: null, //工程等别（参考字典）
        engStat: null, //工程建设情况
        ifMainDam: null, //是否主坝
        rscd: null, //水库代码
        rsnm: null, //水库名称只在列表展示使用
        startDate: null, //开工时间
        startLat: null, //起点纬度（单位：度
        startLong: null, //起点经度（单位：度）
        note: null,
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            damManager.addSave(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
                // this.$message.success(response.message)
              } else {
                //  this.$message.success(response.message)
              }
              // this.$emit('closeFormDiao')
              // this.$router.go(-1)
            })
          }
          if (this.title === '修改') {
            damManager.upData(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
                // this.$message.success(response.message)
              } else {
                //  this.$message.success(response.message)
              }
              // this.$emit('closeFormDiao')
              // this.$router.go(-1)
            })
          }
        } else {
          return false
        }
      })
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.prgrs = response.data.gcdb;
            this.damGrads = response.data.dbjb;
            this.damTypeMats = response.data.dbcl;
            this.damTypeStrs = response.data.dbjg;
            this.elevSyss = response.data.gcxt;
           if(this.title==='新增'){
              this.params.damGrad=this.damGrads[0].value;
           }
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 24px 0 5px 0;
  height: 7px !important;
  background: #88b4dd !important;
  .el-divider__text {
    font-size: 16px !important;
  }
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
