<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>
            <div class="table-box">
              <el-table
                :data="siteListData"
                highlight-current-row
                ref="siteListData"
                height="100%"
                @current-change="getCarDataList"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  min-width="50px"
                >
                </el-table-column>
                <el-table-column
                  prop="siteName"
                  label="站点名称"
                  min-width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="siteLocation"
                  label="站点位置"
                  min-width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="carCount"
                  label="车辆数"
                  min-width="80px"
                >
                </el-table-column>
                <el-table-column
                  prop="hospitalName"
                  label="所在医疗机构"
                  min-width="180px"
                >
                </el-table-column>
              </el-table>
            </div>
          </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>
            <div class="table-box">
              <el-table
                :data="carListData"
                height="100%"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  min-width="50px"
                >
                </el-table-column>
                <el-table-column
                  prop="licensePlateNumber"
                  label="车牌号"
                  min-width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="vechieType"
                  label="车辆类型"
                  min-width="120"
                  :formatter="vechieTypeFormatter"
                >
                </el-table-column>
                <el-table-column
                  prop="vechieUseStatus"
                  label="车辆状态"
                  min-width="80"
                  :formatter="vechieUseStatusFormatter"
                >
                </el-table-column>
                <el-table-column
                  prop="vechieSpecialPurpose"
                  label="车辆特殊用途"
                  min-width="120"
                  :formatter="vechieSpecialPurposeFormatter"
                >
                </el-table-column>
                <el-table-column
                  prop="isPreHospitalVechie"
                  label="是否院前急救车"
                  min-width="80"
                  :formatter="isPreHospitalVechieFormatter"
                >
                </el-table-column>
                <el-table-column
                  prop="vehicleUsingUnit"
                  label="车辆使用单位"
                  min-width="180"
                >
                </el-table-column>
              </el-table>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { queryEmergencyMapSiteList } 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: {

    getSelections() {
      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)
        //   })
        // }
      })
    },
    markerHandler() {
      queryEmergencyMapSiteList().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)
                this.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)
                })
              }
            })
          }
        } else {
          this.$message.error(res.content)
        }
      })
    }
    ,
    init() {
      //划分出行政区
      this.map = new BMapGL.Map('allmap')
      this.map.centerAndZoom(new BMapGL.Point(defaultCenterPoint[0], defaultCenterPoint[1]), 11)
      this.map.enableScrollWheelZoom(true);
      // 划分出行政单位
      this.getSelections()
      // 地图上打点
      this.markerHandler()
    },
    getBoundary(districtName) {
      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
          }); //建立多边形覆盖物
          that.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;
    }
  }
  .table-box {
    height: calc(100% - 46px);
  }
  // .table1 {
  //   width: 100%;

  //   overflow: auto;
  // }
}
</style>