<template>
  <div class="main-page siteQuery">
    <div class="main-page-body">
      <el-row style="height: 100%">
        <el-col
          style="height: 100%"
          :span="12"
        >
          <div class="map">
            <div
              id="allmap"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </el-col>
        <el-col
          style="height: 100%"
          :span="12"
        >
          <div class="top main-table">
            <div class="title"><span class="bed"><span class="red">{{areaName}}</span>站点信息</span> （共<span class="red"> {{siteListData.length}} </span>个站点）</div>
            <el-table
              :data="siteListData"
              style="width: 100%"
              highlight-current-row
              ref="siteListData"
              @current-change="getCarDataList"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50px"
              >
              </el-table-column>
              <el-table-column
                prop="siteName"
                label="站点名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="siteLocation"
                label="站点位置"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="carCount"
                label="车辆数"
                width="80px"
              >
              </el-table-column>
              <el-table-column
                prop="hospitalName"
                label="所在医疗机构"
              >
              </el-table-column>
            </el-table>
          </div>
          <div class="bottom main-table">
            <div class="title"><span class="bed"><span class="red">{{siteName}}</span>车辆明细信息</span> （共<span class="red"> {{carListData.length}} </span>辆急救车）</div>
            <el-table
              :data="carListData"
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50px"
              >
              </el-table-column>
              <el-table-column
                prop="licensePlateNumber"
                label="车牌号"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="vechieType"
                label="车辆类型"
                width="120"
                :formatter="vechieTypeFormatter"
              >
              </el-table-column>
              <el-table-column
                prop="vechieUseStatus"
                label="车辆状态"
                width="80"
                :formatter="vechieUseStatusFormatter"
              >
              </el-table-column>
              <el-table-column
                prop="vechieSpecialPurpose"
                label="车辆特殊用途"
                width="120"
                :formatter="vechieSpecialPurposeFormatter"
              >
              </el-table-column>
              <el-table-column
                prop="isPreHospitalVechie"
                label="是否院前急救车"
                width="80"
                :formatter="isPreHospitalVechieFormatter"
              >
              </el-table-column>
              <el-table-column
                prop="vehicleUsingUnit"
                label="车辆使用单位"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { queryEmergencySiteList } from '@/api/site'
import { queryCarList } from '@/api/emergencyCar'
import { getDic } from '@/util/dict'
export default {
  data() {
    return {
      center: { lng: 114.3162, lat: 30.581084 },
      zoom: 12,
      map: null,
      areaName: '武汉市',
      siteName: '',
      siteListData: [],
      carListData: [],
      allData: [],
      vechieTypeList: [],
      map: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      //划分出行政区
      const map = new BMapGL.Map('allmap')
      map.centerAndZoom(new BMapGL.Point(defaultCenterPoint[0], defaultCenterPoint[1]), 11)
      this.map = map
      map.enableScrollWheelZoom(true);
      getDic(['area', 'vechie_type', 'vechie_special_purpose']).then(res => {
        this.vechieTypeList = res.vechie_type
        this.vechieSpecialPurposeList = res.vechie_special_purpose
        // if (res.area && res.area.length > 0) {
        //   console.log('areaList', res.area)
        //   res.area.forEach(item => {
        //     this.getBoundary(item.name, map)
        //   })
        // }
      })
      // 地图上打点
      queryEmergencySiteList().then(res => {
        if (res.msg === 201) {
          if (res.respData && res.respData.length > 0) {
            this.allData = res.respData
            this.siteListData = res.respData
            res.respData.forEach(item => {
              if (item.siteLatitude && item.siteLongitude) {
                const point = new BMapGL.Point(item.siteLongitude, item.siteLatitude)
                const marker = new BMapGL.Marker(point)
                map.addOverlay(marker)
                marker.addEventListener('click', () => {
                  this.getSiteListData(item.areaName)
                  this.$nextTick(() => {
                    const dataList = this.allData.filter(i => i.id === item.id) || []
                    this.$refs.siteListData.setCurrentRow(dataList[0]);
                  })
                  map.centerAndZoom(new BMapGL.Point(item.siteLongitude, item.siteLatitude), 18)
                })
              }
            })

            // if (res.respData && res.respData[0]) {
            //   this.$refs.siteListData.setCurrentRow(res.respData[0]);
            // }
          }
        } else {
          this.$message.error(res.content)
        }
      })
    },
    getBoundary(districtName, map) {
      const bdary = new BMapGL.Boundary()
      const that = this
      bdary.get(districtName, function(rs) {       //获取行政区域   
        var count = rs.boundaries.length; //行政区域的点有多少个
        for (var i = 0; i < count; i++) {
          var ply = new BMapGL.Polygon(rs.boundaries[i], {
            fillColor: '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
            fillOpacity: 0.3
          }); //建立多边形覆盖物
          map.addOverlay(ply);  //添加覆盖物  
          ply.addEventListener('click', () => {
            that.getSiteListData(districtName)
          })
        }
      });
    },
    getSiteListData(districtName) {
      this.areaName = districtName
      const dataList = this.allData.filter(i => i.areaName === districtName)
      this.siteListData = dataList || []
      if (dataList && dataList[0]) {
        // this.$refs.siteListData.setCurrentRow(dataList[0]);
      } else {
        this.siteName = ''
        this.carListData = []
      }
    },
    getCarDataList(val) {
      if (!val) {
        return
      }
      this.siteName = val.siteName || ''
      queryCarList({ siteId: val.id }).then(res => {
        if (res.msg === 201) {
          this.carListData = res.respData || []
        } else {
          this.carListData = []
          this.$message.error(res.content)
        }
      })
      this.map.centerAndZoom(new BMapGL.Point(val.siteLongitude, val.siteLatitude), 18)
    },
    vechieTypeFormatter(row, column, cellValue, index) {
      const vechieType = this.vechieTypeList.find(i => i.val === cellValue)
      return vechieType ? vechieType.name : ''
    },
    vechieUseStatusFormatter(row, column, cellValue, index) {
      const vechieUseStatusList = ['', '在用', '闲置', '其他']
      return vechieUseStatusList[cellValue] || ''
    },
    vechieSpecialPurposeFormatter(row, column, cellValue, index) {
      const vechieSpecialPurpose = this.vechieSpecialPurposeList.find(i => i.val === cellValue)
      return vechieSpecialPurpose ? vechieSpecialPurpose.name : ''
    },
    isPreHospitalVechieFormatter(row, column, cellValue, index) {
      const isPreHospitalVechieList = ['', '是', '否']
      return isPreHospitalVechieList[cellValue] || ''
    }
  }
}
</script>

<style lang="scss" scope>
.siteQuery {
  .map {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  .top,
  .bottom {
    height: 50%;
    padding-top: 20px;
    box-sizing: border-box;
  }
  .title {
    font-size: 20px;
    margin-bottom: 20px;

    .bed {
      font-weight: bold;
    }
    .red {
      color: red;
    }
  }
}
</style>