<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="basName">
              <el-input
                size="mini"
                placeholder="请输入流域名称"
                v-model="params.basName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流域代码：" prop="basCode">
              <el-input
                size="mini"
                placeholder="请输入流域代码"
                v-model="params.basCode"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属行政区：" prop="basAdName">
              <el-cascader
                style="width: 100%"
                :options="basAdNames"
                v-model="params.basAdCode"
                :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="lowLeftLat">
              <el-input
                @input="deadLevs('1')"
                size="mini"
                placeholder="请输入左下角维度"
                v-model="params.lowLeftLat"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="左下角经度：" prop="lowLeftLong">
              <el-input
                @input="deadLevs('2')"
                size="mini"
                placeholder="请输入左下角经度"
                v-model="params.lowLeftLong"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="右上角经度：" prop="upRightLat">
              <el-input
                @input="deadLevs('3')"
                size="mini"
                placeholder="请输入左下角经度"
                v-model="params.upRightLat"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="右上角纬度：" prop="upRightLong">
              <el-input
                @input="deadLevs('4')"
                size="mini"
                placeholder="请输入右上角纬度"
                v-model="params.upRightLong"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流域级别" prop="basGrad">
              <el-select
                @change="changebasGrad"
                style="width: 100%"
                size="mini"
                v-model="params.basGrad"
                clearable
                placeholder="请选择流域级别"
              >
                <el-option
                  v-for="item in basGrads"
                  :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="crOverType">
              <el-select
                @change="changecrOverType"
                style="width: 100%"
                size="mini"
                v-model="params.crOverType"
                clearable
                placeholder="请选择跨界类型"
              >
                <el-option
                  v-for="item in crOverTypes"
                  :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="流域面积(单位Km2)：" prop="basArea">
              <el-input
                @input="deadLevs('5')"
                size="mini"
                clearable
                placeholder="请输入流域面积"
                v-model="params.basArea"
                @change="changeArea"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注：" prop="note">
          <el-input
            type="textarea"
            :autosize="{minRows: 3, maxRows: 4}"
            placeholder="请输入内容"
            v-model="params.note"
          >
          </el-input>
        </el-form-item>
      </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 basin from '@/api/basin.js'
import req from '@/request.js'
import latitude from '@/mixins/latitude'
export default {
  name: 'FormDialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        basName: null, //流域名称
        basGrad: null, //流域级别
        crOverType: null, //跨界类型
        lowLeftLong: null, //左下角经度
        lowLeftLat: null, //左下角维度
        note: null, //备注
        basCode: null, //流域代码
        basAdCode: null, //流域所属行政区
        upRightLong: null,
        upRightLat: null,
        basArea: null, //流域面积
        basAdName: '',
      },
      crOverTypes: [], //跨界类型字典数组
      basGrads: [], //流域级别字典类型
      basAdNames: [], //行政下拉
      AdName: null, //接受每次选中的值
      setKesLabel: {
        value: 'code',
        label: 'name',
        children: 'children',
      },
      rules: {
        basName: [
          {
            required: true,
            message: '请输入流域名称',
            trigger: 'blur',
          },
        ],
        basCode: [{required: true, message: '请输入流域代码', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getSysDict()
    // 行政区查询
    basin.getbasAdName({}, (res) => {
      this.basAdNames = res.value
    })
  },
  methods: {
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.lowLeftLat = latitude.TreeFour(this.params.lowLeftLat)
          break
        case '2':
          this.params.lowLeftLong = latitude.TreeFour(this.params.lowLeftLong)
          break
        case '3':
          this.params.upRightLat = latitude.TreeFour(this.params.upRightLat)
          break
        case '4':
          this.params.upRightLong = latitude.TreeFour(this.params.upRightLong)
          break
        default:
          this.params.basArea = latitude.ElghtTwo(this.params.basArea)
      }
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        basin.getbasAdName({}, (res) => {
          this.basAdNames = res.value
        })
        this.getSysDict()
        this.$set(this.crOverTypes, this.crOverTypes)
        this.$set(this.basAdNames, this.basAdNames)
        this.$set(this.basGrads, this.basGrads)
        basin.detailId(this.pId, (res) => {
          this.params = res
          this.params.basAdCode = this.params.basAdCode.split(',')
          this.$set(this.params)
        })
      }
    },
    onhouChange(val) {
      this.AdName = val
      this.params.basAdCode = val.toString()
      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.basAdName = item.fullName
          }
        }
      }
    },
    handleClose() {
      this.params = {
        basName: null, //流域名称
        basGrad: null, //流域级别
        crOverType: null, //跨界类型
        lowLeftLong: null, //左下角经度
        lowLeftLat: null, //左下角维度
        note: null, //备注
        basCode: null, //流域代码
        basAdCode: null, //流域所属行政区
        upRightLong: null,
        upRightLat: null,
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            basin.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 === '修改') {
            let params = JSON.parse(JSON.stringify(this.params))
            params.basAdCode = params.basAdCode.toString()
            basin.upData(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
        }
      })
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.crOverTypes = response.data.kjlx
            this.basGrads = response.data.lyjb
            this.$set(this.crOverTypes, this.crOverTypes)
            this.$set(this.basGrads, this.basGrads)
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    changebasAdName(val) {
      if (val) {
        this.params.basAdCode = val.toString()
      } else {
        this.params.basAdCode = null
      }
    },
    changeArea(val) {
      if (val) {
        this.params.basArea = val
      } else {
        this.params.basArea = null
      }
    },
    changecrOverType(val) {
      if (val) {
        this.params.crOverType = val
      } else {
        this.params.crOverType = null
      }
    },
    changebasGrad(val) {
      if (val) {
        this.params.basGrad = val
      } else {
        this.params.basGrad = null
      }
    },
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
