<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"
      >
        <p class="from-title" id="step1">
          <i class="el-icon-info"></i>
          <span>基础信息</span>
        </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="水电站名称：" prop="hystName">
              <el-input
                size="mini"
                placeholder="请输入水电站名称"
                v-model="params.hystName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="水电站代码：" prop="hystCode">
              <el-input
                maxlength="18"
                size="mini"
                placeholder="请输入水电站代码"
                v-model="params.hystCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="水电站类型：" prop="hystType">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.hystType"
                clearable
                placeholder="请选择水电站类型"
              >
                <el-option
                  v-for="item in hystTypes"
                  :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="engGrad">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.engGrad"
                clearable
                placeholder="请选择工程等级"
              >
                <el-option
                  v-for="item in engGrads"
                  :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="engScal">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.engScal"
                clearable
                placeholder="请选择工程规模"
              >
                <el-option
                  v-for="item in engScals"
                  :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="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="rvcd">
              <el-cascader
                :show-all-levels="false"
                style="width: 100%"
                size="mini"
                :options="rvcds"
                filterable
                v-model="params.rvcd"
                :props="{
                  value: 'code',
                  label: 'name',
                  children: 'children',
                  checkStrictly: true
                }"
                @change="rvcdChange"
                placeholder="请选择所在河流"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保证出力(kW)" prop="damTopLen">
              <el-input
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入保证出力"
                v-model="params.damTopLen"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额定水头(m)：" prop="damTopWid">
              <el-input
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入额定水头"
                v-model="params.damTopWid"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="主要建筑物级别：" prop="mainBuildGrad">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.mainBuildGrad"
                clearable
                placeholder="请选择建筑物级别"
              >
                <el-option
                  v-for="item in mainBuildGrads"
                  :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="admDep">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.admDep"
                clearable
                placeholder="请选择归口管理部门"
              >
                <el-option
                  v-for="item in admDeps"
                  :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="总装机容量(kW)：" prop="totInsCap">
              <el-input
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入总装机容量"
                v-model="params.totInsCap"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注：" prop="note">
            <el-input
              type="textarea"
              :autosize="{minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="params.note"
            >
            </el-input>
          </el-form-item>
        </el-row>
        <p class="from-title" id="step2">
          <i class="el-icon-location"></i>
          <span>所在位置</span>
        </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="水电站经度(。)：" prop="hystLong">
              <el-input
                @input="deadLevs('1')"
                size="mini"
                placeholder="请输入起点经度"
                v-model="params.hystLong"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="水电站纬度(。)：" prop="hystLat">
              <el-input
                @input="deadLevs('2')"
                size="mini"
                placeholder="请输入水电站纬度"
                v-model="params.hystLat"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在位置：" prop="hystLoc">
              <el-input
                size="mini"
                placeholder="请输入所在位置"
                v-model="params.hystLoc"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <p class="from-title" id="step3">
          <i class="el-icon-s-tools"></i>
          <span>建设情况</span>
        </p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工程建设情况：" prop="engStat">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.engStat"
                clearable
                placeholder="请选择工程建设情况"
              >
                <el-option
                  v-for="item in engStats"
                  :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="startDate">
              <el-date-picker
                size="mini"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                v-model="params.startDate"
                type="date"
                placeholder="选择开工时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建成时间：" prop="compDate">
              <el-date-picker
                style="width: 100%"
                size="mini"
                value-format="yyyy-MM-dd"
                v-model="params.compDate"
                type="date"
                placeholder="选择建成时间"
              >
              </el-date-picker>
            </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 hystManager from '@/api/reservoirManagement/hystManager.js'
