<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="点位详情" width="70%" append-to-body>
    <el-descriptions v-loading="loading" class="margin-top" title="" :column="2" border>
      <el-descriptions-item v-for="config of formConfig" :key="config.value" :span="config.span">
        <template slot="label">
          {{ config.label }}
        </template>
        <template v-if="config.type=='text'">
          {{ wellForm[config.value]?wellForm[config.value]:config.placeholder }}
        </template>
        <template v-if="config.type=='areaName'">
          {{ areaName?areaName:config.placeholder }}
        </template>
        <template v-if="config.type=='images'">
          <div v-if="imageList.length==0">
            无
          </div>
          <div v-else>
            <el-image v-for="image of imageList" :key="image" style="width: 100px; height: 100px" :src="image.url" :preview-src-list="imageList" />
          </div>
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <div class="watch-div">
      <a-map-container
        ref="map"
        :center="center"
        :zoom="zoom"
        :base-layer="baseLayer"
        style="height: 300px"
        :vid="mapid"
        class="info-map"
        @ready="mapReady"
      >
        <a-map-marker v-if="marker" :position="marker.position" />
      </a-map-container>
    </div>
    <!--    </el-scrollbar>-->
  </el-dialog>
</template>

<script>
import { getAreaListPage } from '@/api/system/area'
import { getWellInfo } from '@/api/well/well'
import AMapContainer from '@/components/Amap/AMapContainer'
import AMapMarker from '@/components/Amap/AMapMarker'

export default {
  name: 'InfoWell',
  components: { AMapContainer, AMapMarker },
  props: {
    mapid: {
      type: String,
      default: 'info-well-map'
    }
  },
  data() {
    return {
      map: null, // 地图对象
      wellId: '', // 井id
      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: '', // 街道
        road: '',
        responsibleDept: '' // 维护人员部门
      }, // 表单
      formConfig: [
        { type: 'text', label: '点位名称', value: 'wellName', placeholder: '未知' },
        { type: 'text', label: '点位编号', value: 'wellCode', placeholder: '未知' },
        { type: 'text', label: '点位类型', value: 'wellTypeName', placeholder: '未知' },
        { type: 'text', label: '权属单位', value: 'deptName', placeholder: '未知' },
        { type: 'text', label: '点位维护单位', value: 'responsibleDeptName', placeholder: '未知' },
        { type: 'text', label: '井深(m)', value: 'deep', placeholder: '--' },
        { type: 'text', label: '布防状态', value: 'bfztName', placeholder: '未知' },
        { type: 'areaName', label: '所在区域', value: 'areaName', placeholder: '未知', span: 2 },
        { type: 'text', label: '经度', value: 'coordinateX', placeholder: '未知' },
        { type: 'text', label: '纬度', value: 'coordinateY', placeholder: '未知' },
        { type: 'text', label: '所在道路', value: 'road', placeholder: '未知', span: 5 },
        { type: 'text', label: '详细地址', value: 'position', placeholder: '未知', span: 5 },
        { type: 'images', label: '路标图片', value: 'imageList', placeholder: '无', span: 5 }
      ], // 表单配置项
      center: [116.4, 39.9],
      zoom: 16,
      baseLayer: 'gaode_vec', // 底图图层
      marker: null,
      imageList: [],
      icon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
      quList: [],
      jiedaoList: [],
      labelPosition: 'right',
      loading: true
    }
  },
  computed: {
    areaName() {
      if (this.wellForm.quName) {
        return this.wellForm.quName + this.wellForm.areaName
      } else {
        return ''
      }
    }
  },
  watch: {
    qu(val) { // 监控区变化
      this.fetchArea2()
    }
  },
  mounted: function() {
    // this.fetchArea1()
  },
  methods: {
    // 初始化对话框
    initDialog: function(wellId) {
      this.wellId = wellId
      this.dialogFormVisible = true
      if (this.map) { // 如果地图已加载，直接取数据，如果未加载等待加载完毕后再加载数据
        this.fetchData()
      }
    },
    fetchData() {
      // 获取井数据
      getWellInfo(this.wellId).then(response => {
        this.loading = false
        const row = response.data
        this.wellForm = row
        this.center = [row.lngGaode, row.latGaode]
        console.log(this.center)
        this.marker = { position: [row.lngGaode, row.latGaode] }
        if (row.deptid && row.deptid !== '') {
          this.fetchArea1()
          this.fetchArea2()
        } else {
          this.loading = false
        }
        // 处理图片
        const urls = row.photos.split(';')
        const base_url = this.baseConfig.baseUrl + '/static/'
        for (const url of urls) {
          if (url) {
            this.imageList.push({ name: url, url: base_url + url })
          }
        }
      })
    },
    // 地图加载完毕
    mapReady(map) {
      this.map = map
      console.log('infowell map ready')
      this.fetchData()
    },
    // 获取区域1
    fetchArea1() {
      const query = {
        keywords: this.wellForm.qu,
        offset: 1,
        limit: 20,
        sort: '',
        order: ''
      }
      getAreaListPage(query).then(response => {
        this.quList = response.data.rows.filter(item => item.id === this.wellForm.qu)
        const quName = this.quList.length > 0 ? this.quList[0].areaName : ''
        this.$set(this.wellForm, 'quName', quName)
      })
    },
    // 获取区域2
    fetchArea2() {
      const query = {
        keywords: this.wellForm.area,
        offset: 1,
        limit: 20,
        sort: '',
        order: ''
      }
      getAreaListPage(query).then(response => {
        this.jiedaoList = response.data.rows
        const areaName = this.jiedaoList.length > 0 ? this.jiedaoList[0].areaName : ''
        this.$set(this.wellForm, 'areaName', areaName)
      })
    },
    // 取消
    cancel() {
      this.imageList = []
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

  .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;
  }
  .imgBox{
    width: 100%;
    text-align: center;
  }
  .watch-div {
    margin: 10px 0px;
    .map-demo{
      height: 250px;
    }
  }
</style>