<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="井详情" append-to-body>
    <el-scrollbar :native="false">
      <el-form ref="dataForm" :label-position="labelPosition" :model="wellForm" :v-loading="loading" label-width="120px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="井名称" prop="wellName">
              <el-input v-model="wellForm.wellName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="井编号" prop="wellCode">
              <el-input v-model="wellForm.wellCode" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="井类型" prop="wellType">
              <el-input v-model="wellForm.wellTypeName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="权属单位" prop="deptid">
              <el-input v-model="wellForm.deptName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="井深(m)" prop="deep">
              <el-input v-model="wellForm.deep" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="布防状态" prop="coordinateX">
              <el-input v-model="wellForm.bfztName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-form-item label="所在区域" required>
            <el-col :span="4">
              <el-select v-model="wellForm.qu" placeholder="未知" disabled>
                <el-option
                  v-for="item in quList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"/>
              </el-select>
            </el-col>
            <el-col :span="1" class="line">区/县</el-col>
            <el-col :span="5">
              <el-select v-model="wellForm.area" placeholder="未知" disabled>
                <el-option
                  v-for="item in jiedaoList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"/>
              </el-select>
            </el-col>
            <el-col :span="1" class="line">街道/镇</el-col>
          </el-form-item>

        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="详细地址" prop="position">
              <el-input v-model="wellForm.position" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="watch-div">
        <el-amap ref="map" :center="center" :zoom="zoom" vid="map_info" class="map-demo">
          <el-amap-marker v-for="(marker,index) in markers" :key="index" :v-bind="index" :position="marker.position" :vid="index" visible="true"/>
        </el-amap>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { getAreaList, getAreaByDept } from '@/api/area'
import { getWellInfo } from '@/api/well'
import { AMapManager } from 'vue-amap'

export default {
  name: 'DetailWell',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      wellForm: {
        id: null, // 井id
        wellCode: '', // 井编号
        wellName: '', // 井名称
        wellType: '', // 井类型
        wellTypeName: '', // 井类型名称
        deptid: '', // 权属单位
        deptName: '', // 权属单位名称
        bfztName: '', // 布防状态
        deep: '', // 井深，
        position: '', // 位置描述
        coordinateX: '',
        coordinateY: '',
        latBaidu: '',
        lngBaidu: '',
        latGaode: '',
        lngGaode: '',
        photos: '', // 照片路径
        notes: '', // 备注,
        qu: '',
        area: '', // 街道
        responsibleDept: '' // 维护人员部门
      }, // 表单
      AMapManager,
      center: [121.59996, 31.197646],
      zoom: 16,
      markers: [],
      quList: null,
      jiedaoList: null,
      labelPosition: 'right',
      loading: true
    }
  },
  computed: {
    qu() { // 获取区
      return this.wellForm.qu
    }
  },
  watch: {
    qu(val) { // 监控区变化
      this.fetchArea2()
    }
  },
  mounted: function() {
    // this.fetchArea1()
  },
  methods: {
    // 初始化对话框
    initDialog: function(wellId) {
      this.dialogFormVisible = true
      // this.fetchArea1()
      // 获取井数据
      getWellInfo(wellId).then(response => {
        this.markers = []
        this.listLoading = false
        const row = response.data
        this.wellForm = {
          id: row.id, // 井id
          wellCode: row.wellCode, // 井编号
          wellName: row.wellName, // 井名称
          wellType: row.wellType, // 井类型
          wellTypeName: row.wellTypeName, // 井类型
          deptid: row.deptid, // 权属单位
          deptName: row.deptName, // 权属单位
          deep: row.deep, // 井深，
          bfztName: row.bfztName, // 布防状态
          position: row.position, // 位置描述
          photos: row.photos, // 照片路径
          notes: row.notes, // 备注,
          coordinateX: row.coordinateX,
          coordinateY: row.coordinateY,
          latBaidu: row.latBaidu,
          lngBaidu: row.lngBaidu,
          latGaode: row.latGaode,
          lngGaode: row.lngGaode,
          qu: row.qu,
          area: row.area, // 街道
          responsibleDept: row.responsibleDept // 维护人员部门
        }
        this.center = [row.lngGaode, row.latGaode]
        this.markers.push({ position: [row.lngGaode, row.latGaode] })
        if (row.deptid && row.deptid !== '') {
          this.fetchArea1()
          this.fetchArea2()
        } else {
          this.loading = false
        }
      })
    },
    // 获取区域1
    fetchArea1() {
      getAreaByDept(this.wellForm.deptid).then(response => {
        if (response.code === 200) {
          const pid = response.data.area
          getAreaList(pid).then(response => {
            this.quList = response.data
          })
        }
      })
    },
    // 获取区域2
    fetchArea2() {
      getAreaList(this.wellForm.qu).then(response => {
        this.jiedaoList = response.data
        this.loading = false
      })
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .hide .el-upload--picture-card {
    display: none;
  }
  .editDialog{
    .el-dialog {
      width: 900px;
      margin-top: 10vh !important;
      .el-dialog__body{
      }
      .el-scrollbar {
        height: 450px;
        width: 100%;
      }
      .el-scrollbar__wrap {
        /*overflow: scroll;*/
        overflow-x: auto;
        overflow-y: auto;
      }
      .el-scrollbar__view{
        width: 98%;
      }
      .el-form-item {
        margin-bottom: 12px;
      }
    }
  }
  .el-select{
    width: 100%;
  }
  .line{
    width: 50px;
    margin-left: 5px;
  }
  .hide .el-upload-–picture-card{
    display: none;
  }
  .imgBox{
    width: 100%;
    text-align: center;
  }
  .watch-div {
    margin: 0px 15px;
    .map-demo{
      height: 250px;
    }
  }
</style>