<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      height="600px"
      :before-close="handleClose"
      custom-class="bbsl-location-dialog"
      top="1.7vh"
    >
    <div class="bbsl-scroll-pane">
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="params"
        label-width="150px"
        class="bbsl-scroll-form"
        style="width:100%"
      >
         <p class="from-title" id="step1">
          <i class="el-icon-info"></i>
          <span>基础信息</span>
           </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="测点编号：" prop="mpcd">
              <el-input
                size="mini"
                maxlength="18"
                placeholder="请输入测点编号"
                v-model="params.mpcd"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="测点名称：" prop="mpnm">
              <el-input
                size="mini"
                maxlength="56"
                placeholder="请输入测点名称"
                v-model="params.mpnm"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="测点类型：" prop="mptp">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.mptp"
                clearable
                placeholder="请选择测点类型"
              >
                <el-option
                  v-for="item in mptpType"
                  :key="item.value"
                  :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="sttp">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.sttp"
                clearable
                placeholder="请选择工情设施类型"
              >
                <el-option
                  v-for="item in sttpType"
                  :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="addvcd">
					<el-cascader
					filterable
					  style="width: 100%"
					  size="mini"
            :show-all-levels="false"
					  :options="addvcds"
					  v-model="params.addvcd"
					  :props="{value: 'code', label: 'name', children: 'children'}"
					  @change="onhouChange"
					  placeholder="请选择所属行政区"
					  clearable
					></el-cascader>
				  </el-form-item>
          </el-col>
           <el-col :span="8">
		    <el-form-item label="重点关注：" prop="phcd">
		  	   <el-radio v-model="params.isImportant" label="1">是</el-radio>
		  	  <el-radio v-model="params.isImportant" label="0">否</el-radio>
		    </el-form-item>
		  </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="关联水库：" prop="rscd">
              <el-select
			  filterable
                style="width: 100%"
                size="mini"
                v-model="params.rscd"
                clearable
                placeholder="请选择水库"
              >
                <el-option
                  v-for="item in rscds"
                  :key="item.id"
                  :label="item.rsnm"
                  :value="item.rscd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="水工建筑物类别：" prop="hycncd">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.hycncd"
                clearable
                placeholder="请选择水工建筑物类别"
              >
                <el-option
                  v-for="item in hycncds"
                  :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="admaur">
              <el-input
                size="mini"
                placeholder="请输入设备管理人员名称"
                v-model="params.admaur"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备管理人员电话：" prop="admaurtel">
              <el-input
                size="mini"
                placeholder="请输入设备管理人员电话"
                oninput ="value=value.replace(/[^\d]/g,'')"
                v-model="params.admaurtel"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="设备维护人员：" prop="matenur">
              <el-input
                size="mini"
                placeholder="请输入设备维护人员名称"
                v-model="params.matenur"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备维护人员电话：" prop="matenurtel">
              <el-input
                size="mini"
                placeholder="请输入设备维护人员电话"
                oninput ="value=value.replace(/[^\d]/g,'')"
                v-model="params.matenurtel"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <p class="from-title" id="step1">
          <i class="el-icon-s-tools"></i>
          <span>安装信息</span>
           </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经度：" prop="lgtd">
              <el-input
              @input="deadLevs('1')"
                size="mini"
                placeholder="请输入经度"
                v-model="params.lgtd"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度：" prop="lttd">
              <el-input
              @input="deadLevs('2')"
                size="mini"
                placeholder="请输入纬度"
                v-model="params.lttd"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装详细地址：" prop="stlc">
              <el-input
                size="mini"
                placeholder="请输入安装详细地址"
                v-model="params.stlc"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="安装日期：" prop="indt">
              <!-- <el-date-picker
                style="width: 100%"
                value-format="yyyy-MM-dd"
                v-model="params.indt"
                type="date"
                placeholder="选择安装日期"
              >
              </el-date-picker> -->
              <el-date-picker
                style="width: 100%"
				size="mini"
                value-format="yyyy-MM-dd"
                v-model="params.indt"
                type="date"
                placeholder="选择安装日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="测定日期：" prop="dtdt">
              <el-date-picker
                style="width: 100%"
				size="mini"
                value-format="yyyy-MM-dd"
                v-model="params.dtdt"
                type="date"
                placeholder="选择安装日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装型式：" prop="tp">
              <el-input
                size="mini"
                placeholder="请输入安装型式"
                v-model="params.tp"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="基础情况：" prop="bsin">
              <el-input
                size="mini"
                placeholder="请输入基础情况"
                v-model="params.bsin"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <p class="from-title" id="step1">
          <i class="el-icon-star-on"></i>
          <span>侦测特征</span>
           </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="桩号：" prop="ch">
              <el-input
                size="mini"
                @input="Srule1"
                placeholder="请输入桩号"
                v-model="params.ch"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轴距：" prop="ofax">
              <el-input
                size="mini"
                @input="Srule2"
                placeholder="请输入轴距"
                v-model="params.ofax"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始高程：" prop="stel">
              <el-input
                size="mini"
                @input="Srule3"
                placeholder="（垂直位移填写）（单位：m）"
                v-model="params.stel"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="高程：" prop="el">
              <el-input
                size="mini"
                @input="Srule4"
                placeholder="请输入高程"
                v-model="params.el"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="X向基准值：" prop="xrfvl">
              <el-input
                size="mini"
                @input="Srule5"
                placeholder="请输入X向基准值"
                v-model="params.xrfvl"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Y向基准值：" prop="yrfvl">
              <el-input
                size="mini"
                @input="Srule6"
                placeholder="请输入Y向基准值"
                v-model="params.yrfvl"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="监测类型：" prop="mstp">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.mstp"
                clearable
                placeholder="请选择监测类型"
              >
                <el-option
                  v-for="item in mstptype"
                  :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="pmbtel">
              <el-input
                size="mini"
                placeholder="请输入透水段底高程"
                @input="Srule7"
                v-model="params.pmbtel"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="透水段顶高程：" prop="pmtpel">
              <el-input
                size="mini"
                @input="Srule8"
                placeholder="请输入透水段顶高程"
                v-model="params.pmtpel"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="管口高程：" prop="tbtpel">
              <el-input
                size="mini"
               @input="Srule9"
                placeholder="请输入管口高程"
                v-model="params.tbtpel"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管底高程：" prop="tbbtel">
              <el-input
                size="mini"
                @input="Srule10"
                placeholder="请输入管底高程"
                v-model="params.tbbtel"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进水段高程：" prop="ipbtel">
              <el-input
                size="mini"
                @input="Srule11"
                placeholder="请输入进水段高程"
                v-model="params.ipbtel"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="进水段顶高程：" prop="iptpel">
              <el-input
                size="mini"
                @input="Srule12"
                placeholder="请输入进水段顶高程"
                v-model="params.iptpel"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="工作状态：" prop="wkcn">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.wkcn"
                clearable
                placeholder="请选择工作状态"
              >
                <el-option
                  v-for="item in wkcnState"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row> </el-row>
      </el-form>
    </div>
      <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 gqManager from '@/api/stManager/gqManager.js'
