<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      :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"
                clearable
                placeholder="请输入防治区名称"
                v-model="params.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="村落代码" prop="villageCode">
              <el-input
                size="mini"
                clearable
                placeholder="请输入村落代码"
                v-model="params.villageCode"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行政区划：" prop="addvcd">
              <el-cascader
                filterable
                :show-all-levels="false"
                style="width: 100%"
                size="mini"
                :options="basAdNames"
                v-model="params.addvcd"
                :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="basinName">
              <el-input
                size="mini"
                clearable
                placeholder="请输入所属小流域名称"
                v-model="params.basinName"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属小流域代码" prop="basinCode">
              <el-input
                size="mini"
                clearable
                placeholder="请输入所属小流域代码"
                v-model="params.basinCode"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户主名称" prop="householder">
              <el-input
                size="mini"
                clearable
                placeholder="请输入户主名称"
                v-model="params.householder"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="总人数(人)" prop="peopleNum">
              <el-input
                size="mini"
                clearable
                oninput="value=value.replace(/[^1-9]/g, '')"
                placeholder="请输入总人数(人)"
                v-model="params.peopleNum"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="住房建筑面积(㎡)" prop="buildArea">
              <el-input
                size="mini"
                clearable
                placeholder="请输入住房建筑面积(㎡)"
                v-model="params.buildArea"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="住房建筑类型" prop="buildType">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.buildType"
                clearable
                placeholder="请选择住房建筑类型"
              >
                <el-option
                  v-for="item in buildTypes"
                  :key="item.id"
                  :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="buildStructure">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.buildStructure"
                clearable
                placeholder="请选择住房结构形式"
              >
                <el-option
                  v-for="item in buildStructures"
                  :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="lng">
              <el-input
                size="mini"
                clearable
                placeholder="请输入经度(°)"
                v-model="params.lng"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度(°)" prop="lat">
              <el-input
                size="mini"
                clearable
                placeholder="请输入纬度(°)"
                v-model="params.lat"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="宅基高程(m)" prop="altitude">
              <el-input
                size="mini"
                clearable
                placeholder="请输入宅基高程(m)"
                v-model="params.altitude"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="临水" prop="isNearWater">
              <el-radio-group v-model="params.isNearWater">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="切坡" prop="isNearSlope">
              <el-radio-group v-model="params.isNearSlope">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="tel">
              <el-input
                size="mini"
                clearable
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="请输入联系电话"
                v-model="params.tel"
              ></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 req from '@/request.js'
import latitude from '@/mixins/latitude'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import flashFloods from '@/api/flashFloods.js'
export default {
  name: 'falshForm',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        addvcd: null, //行政区
        name: null, //防治区名称
        villageCode: null, //村落代码
        basinName: null, //所属小流域名称
        basinCode: null, //所属小流域代码
        householder: null, //户主名称
        peopleNum: null, //总人数(人)
        buildArea: null, //住房建筑面积(㎡)
        buildType: null, //住房建筑类型
        buildStructure: null, //住房结构形式
        lng: null,
        lat: null,
        altitude: null,
        isNearWater: 0,
        isNearSlope: 0,
        tel: null,
      },
      crOverTypes: [], //跨界类型字典数组
      basGrads: [], //流域级别字典类型
      basAdNames: [], //行政下拉
      AdName: null, //接受每次选中的值
      setKesLabel: {
        value: 'code',
        label: 'name',
        children: 'children',
      },
      rules: {
        name: [{required: true, message: '请输入防治区名称', trigger: 'blur'}],
        villageCode: [
          {required: true, message: '请输入村落代码', trigger: 'blur'},
        ],
        addvcd: [
          {
            required: true,
            message: '请选择行政区划',
            trigger: 'blur',
          },
        ],
        basinName: [
          {required: true, message: '请输入所属小流域名称', trigger: 'blur'},
        ],
        basinCode: [
          {required: true, message: '请输入所属小流域代码', trigger: 'blur'},
        ],
        householder: [
          {required: true, message: '请输入户主名称', trigger: 'blur'},
        ],

        buildType: [
          {required: true, message: '请选择住房建筑类型', trigger: 'change'},
        ],
        buildStructure: [
          {required: true, message: '请选择住房结构形式', trigger: 'change'},
        ],
        lng: [{required: true, message: '请输入经度(°)', trigger: 'blur'}],
        lat: [{required: true, message: '请输入纬度(°)', trigger: 'blur'}],
      },
      buildTypes: [],
      buildStructures: [],
    }
  },
  created() {
    this.getDetailInfo()
    this.buildTypes = dictUtils.getDictItemsFromCache('shzhfz-zfjzlx')
    this.buildStructures = dictUtils.getDictItemsFromCache('shzhfz-zfjgxs')
    // 行政区查询
    flashFloods.getbasAdName({}, (res) => {
      this.basAdNames = res.value
    })
  },
  methods: {
    onhouChange(val) {
      if (val) {
        this.params.addvcd = val[val.length - 1]
      }
      // let arr = this.basAdNames.filter((ite) => ite.code === val[0])
      // this.calleArr(arr, val[val.length - 1])
    },
    handleClose() {
      this.params = {}
      this.$emit('closeFormDiao')
    },
    // 根据ID查询
    getDetailInfo() {
      console.log(111)
      if (this.title === '修改') {
        flashFloods.detailId(this.pId, (res) => {
          if (res.state) {
            this.params.name = res.value.name
            this.params.villageCode = res.value.villageCode
            this.params.basinName = res.value.basinName
            this.params.basinCode = res.value.basinCode
            this.params.peopleNum = res.value.peopleNum
            this.params.householder = res.value.householder
            this.params.buildArea = res.value.buildArea
            this.params.buildType = res.value.buildType
            this.params.buildStructure = res.value.buildStructure
            this.params.lng = res.value.lng
            this.params.lat = res.value.lat
            this.params.altitude = res.value.altitude
            this.params.isNearWater = Number(res.value.isNearWater)
            this.params.isNearSlope = Number(res.value.isNearSlope)
            this.params.tel = res.value.tel
            this.params.id = res.value.id
            this.params.addvcd = res.value.addvcd
          }
        })
      } else {
      }
    },
    goInfo() {
      console.log(123)
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            flashFloods.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 === '修改') {
            console.log(1)
            // let params = JSON.parse(JSON.stringify(this.params))
            // params.basAdCode = params.basAdCode.toString()
            flashFloods.upData(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style>
</style>
