<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"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="测站名称：" prop="stcd">
              <el-select
              filterable
                style="width: 100%"
                size="mini"
                v-model="params.stcd"
                clearable
                placeholder="请选择测站名称"
              >
                <el-option
                  v-for="item in sttpType"
                  :key="item.id"
                  :label="item.stnm"
                  :value="item.stcd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警等级：" prop="gradeCode">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.gradeCode"
                clearable
                placeholder="请选择预警等级"
              >
                <el-option
                  v-for="item in gradeNames"
                  :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="fsltdz">
		      <el-input
		        size="mini"
		        @input="nrstlvs"
		        placeholder="请输入汛限水位（单位：m）"
		        v-model="params.fsltdz"
		      ></el-input>
		    </el-form-item>
		  </el-col>
        </el-row>
        <el-row>
          
          <el-col :span="8">
            <el-form-item label="是否短信预警通知：" prop="isNoteMsg">
            <!-- <el-form-item label="是否短信预警通知：" prop="isNoteMsg"> -->
              <el-radio v-model="params.isNoteMsg" label="1">是</el-radio>
              <el-radio v-model="params.isNoteMsg" label="0">否</el-radio>
            </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 riverCourse from '@/api/stManager/riverCourse.js'
import DateMonthDay from '../components/dataMoutnDay.vue'
import portal from '@/api/portal.js'
import req from '@/request.js'
export default {
  name: 'deviceForm-dialog',
  components: {
    DateMonthDay,
  },
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {

        fsltdz: null, //汛限水位-预警阀值
        gradeCode: null, //预警等级
        isNoteMsg: '1', //是否短信预警通知
        stcd: null, //测站编码
        gradeName: null, //预警名称
        sttp:null
      },
      sttpType: [], //工情设施下拉
      gradeNames: [], //预警等级
      fsltdzs: [], //汛期类别
      ifmsg: [
        {name: '否', value: '0'},
        {name: '是', value: '1'},
      ],
      rules: {
        stcd: [
          //测站名称
          {
            required: true,
            message: '请选择测点名称',
            trigger: 'blur',
          },
        ],
        gradeCode: [
          {required: true, message: '请选择预警等级', trigger: 'blur'},
        ], //预警等级_CODE
        fsltdz: [{required: true, message: '请输入汛限水位', trigger: 'blur'}], //汛限水位
      },
    }
  },

  created() {
    this.getDetailInfo()
    this.getSysDict()
    riverCourse.getStnm({}, (res) => {
      for(let i = 0;i<res.value.length;i++){
          if(res.value[i].sttp=="ZZ"){
            this.sttpType.push(res.value[i]) 
          }
        }
    })
  },
  computed: {
  
  },
  methods: {
    onhouChange(val) {
      if (val) {
        this.params.areaCode = val[val.length - 1]
        // let arr = this.basAdNames.filter((ite) => ite.code === val[0])
        // this.calleArr(arr, val[val.length - 1])
      }
    },
    calleArr(array, val) {
      for (let i in array) {
        let item = array[i]
        if (item.children) {
          this.calleArr(item.children, val) //自己调用自己
        } else {
          if (item.code === val) {
            this.params.areaName = item.fullName
          }
        }
      }
    },

    calleArrs(array) {
      let item = array[0]
      if (item.children) {
        this.calleArrs(item.children) //自己调用自己
      } else {
        this.params.areaCode = item.code
      }
    },
    // changedeviceId(val) {
    //   this.deviceIds.forEach((e) => {
    //     if (e.id === val) {
    //       this.params.deviceName = e.name
    //     }
    //   })
    // },

    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            // console.log(response.data)

            this.gradeNames = response.data.hdswyjdj //预警等级
            this.fsltdzs = response.data.xqlb //汛期类别

            if (this.title === '新增') {
              // this.params.type = this.types[0].value
              // this.params.objId = this.objIds[0].value
            }
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        riverCourse.detailId(this.pId, (res) => {
          this.params = res.value 
          this.params.gradeCode = String(res.value.gradeCode)      
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        fsltdz: null, //汛限水位-预警阀值
        gradeCode: null, //预警等级
        isNoteMsg: null, //是否短信预警通知
        stcd: null, //测站编码
      }
      this.$emit('closeFormDiao')
    },
    //长度验证
    nrstlvs() {
      this.params.fsltdz = this.SixTwo(this.params.fsltdz)
    },
    SixTwo(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
    },
    fsltdwrule() {
      this.params.fsltdw = this.SevenTreen(this.params.fsltdw)
    },
    SevenTreen(value) {
      value = value.replace(/^0*(0\.|[1-6])/, '$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, 6) + '.' + value.split('.')[1]
          : value.substring(0, 6)
      return value
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.params.sttp="ZZ"
            let params = JSON.parse(JSON.stringify(this.params))
            this.gradeNames.forEach((item) => {
              if (item.value === params.gradeCode) {
                params.gradeName = item.name
              }
            })

            riverCourse.addSave(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 === '修改') {
          riverCourse.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
        }
      })
    },
  },
}
</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;
  }
}
.bbsl-pagination {
  position: absolute !important;
  right: 10px !important;
  bottom: 3.6875vw !important;
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