import req from '@/request.js'
import latitude from '@/mixins/latitude'
export default {
  name: 'hystForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    pId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      params: {
        rvcd: null, //所在河流
        addvcd: null, //行政区划
        compDate: null, //建成时间
        admDep: null, //归口管理部门
        damTopLen: null, //保证出力
        damTopWid: null, //额定水头
        engGrad: null, //工程等级
        engScal: null, //工程规模
        engStat: null, //工程建设情况
        hystCode: null, //代码
        hystLat: null, //纬度
        hystLoc: null, //位置
        hystLong: null, //经度
        hystName: null, //名称
        hystType: null, //类型
        mainBuildGrad: null, //建筑物级别
        note: null, //
        startDate: null, //开工时间
        totInsCap: null //总装机容量
      },
      rvcds: [], //所在河流下拉
      basAdNames: [], //行政区划
      hystTypes: [], //水电站类型
      engGrads: [], //工程等级
      engScals: [], //工程规模
      mainBuildGrads: [], //主要建筑物级别
      engTasks: [], //工程任务
      admDeps: [], //归口管理部门
      ifMainDams: [
        {name: '未知', value: '0'},
        {name: '是', value: '1'},
        {name: '否', value: '2'}
      ],
      damTypeMats: [],
      damTypeStrs: [],
      engStats: [], //工程建设情况
      rules: {
        hystName: [{required: true, message: '请输入名称', trigger: 'blur'}],
        addvcd: [{required: true, message: '请选择行政区划', trigger: 'blur'}],
        hystCode: [{required: true, message: '请输入代码', trigger: 'blur'}],
        hystType: [{required: true, message: '请选择类型', trigger: 'blur'}],
        engGrad: [{required: true, message: '请选择工程等级', trigger: 'blur'}],
        engScal: [{required: true, message: '请选择工程规模', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.getDetailInfo()
    this.getSysDict()
    this.getTreets()
    hystManager.getbasAdName({}, res => {
      this.basAdNames = res.value
    })
  },
  methods: {
    rvcdChange(val) {
      if (val) {
        this.params.rvcd = val[val.length - 1]
      }
    },
    // 河流树
    getTreets() {
      hystManager.getRvcds({}, res => {
        this.rvcds = res.value
      })
      // reservoirManager.getCtcds({}, (res) => {
      //     this.ctcds = res.value
      // })
    },
    onhouChange(val) {
      if (val) {
        this.params.addvcd = val[val.length - 1]
      }
    },
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.hystLong = latitude.TreeFour(this.params.hystLong)
          break
        default:
          this.params.hystLat = latitude.TreeFour(this.params.hystLat)
      }
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        this.getSysDict()
        hystManager.detailId(this.pId, res => {
          this.params = res.value
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        rvcd: null, //所在河流
        addvcd: null, //行政区划
        compDate: null, //建成时间
        admDep: null, //归口管理部门
        damTopLen: null, //保证出力
        damTopWid: null, //额定水头
        engGrad: null, //工程等级
        engScal: null, //工程规模
        engStat: null, //工程建设情况
        hystCode: null, //代码
        hystLat: null, //纬度
        hystLoc: null, //位置
        hystLong: null, //经度
        hystName: null, //名称
        hystType: null, //类型
        mainBuildGrad: null, //建筑物级别
        note: null, //
        startDate: null, //开工时间
        totInsCap: null //总装机容量
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate(valid => {
        if (valid) {
          if (this.title === '新增') {
            hystManager.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 === '修改') {
            hystManager.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
        }
      })
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          response => {
            resolve(response.data)
            this.hystTypes = response.data.sdzlx //水电站类型
            this.engScals = response.data.gcgm //工程规模
            this.engGrads = response.data.gcdb //工程等级
            this.mainBuildGrads = response.data.dbjb //主要建筑物级别
            this.engStats = response.data.gcjsqk //工程建设情况
            this.admDeps = response.data.gkglbm //归口化管理
            if (this.title === '新增') {
              this.params.hystType = this.hystTypes[0].value
              this.params.engGrad = this.engGrads[0].value
              this.params.engScal = this.engScals[0].value
            }
          },
          error => {
            reject(error)
          }
        )
      })
    }
  }
}
</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>
