<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      :before-close="handleClose"
      custom-class="bbsl-location-dialog"
      top="1.7vh"
    >
      <el-tabs v-model="activeName">
        <div class="bbsl-scroll-pane">
          <el-form
            ref="formInfo"
            :rules="rules"
            :model="params"
            label-width="150px"
            style="width:100%"
            class="bbsl-scroll-form"
          >
            <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="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 size="mini" placeholder="请输入工程代码" v-model="params.code" maxlength="18"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设计流量：" prop="rz">
                  <el-input
                    @input="deadLevs('5')"
                    size="mini"
                    placeholder="请输入设计流量"
                    v-model="params.rz"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <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="断面尺寸(m)：" prop="sectionSize">
                  <el-input
                    @input="deadLevs('6')"
                    size="mini"
                    placeholder="请输入断面尺寸"
                    v-model="params.sectionSize"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="长度(m)：" prop="floodLength">
                  <el-input
                    @input="deadLevs('7')"
                    size="mini"
                    placeholder="请输入长度"
                    v-model="params.floodLength"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <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-item label="备注：" prop="note">
              <el-input
                type="textarea"
                :autosize="{minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="params.note"
              ></el-input>
            </el-form-item>
            <p class="from-title" id="step2">
              <i class="el-icon-location"></i>
              <span>所在位置</span>
            </p>
            <el-row>
              <el-col :span="6">
                <el-form-item label="起点经度：" prop="startLong">
                  <el-input
                    @input="deadLevs('1')"
                    size="mini"
                    placeholder="请输入起点经度"
                    v-model="params.startLong"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="起点纬度：" prop="startLat">
                  <el-input
                    @input="deadLevs('2')"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    size="mini"
                    placeholder="请输入起点经度"
                    v-model="params.startLat"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终点经度：" prop="endLong">
                  <el-input
                    @input="deadLevs('3')"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    size="mini"
                    placeholder="请输入终点经度"
                    v-model="params.endLong"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终点纬度：" prop="endLat">
                  <el-input
                    @input="deadLevs('4')"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    size="mini"
                    placeholder="请输入终点纬度"
                    v-model="params.endLat"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="行政区划：" prop="addvcd">
                  <el-cascader
				  filterable
                    :show-all-levels="false"
                    style="width: 100%"
					size="mini"
                    :options="basAdNamesXz"
                    v-model="params.addvcd"
                    :props="{
                    value: 'code',
                    label: 'name',
                    children: 'children',
                }"
                    @change="onhouChanges"
                    placeholder="请选择所属行政区划"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址：" prop="areaStreet">
                  <el-input size="mini" placeholder="请输入详细地址" v-model="params.areaStreet"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="起点所在位置：" prop="startLoc">
                  <el-input
                    type="textarea"
                    :autosize="{minRows: 1, maxRows: 4}"
                    size="mini"
                    placeholder="请输入描述"
                    v-model="params.startLoc"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="终点所在位置：" prop="endLoc">
                  <el-input
                    type="textarea"
                    :autosize="{minRows: 1, maxRows: 4}"
                    size="mini"
                    placeholder="请输入描述"
                    v-model="params.endLoc"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tabs>
      <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 flood_manage from '@/api/reservoirManagement/flood_manage.js'
import req from '@/request.js'
import latitude from '@/mixins/latitude'
export default {
  name: 'damForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    pId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'from',
      params: {
        addvcd:null,//行政区划
        name: null, //工程名称
        code: null, //工程代码
        rz: null, //设计流量
        areaStreet: null, //所在街道
        sectionSize: null, //断面尺寸
        floodLength: null, //长度
        engStat: null, //工程建设情况
        compDate: null, //建成时间
        note: null, //备注
        startLong: null, //起点经度
        startLat: null, //起点纬度
        endLong: null, //终点经度
        endLat: null, //终点纬度
        startLoc: null, //起点所在位置
        endLoc: null //终点所在位置
      },
      basAdNames: [], //所在街道
      basAdNamesXz:[],//行政区划
      prscs: [], //工程规模（参考字典)
      engStats: [
        {name: '在建', value: '0'},
        {name: '已建', value: '1'}
      ], //工程建设情况
      rules: {
        addvcd: [{required: true,message: '请选择行政区划',trigger: 'blur',},],
        name: [
          {
            required: true,
            message: '请输入工程名称',
            trigger: 'blur'
          }
        ],
        code: [{required: true, message: '请输入工程代码', trigger: 'blur'}],
        rscd: [{required: true, message: '请选择关联水库', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.getDetailInfo()
    // 所在街道查询
    flood_manage.getbasAdName({}, res => {
      this.basAdNamesXz = res.value
    })
  },
  methods: {
    onhouChanges(val) {
      if (val) {
        this.params.addvcd = val[val.length-1]
      }
    },
    onhouChange(val) {
      if (val) {
       this.params.areaStreet = val[val.length-1]
      }
    },
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.startLong = latitude.TreeFour(this.params.startLong)
          break
        case '2':
          this.params.startLat = latitude.TreeFour(this.params.startLat)
          break
        case '3':
          this.params.endLong = latitude.TreeFour(this.params.endLong)
          break
        case '5':
          this.params.rz = latitude.TwoTwo(this.params.rz)
          break
        case '6':
          this.params.sectionSize = latitude.FourTwo(this.params.sectionSize)
          break
        case '7':
          this.params.floodLength = latitude.FourTwo(this.params.floodLength)
          break
        default:
          this.params.endLat = latitude.TreeFour(this.params.endLat)
      }
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        flood_manage.detailId(this.pId, res => {
          this.params = res.value
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        addvcd:null,//行政区划
        name: null, //工程名称
        code: null, //工程代码
        rz: null, //设计流量
        areaStreet: null, //所在街道
        sectionSize: null, //断面尺寸
        floodLength: null, //长度
        engStat: null, //工程建设情况
        compDate: null, //建成时间
        note: null, //备注
        startLong: null, //起点经度
        startLat: null, //起点纬度
        endtLong: null, //终点经度
        endtLat: null, //终点纬度
        startLoc: null, //起点所在位置
        endLoc: null //终点所在位置
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate(valid => {
        if (valid) {
          if (this.title === '新增') {
            this.params.areaStreet = String(this.params.areaStreet)
            flood_manage.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 === '修改') {
            flood_manage.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;
  }
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
