<!--
  @description: 统计报表-招采地图
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/01/28
-->
<template>
  <!-- <MyEcharts
    :id="'bidAndProcMapCharts'+new Date()*1"
    class="echart-dom"
    :option="chartOption"
  /> -->
  <div style="width:100%;height:100%;">
    <button id="backDetail" ref="backDetail" class="hidden">
      返回全国
    </button>
    <div id="mapChartsDetail" style="width:100%;height:100%;" />
  </div>
</template>

<script>
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
// api
import { getBiddingAndPurchaseMap } from '@api/statisticalAnalysis/reportChart.js'
import { mapPro } from './../../mixins/mapPro'// 字典信息
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
  components: {
    MyEcharts // 图表
  },
  mixins: [mapPro],
  props: {
    // 高度
    height: {
      type: String,
      default: '100%'
    },
    mapId: {
      type: String,
      default: 'mapId'
    },
    searchData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      // 图表配置
      chartOption: {},
      searchForm: {}
    }
  },
  computed: {
    /* contextPath 配置环境路径*/
    ...mapGetters(['contextPath'])
  },
  mounted() {
    this.initChina()
    // 首次渲染地图
    const geoMap = {
      '河北省': [114.502464, 38.045475]
    }
    const dataArr = [
      {
        name: '河北省',
        value: 0
      }
    ]
    this.initEchartsMap(geoMap, dataArr)
    // 初始化数据
    this.initData()
  },
  created() {
    this.initChina()
  },
  methods: {
    // 加载地图资源包
    initChina() {
      // return new Promise((resolve, reject) => {
      // 判断是否为地图，如果是地图则加载资源包否则不加载
      const url = this.contextPath + '/map/china.json'// 配置环境路径
      fetch(url).then((response) => {
        return response.json()
      }).then((chinaJson) => {
        this.$echarts.registerMap('china', chinaJson)
        // resolve()
      })
      // })
    },
    initData() {
      getBiddingAndPurchaseMap(this.searchData).then((res) => {
        const geoMap = {}
        const dataArr = []
        res.data.forEach(item => {
          dataArr.push({
            name: item.city, // 地区(省份)
            value: item.endCount, // 已完成项目
            buyersName: item.buyersName, // 采购单位
            // endCount: item.endCount, // 已完成项目
            expectedWinningMoney: item.expectedWinningMoney, // 进行中项目
            inProgress: item.inProgress, // 采购单位
            supplierCount: item.supplierCount // 供应商数量
          })
          // 经纬度
          geoMap[item.city] = [item.eastLongitude, item.northLatitude]
          // eastLongitude: item.eastLongitude,
          // northLatitude: item.northLatitude,
        })
        this.initEchartsMap(geoMap, dataArr)
      })
    },
    initEchartsMap(geoMap, dataArr) {
      // const mapSCatterChart = document.getElementById(this.mapId)
      const mapChart = this.$echarts.init(document.getElementById('mapChartsDetail'))
      var oBack = document.getElementById('backDetail')
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      initEcharts('china')
      var that = this
      function initEcharts(map) {
        var option = {
          // 提示框
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(50,50,50,0.6)', // 提示框浮层的背景颜色。
            borderColor: '#333', // 提示框浮层的边框颜色。
            borderWidth: 0, // 提示框浮层的边框宽。
            padding: 15, // 提示框浮层内边距，
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
            confine: false, // 是否将 tooltip 框限制在图表的区域内。
            textStyle: { // 提示框浮层的文本样式。
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: 14
            },
            formatter: function(params, ticket, callback) {
              if (params.data !== undefined) {
                for (var i = 0; i < dataArr.length; i++) {
                  if (params.name === dataArr[i].name) {
                    return (
                      '城市：' + dataArr[i].name +
                      '<br />' +
                      '采购单位：' + dataArr[i].buyersName +
                      '<br />' +
                      '已完成项目：' + dataArr[i].value + '个' +
                      '<br />' +
                      '进行中项目：' + dataArr[i].inProgress + '个' +
                      '<br />' +
                      '中标金额：' + dataArr[i].expectedWinningMoney + '万元' +
                      '<br />' +
                      '供应商数量：' + dataArr[i].supplierCount + '家'
                    )
                  }
                }
              } else {
                return (
                  '城市：' + params.name
                )
              }
            }
          },
          geo: {
            map: map,
            roam: false,
            // scaleLimit: {
            //   min: 1.2,
            //   max: 3
            // },
            zoom: 1.2,
            // 图形上的文本标签，可用于说明图形的一些数据信息
            label: {
              // normal: {
              show: true,
              fontSize: '12',
              color: '#fff'
              // }
            },
            itemStyle: {
              areaColor: 'rgba(255,255,255,0)',
              borderColor: '#189eff'
            },
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(0,0,0,0.1)'
              }
            }
          },
          series: [
            {
              name: '信息量',
              type: 'map',
              // 这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai'
              map: map,
              geoIndex: 0
            },
            {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: function(val) {
                // var a = (maxSize4Pin - minSize4Pin) / (max - min)
                // var b = minSize4Pin - a * min
                // b = maxSize4Pin - a * max
                // return a * val[2] + b
                return 20
              },
              itemStyle: {
                color: '#F62157' // 标志颜色
              },
              zlevel: 6,
              data: convertData(dataArr)
            },
            {
              name: 'light',
              type: 'map',
              map: 'hunan',
              geoIndex: 0,
              // aspectScale: 0.75, // 长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: false,
                  color: '#fff'
                },
                itemStyle: {
                  areaColor: '#2B91B7'
                }
              },
              roam: true,
              itemStyle: {
                areaColor: '#031525',
                borderColor: '#FFFFFF'
              },
              animation: false,
              data: dataArr
            }
          ]
        }
        mapChart.setOption(option)
      }
      // 点击返回按钮
      oBack.onclick = function() {
        that.$refs.backDetail.style.display = 'none'
        // pName = 'china'
        initEcharts('china', '中国')
      }
      // 点击触发
      mapChart.on('click', param => {
        if (param.name in this.provinces) {
          // 处理省模块
          const names = param.name
          for (const key in this.provinces) {
            if (names === key) {
              showProvince(this.provinces[key], key)
              break
            }
          }
        }
      })
      // 展示对应的省
      function showProvince(eName, param) {
        const url = `${that.contextPath}/map/province/${eName}.json`
        // 对应城市
        // pName = eName
        axios(url).then((res) => {
          // 显示返回按钮
          that.$refs.backDetail.style.display = 'block'
          that.$echarts.registerMap(param, res.data)
          initEcharts(param)
        })
      }
    }
  }

}
</script>
<style lang="less" scoped>
.hidden {
  display:none;
}
</style>
