<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="70%"
      height="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="params"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="测站名称：" prop="stcd">
              <el-cascader
                ref="cascader"
                style="width: 100%"
                v-model="params.stcd"
                :props="{value: 'stcd', label: 'name', children: 'children'}"
                :options="stnms"
                size="mini"
                :show-all-levels="false"
                @change="handelerget($event)"
                placeholder="请选择测站名称"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警等级：" prop="warnGrade">
              <el-select
                size="mini"
                v-model="params.warnGrade"
                clearable
                style="width: 100%"
                placeholder="请选择预警等级"
              >
                <el-option
                  v-for="item in yjdjs"
                  :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="sendDate">
              <el-date-picker
                v-model="params.sendDate"
				size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                style="width: 100%"
                placeholder="选择预警时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预警内容：" prop="alertContent">
              <el-input
                type="textarea"
				size="mini"
                placeholder="请输入预警内容"
                v-model="params.alertContent"
              >
              </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 personWarn from '@/api/warningRelease/personWarn'
import req from '@/request.js'
export default {
  name: 'deviceForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      stnms: [], //测站名称
      params: {
        stcd: 'null', //测站代码
        warnGrade: null, //预警等级
        sendDate: '', //预警时间
        alertContent: null, //预警内容
      },
      yjdjs: [], //预警等级
      rules: {
        stcd: [
          {
            required: true,
            message: '请选择测站名称',
            trigger: 'blur',
          },
        ],
        warnGrade: [
          {
            required: true,
            message: '请选择预警等级',
            trigger: 'blur',
          },
        ],
        sendDate: [
          {
            required: true,
            message: '请选择预警时间',
            trigger: 'blur',
          },
        ],
        alertContent: [
          {
            required: true,
            message: '请输入预警内容',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getList()
    this.getSysDict()
  },
  // watch: {
  //   params: {
  //     handler(newVal) {
  //       console.log(newVal)
  //     },
  //   },
  // },
  methods: {
    getList(value) {
      personWarn.getTree({}, (response) => {
        if (value) {
          response.value.forEach((item) => {
            if (item.children) {
              item.children.forEach((ii) => {
                if (ii.stcd === value) {
                  this.params.warnType = ii.parentId
                  this.params.stcd = ii.stcd
                }
              })
            }
          })
        }
        this.stnms = response.value
        this.stnms.forEach((item) => {
          if (item.children) {
            item.children = JSON.parse(
              JSON.stringify(item.children).replace(/stnm/g, 'name')
            )
          }
        })
      })
    },
    // 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) => {
            this.yjdjs = response.data.yjdj //预警等级
            if (this.params.warnGrade) {
              this.yjdjs.forEach((item) => {
                if (item.value == this.params.warnGrade.trim()) {
                  this.params.warnGrade = item.name
                }
              })
            }
            if(this.params.stcd){
              console.log(this.params.stcd)
            }
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        personWarn.detailId(this.pId, (res) => {
          this.params = res.value
          this.$set(this.params)
        })
      } else {
        this.params = {
          stcd: null, //测站代码
          warnType: null, //测站代码
          warnGrade: null, //预警等级
          sendDate: null, //预警时间
          alertContent: null, //预警内容
        }
      }
    },
    handleClose() {
      this.params = {
        stcd: null, //测站代码
        warnType: null, //测站代码
        warnGrade: null, //预警等级
        sendDate: null, //预警时间
        alertContent: null, //预警内容
      }
      this.$emit('closeFormDiao')
    },
    handelerget(value) {
      this.getList(value[1])
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            let params = this.params
            this.stnms.forEach((item) => {
              if (item.children) {
                item.children.forEach((ii) => {
                  if (ii.stcd == params.stcd) {
              
                    params.stnm = ii.name
                    console.log(params)
                  }
                })
              }
            })
            personWarn.addSave(params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
          if (this.title === '修改') {
            this.params.stcd = this.params.stcd[1]
            personWarn.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;
  }
}
.el-input--small .el-input__inner,
.el-input--small .el-input__inner {
  height: 28px;
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