import req from '@/request.js'
import latitude from '@/mixins/latitude'
export default {
  name: 'deviceForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        mpnm: null, //测点名称
        mpcd: null, //测点编号
        mptp: null, //测点类型
        mstp: null, //监测类型
        addvcd: null, //测点所在行政区划代码
        bsin: null, //基础情况
        ch: null, //基面高差
        dtdt: null, //测定日期
        el: null, //高程
        hycncd: null, //水工建筑物类别
		    isImportant:'1',//重点关注
        id: null, //主键ID
        indt: null, //安装日期
        ipbtel: null, //进水段高程
        iptpel: null, //进水段顶高程
        lgtd: null, //经度
        lttd: null, //纬度
        ofax: null, //轴距
        pmbtel: null, //透水段底高程
        pmtpel: null, //透水段顶高程
        rscd: null, //水库代码
        stel: null, //起始高程
        stlc: null, //安装详细地址
        sttp: null, //工情设施类型
        tbbtel: null, //管底高程
        tbtpel: null, //管口高程
        tp: null, //安装型式
        wkcn: null, //工作状态
        xrfvl: null, //X向基准值
        yrfvl: null, //Y向基准值
        admaur:null,//设备管理人员
        admaurtel:null,//设备管理人员电话
        matenur:null,//设备维护人员
        matenurtel:null,//设备维护人员电话
      },
      hycncds: [],
      mptpType: [], ///测点类型
      wkcnState: [
        {name: '异常', value: '0'},
        {name: '正常', value: '1'},
      ],
      mstptype: [],
      sttpType: [], //工情设施类型
      rscds: [], //水库
      addvcds: [], //行政下拉
      elevSyss: [], //工程建设情况
      rules: {
        basAdName: [
          {required: true, message: '请选择行政区划', trigger: 'blur'},
        ],
        mpnm: [
          {
            required: true,
            message: '请输入测点名称',
            trigger: 'blur',
          },
        ],
        mpcd: [
          {
            required: true,
            message: '请输入测点编号',
            trigger: 'blur',
          },
        ],
        mptp: [
          {
            required: true,
            message: '请选择测点类型',
            trigger: 'blur',
          },
        ],
        sttp: [
          {
            required: true,
            message: '请选择工情设施类型',
            trigger: 'blur',
          },
        ],
        addvcd: [
          {
            required: true,
            message: '请选择所在行政区划代码',
            trigger: 'blur',
          },
        ],
        rscd: [
          {
            required: true,
            message: '请选择关联水库',
            trigger: 'blur',
          },
        ],
        hycncd: [
          {
            required: true,
            message: '请选择水工建筑物类别',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getSysDict()
    this.getTreets()
  },
  methods: {
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.lgtd = latitude.TreeFour(this.params.lgtd)
          break
        case '2':
          this.params.lttd = latitude.TreeFour(this.params.lttd)
          break
        default:
          this.params.lttd = latitude.TreeFour(this.params.lttd)
      }
    },
    changeParentId(val) {
      this.params.parentId = '1'
    },
    
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        this.getSysDict()
        gqManager.detailId(this.pId, (res) => {
          this.params = res.value
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        mpnm: null, //测点名称
        mpcd: null, //测点编号
        mptp: null, //测点类型
        mstp: null, //监测类型
        addvcd: null, //测点所在行政区划代码
        bsin: null, //基础情况
        ch: null, //基面高差
        dtdt: null, //测定日期
        el: null, //高程
        hycncd: null, //水工建筑物类别
        id: null, //主键ID
        indt: null, //安装日期
        ipbtel: null, //进水段高程
        iptpel: null, //进水段顶高程
        lgtd: null, //经度
        lttd: null, //纬度
        ofax: null, //轴距
        pmbtel: null, //透水段底高程
        pmtpel: null, //透水段顶高程
        rscd: null, //水库代码
        stel: null, //起始高程
        stlc: null, //安装详细地址
        sttp: null, //工情设施类型
        tbbtel: null, //管底高程
        tbtpel: null, //管口高程
        tp: null, //安装型式
        wkcn: null, //工作状态
        xrfvl: null, //X向基准值
        yrfvl: null, //Y向基准值
        admaur:null,//设备管理人员
        admaurtel:null,//设备管理人员电话
        matenur:null,//设备维护人员
        matenurtel:null,//设备维护人员电话

      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            let param = JSON.parse(JSON.stringify(this.params))
            console.log(param);
            gqManager.addSave(param, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })

                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
          if (this.title === '修改') {
            gqManager.upData(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
        } else {
          return false
        }
      })
    },
    onhouChange(val) {
      //选择行政区
	  this.params.addvcd = val.pop().toString()
    },
    getTreets() {
      gqManager.getCtcds({}, (res) => {
        this.bscds = res.value //流域下拉
      })
      // 行政区查询
      gqManager.getbasAdName({}, (res) => {
        this.addvcds = res.value
      })
      // 管理树
      gqManager.getrgTree({}, (res) => {
        this.cmdps = res.value;
      })
      //获取水库
      gqManager.getRscds({}, (res) => {
        this.rscds = res.value;
      })
    },
    Srule1() {
      this.params.ch = this.SevenTreen(this.params.ch)
    },
    Srule2() {
      this.params.ofax = this.SevenTreen(this.params.ofax)
    },
    Srule3() {
      this.params.stel = this.SevenTreen(this.params.stel)
    },
    Srule4() {
      this.params.el = this.SevenTreen(this.params.el)
    },
    Srule5() {
      this.params.xrfvl = this.SevenTreen(this.params.xrfvl)
    },
    Srule6() {
      this.params.yrfvl = this.SevenTreen(this.params.yrfvl)
    },
    Srule7() {
      this.params.pmbtel = this.SevenTreen(this.params.pmbtel)
    },
    Srule8() {
      this.params.pmtpel = this.SevenTreen(this.params.pmtpel)
    },
    Srule9() {
      this.params.tbtpel = this.SevenTreen(this.params.tbtpel)
    },
    Srule10() {
      this.params.tbbtel = this.SevenTreen(this.params.tbbtel)
    },
    Srule11() {
      this.params.ipbtel = this.SevenTreen(this.params.ipbtel)
    },
    Srule12() {
      this.params.iptpel = this.SevenTreen(this.params.iptpel)
    },

    SevenTreen(value) {
      value = value.replace(/^0*(0\.|[1-4])/, '$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\d).*$/, '$1$2.$3') //只能输入三个小数
      value =
        value.indexOf('.') > 0
          ? value.split('.')[0].substring(0, 4) + '.' + value.split('.')[1]
          : value.substring(0, 4)
      return value
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.mstptype = response.data.jclx
            this.objIds = response.data.sbdxfl
            this.appTypeCodesType = response.data.sbyyfl
            this.sttpType = response.data.gqsslx //工情设施类型
            this.mptpType = response.data.cdlx //测点类型
            this.hycncds = response.data.sgjzwlb //水工建筑物类别

            if (this.title === '新增') {
              // this.params.type = this.types[0].value
              // this.params.objId = this.objIds[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>
