<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="井详情" width="70%" append-to-body>
    <el-descriptions 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 }}
        </template>
        <!--        <template v-if="config.type=='images'">-->
        <!--          <div v-if="imageList.length==0">-->
        <!--            无-->
        <!--          </div>-->
        <!--          <el-upload-->
        <!--            v-else-->
        <!--            ref="upload"-->
        <!--            :file-list="imageList"-->
        <!--            :on-preview="handlePictureCardPreview"-->
        <!--            class="hide"-->
        <!--            multiple-->
        <!--            accept=".jpg,.jpeg,.png "-->
        <!--            action="string"-->
        <!--            list-type="picture-card"-->
        <!--            disabled-->
        <!--          />-->
        <!--        </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="info-well-map"
        class="map-demo"
      >
        <a-map-marker v-for="marker of markers" :position="marker.position" />
      </a-map-container>
    </div>
    <!--    </el-scrollbar>-->
  </el-dialog>
</template>

<script>
import { getAreaList, getAreaByDept, 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 },
  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: '', // 街道
        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: [121.59996, 31.197646],
      zoom: 16,
      baseLayer: 'gaode_vec', // 底图图层
      markers: [],
      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.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, // 位置描述
          road: row.road,
          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
        }
        // 处理图片
        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 })
          }
        }
      })
    },
    // 获取区域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)
        this.wellForm.quName = this.quList.length > 0 ? this.quList[0].areaName : ''
      })
    },
    // 获取区域2
    fetchArea2() {
      const query = {
        keywords: this.wellForm.area,
        offset: 1,
        limit: 20,
        sort: '',
        order: ''
      }
      getAreaListPage(query).then(response => {
        this.jiedaoList = response.data.rows
        this.wellForm.areaName = this.jiedaoList.length > 0 ? this.jiedaoList[0].areaName : ''
      })
    },
    // 取消
    cancel() {
      this.imageList = []
      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: 10px 0px;
    .map-demo{
      height: 250px;
    }
  }
</style>