<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="关联测站">
              <el-cascader
                size="mini"
                filterable
                style="width: 100%"
                :show-all-levels="false"
                :checkStrictly="false"
                @change="changeregion"
                :options="stcds"
                :props="{value:'rscd', label:'rsnm', children: 'children'}"
                v-model="params.stcd"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警等级：" prop="gradeCode">
              <el-select
                @change="changeCode"
                style="width: 100%"
                size="mini"
                v-model="params.gradeCode"
                clearable
                placeholder="请选择预警等级"
              >
                <el-option
                  v-for="item in gradeCodes"
                  :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="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-row>
          <el-col :span="8">
            <el-form-item label="渗流量预警阈值(m):" prop="alertValue">
              <el-input
                size="mini"
                placeholder="请输入渗流量预警阈值"
                v-model="params.alertValue"
              ></el-input>
            </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 Infiltration from '@/api/stManager/Infiltration.js'
import req from '@/request.js'
import portal from '@/api/portal.js'
export default {
  name: 'deviceForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      stcds: [],
      gradeCodes: [],
      params: {
        isNoteMsg:'1',
        gradeCode:null,
        gradeName:null,
        stcd:null,
        alertValue:null,
        sttp:null
      },
      rules: {
        stcd: [
          {
            required: true,
            message: '请选择关联测站',
            trigger: 'blur',
          },
        ],
        gradeCode: [
          {required: true, message: '请选择预警等级', trigger: 'blur'},
        ],
        isNoteMsg:[{required: true, message: '请选择是否预警通知', trigger: 'blur'}],
        alertValue: [{required: true, message: '请输入渗流量预警阈值', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getList()
    this.getSysDict()
  },
  methods: {
    changeregion(val) {
      if (val) {
        this.params.stcd = val[val.length - 1]
      } else {
        this.params.stcd = null
      }
    },
    getList() {
      portal.getgqList(2, (res) => {
        this.stcds = res.value
      })
    },
    changeCode(val) {
      this.gradeCodes.forEach((e) => {
        if (e.value === val) {
          this.params.gradeName = 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)
            this.gradeCodes = response.data.yjdj;
            if(this.title === '新增'){
            this.params.gradeCode=this.gradeCodes[0].value;
            this.params.gradeName=this.gradeCodes[0].name;
            }
            this.changeCode()
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        Infiltration.detailId(this.pId, (res) => {
          this.params = res.value;
          this.params.gradeCode = String(res.value.gradeCode)
          this.$set(this.params)
        })
      }else{
      this.params=  {
        isNoteMsg:'1',
        gradeCode:null,
        gradeName:null,
        stcd:null,
        alertValue:null,
      }
      }
    },
    handleClose() {
      this.params =  {
        isNoteMsg:null,
        gradeCode:null,
        gradeName:null,
        stcd:null,
        alertValue:null,
      },
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.params.sttp=1
            Infiltration.addSave(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
          if (this.title === '修改') {
            Infiltration.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
        }
      })
    },
  },
}
</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>
