<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="name">
              <el-input
                size="mini"
                placeholder="请输入预警站名称"
                v-model="params.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警站代码：" prop="code">
              <el-input
                maxlength="18"
                size="mini"
                placeholder="请输入预警站代码"
                v-model="params.code"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在行政区：" prop="areaCode">
              <el-cascader
              size="mini"
			  filterable
                :show-all-levels="false"
                style="width: 100%"
                :options="basAdNames"
                v-model="params.areaCode"
                :props="{value: 'code', label: 'name', children: 'children'}"
                @change="onhouChange"
                placeholder="请选择所属行政区"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="测站运行状态：" prop="runStatus">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.runStatus"
                clearable
                placeholder="请选择测站运行状态"
              >
                <el-option
                  v-for="item in runStatuss"
                  :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="manager">
              <el-input
                size="mini"
                placeholder="请输入设备管理人"
                v-model="params.manager"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装详细地址：" prop="address">
              <el-input
                size="mini"
                placeholder="请输入安装详细地址"
                v-model="params.address"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备管理人电话：" prop="managerPhone">
              <el-input
                maxlength="11"
                size="mini"
                placeholder="请输入设备管理人电话"
                v-model="params.managerPhone"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坐标经度：" prop="siteLong">
              <el-input
              @input="deadLevs('1')"
                size="mini"
                placeholder="请输入坐标经度"
                v-model="params.siteLong"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坐标纬度：" prop="siteLat">
              <el-input
              @input="deadLevs('2')"
                size="mini"
                placeholder="请输入坐标纬度"
                v-model="params.siteLat"
              ></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 alarmManager from '@/api/stManager/alarmManager.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: {
        code: null,
        name: null,
        address: null,
        areaCode: null,
        areaName: null, //列表展示
        deviceName: null, //列表展示
        manager: null,
        managerPhone: null,
        runStatus: null,
        siteLat: null,
        siteLong: null,
      },
      basAdNames: [], //行政区
      runStatuss: [
        {name: '在线', value: '1'},
        {name: '掉线', value: '2'},
        {name: '损坏', value: '3'},
      ], 
      rules: {
        name: [
          {
            required: true,
            message: '请输入预警机名称',
            trigger: 'blur',
          },
        ],
        address:[{required: true, message: '请填写安装详细地址', trigger: 'blur'}],
        code: [{required: true, message: '请输入预警机代码', trigger: 'blur'}],
        areaCode: [{required: true, message: '请选择行政区', trigger: 'blur'}],
        runStatus: [{required: true, message: '请选择状态', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDetailInfo();
    // 行政区查询
    alarmManager.getbasAdName({}, (res) => {
      this.basAdNames = res.value;
    if(this.title==='新增'){
      this.params.runStatus=this.runStatuss[0].value;
      this.calleArrs(this.basAdNames)
    }
    })
  },
  methods: {
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.siteLong = latitude.TreeFour(this.params.siteLong)
          break
        case '2':
          this.params.siteLat = latitude.TreeFour(this.params.siteLat)
          break
        default:
          this.params.siteLat = latitude.TreeFour(this.params.siteLat)
      }
    },
    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;
        }
      
    },
    
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        alarmManager.detailId(this.pId, (res) => {
          this.params = res.value;
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        code: null,
        name: null,
        address: null,
        areaCode: null,
        areaName: null, //列表展示
        deviceName: null, //列表展示
        manager: null,
        managerPhone: null,
        runStatus: null,
        siteLat: null,
        siteLong: null,
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            alarmManager.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 === '修改') {
            alarmManager.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;
  }
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
