<template>
<div class="map-wrapper">
  <BorderBox class="sum">
    <p>采集点数量</p>
    <h2><m-count class="count" :value="80" :decimal="0"/> 个</h2>
  </BorderBox>
  <div class="map" ref="map"/>
  <!-- <div class="visual-range">
    <p>
      采集点数量<br/>
      <span>（单位：个）</span>
    </p>
    <div class="slider-wrapper">
      <Slider class="slider" v-model="range" range :max="80"/>
      <m-count class="count" :value="0" :decimal="0"/>
      <m-count class="count" :value="80" :decimal="0"/>
    </div>
  </div> -->
</div>
</template>

<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
const mock = [
  {name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
  {name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},
  {name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'},
  {name: '福建省三明市鲜活水产品批发市场', address: '三明市三元区白沙长安路34号', province: '福建', value: [117.61887900, 26.25029400], visualMap: false, newDate: '2020-08-15'},
  {name: '江西省九江鲜活水产品批发市场', address: '九江市庐峰路东端', province: '江西', value: [116.05598000, 29.75385500], visualMap: false, newDate: '2020-08-15'},
  {name: '江西南昌市水产品综合交易批发市场', address: '江西省南昌市东湖区富有路9号', province: '江西', value: [115.92204500, 28.71739100], visualMap: false, newDate: '2020-08-15'},
  {name: '山东省王尔庄海蜇批发市场', address: '山东省滨州市沾化县富桥路405号', province: '山东', value: [117.94507500, 37.75016700], visualMap: false, newDate: '2020-08-15'},
  {name: '山东省临沂市华东淡水鱼批发市场', address: '临沂市北园路6号', province: '山东', value: [118.34964500, 35.15801000], visualMap: false, newDate: '2020-08-15'},
  {name: '山东省威海水产品批发市场', address: '山东省威海市环翠区顺河街188号', province: '山东', value: [122.11957200, 37.50407200], visualMap: false, newDate: '2020-08-15'},
  {name: '河南省郑州市柳林水产批发市场', address: '郑州市金水区柳林镇郑花路北段柳林水产品批发市场', province: '河南', value: [113.69081200, 34.83705700], visualMap: false, newDate: '2020-08-15'},
  {name: '湖北省武汉市白沙洲农副产品大市场', address: '湖北省武汉市洪山区张家湾特1号', province: '湖北', value: [114.27418500, 30.47076800], visualMap: false, newDate: '2020-08-15'},
  {name: '湖北省孝感市南大水产品批发市场', address: '孝感市107国道与316国道交合处', province: '湖北', value: [113.97923200, 30.88929600], visualMap: false, newDate: '2020-08-15'},
  {name: '湖南洞庭渔都股份有限公司（岳阳洞庭水产批发市场）', address: '岳阳市楼区东风湖路78号', province: '湖南', value: [113.10916800, 29.39883800], visualMap: false, newDate: '2020-08-15'},
  {name: '广东省南海盐步环球水产交易市场', address: '佛山市南海区广佛公路平地路段', province: '广东', value: [113.16316200, 23.11600200], visualMap: false, newDate: '2020-08-15'},
  {name: '广东省汕头大洋水产交易市场', address: '汕头市海滨路33号', province: '广东', value: [116.71700700, 23.35911200], visualMap: false, newDate: '2020-08-15'},
  {name: '东莞市沿江富绅市场经营管理有限公司', address: '东莞市虎门镇沿江东路62号新洲水产品批发市场办公室', province: '广东', value: [113.67847800, 22.81675900], visualMap: false, newDate: '2020-08-15'},
  {name: '广州水产集团鱼市场经营管理有限公司', address: '广州市荔湾区芳村招村70亩商业区', province: '广东', value: [113.26457300, 23.14327900], visualMap: false, newDate: '2020-08-15'},
  {name: '广东省江门水产（咸鱼）批发市场', address: '江门市江会路70号', province: '广东', value: [113.08075600, 22.56740300], visualMap: false, newDate: '2020-08-15'},
  {name: '广西北海市外沙水产品批发市场', address: '广西北海市合浦县廉州镇爱卫街二巷2号', province: '广西', value: [109.21357100, 21.66720800], visualMap: false, newDate: '2020-08-15'},
  {name: '四川省内江市水产批发市场', address: '四川省内江市中区牌楼路313号', province: '四川', value: [105.07417600, 29.57049200], visualMap: false, newDate: '2020-08-15'},
  {name: '福州名成水产品市场有限公司', address: '福州市马尾区青洲路66号', province: '福建', value: [119.47893300, 25.99550200], visualMap: false, newDate: '2020-08-15'},
  {name: '四川成都农产品中心批发市水产分场', address: '成都市西航港成白路98号', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
  {name: '乌鲁木齐北园春果业经营有限责任公司', address: '新疆乌鲁木齐市沙依巴克区克拉玛依西街1168号北园春农产品批发市场B4-4-1-9号', province: '新疆', value: [87.58357400, 43.82808700], visualMap: false, newDate: '2020-08-15'},
  {name: '浙江省温州浙福边贸水产城（苍南）', address: '浙江苍南县城建兴西路608号', province: '浙江', value: [120.38836000, 27.50192500], visualMap: false, newDate: '2020-08-15'},
  {name: '山东省青岛市城阳蔬菜水产品批发市场有限公司', address: '青岛城阳区政府308国道西侧山东国际农展中心二楼信息科', province: '山东', value: [120.38249400, 36.30921600], visualMap: false, newDate: '2020-08-15'},
  {name: '北京京丰岳各庄农副产品批发市场中心', address: '北京市丰台区西四环中路140号', province: '北京', value: [116.28465800, 39.88338100], visualMap: false, newDate: '2020-08-15'},
  {name: '山西太原五龙口海鲜市场', address: '太原市敦化南路49号', province: '山西', value: [112.59758100, 37.88774100], visualMap: false, newDate: '2020-08-15'},
  {name: '河北唐山市君瑞联合农贸市场有限公司', address: '河北省唐山市南新东道252号', province: '河北', value: [118.11221200, 39.65745100], visualMap: false, newDate: '2020-08-15'},
  {name: '呼和浩特融桥海鲜批发市场', address: '大学东路与展东路路口', province: '内蒙古', value: [111.67110800, 40.83416600], visualMap: false, newDate: '2020-08-15'},
  {name: '辽宁省东港黄海水产品市场', address: '东港市东港路98号', province: '辽宁', value: [124.15754500, 39.91121100], visualMap: false, newDate: '2020-08-15'},
  {name: '辽宁省盘山县胡家河蟹市场', address: '盘山县胡家镇', province: '辽宁', value: [121.95696200, 41.29536400], visualMap: false, newDate: '2020-08-15'},
  {name: '江苏凌家塘市场发展有限公司', address: '江苏省常州市武进区新312国道邹区段西侧', province: '江苏', value: [119.86913300, 31.78283700], visualMap: false, newDate: '2020-08-15'},
  {name: '江苏省苏州市南环桥农副产品批发市场', address: '苏州市南环东路南环桥东堍', province: '江苏', value: [120.69496400, 31.26949400], visualMap: false, newDate: '2020-08-15'},
  {name: '浙江省中国水产城(象山石浦)', address: '浙江省宁波市象山县石浦镇中国水产城管委会', province: '浙江', value: [121.91634400, 29.19378000], visualMap: false, newDate: '2020-08-15'},
  {name: '浙江省慈溪农副产品批发市场', address: '慈溪市白沙街道东外环线东北侧（二楼财务室王群）', province: '浙江', value: [121.29022500, 30.17822100], visualMap: false, newDate: '2020-08-15'},
  {name: '浙江省台州市华东水产品交易有限公司', address: '浙江省台州市椒江区工人西路998号（葭芷渔港内）', province: '浙江', value: [121.43639400, 28.68584300], visualMap: false, newDate: '2020-08-15'},
  {name: '浙江省瑞安市瑞城水产品市场管理有限公司', address: '浙江省瑞安经济开发区滨江大道860号', province: '浙江', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
  {name: '大连盛兴水产品交易市场有限公司', address: '辽宁省大连市西岗区沿海街8号', province: '辽宁', value: [121.72472600, 39.02015600], visualMap: false, newDate: '2020-08-15'},
  {name: '温州市水产批发交易市场', address: '温州市龙湾区海棠路与滨海四道交叉口西南50米', province: '浙江', value: [120.80459200, 27.83950300], visualMap: false, newDate: '2020-08-15'},
  {name: '浙江省中国舟山国际水产城', address: '舟山市普陀区沈家门渔市大街1号5F', province: '浙江', value: [122.29109200, 29.94694100], visualMap: false, newDate: '2020-08-15'},
  {name: '安徽省合肥市周谷堆水产品批发市场', address: '安徽省合肥市瑶海区大兴镇', province: '安徽', value: [117.39211600, 31.84919800], visualMap: false, newDate: '2020-08-15'},
  {name: '河北省秦皇岛海港区天桥市场', address: '秦皇岛海港区', province: '河北', value: [119.61504900, 39.93687900], visualMap: false, newDate: '2020-08-15'},
  {name: '北京大红门京深海鲜批发市场有限公司', address: '北京市丰台区石榴庄西街232号', province: '北京', value: [116.42196000, 39.84838000], visualMap: false, newDate: '2020-08-15'},
  {name: '河北省石家庄雨润农产品全球采购有限公司', address: '石家庄南二环大桥', province: '河北', value: [114.50717400, 37.97755600], visualMap: false, newDate: '2020-08-15'},
  {name: '辽宁省沈阳水产品批发市场', address: '沈阳水产品', province: '辽宁', value: [123.31391000, 41.78260900], visualMap: false, newDate: '2020-08-15'},
  {name: '辽宁省前当堡鲜鱼批发市场', address: ' 无', province: '辽宁', value: [122.88651200, 41.78901000], visualMap: false, newDate: '2020-08-15'},
  {name: '吉林省长春市光复路水产批发市场', address: '长春市光复路', province: '吉林', value: [125.34919600, 43.91155900], visualMap: false, newDate: '2020-08-15'},
  {name: '吉林省延吉市西市场', address: '吉林省延边朝鲜族自治州延吉市解放路', province: '吉林', value: [129.51478200, 42.91275800], visualMap: false, newDate: '2020-08-15'},
  {name: '上海东方国际水产中心经营管理有限公司', address: '上海东方国际水产中心', province: '上海', value: [121.54900500, 31.33938500], visualMap: false, newDate: '2020-08-15'},
  {name: '安徽省安庆市皖宜季牛水产养殖有限责任公司长青大市场分公司', address: '安庆市华中路79号', province: '安徽', value: [117.079784, 30.513423], visualMap: false, newDate: '2020-08-15'},
  {name: '安徽省蚌埠城南农副产品交易有限公司', address: '安徽省蚌埠', province: '安徽', value: [117.33269200, 32.89946300], visualMap: false, newDate: '2020-08-15'},
  {name: '中国供销上饶农产品交易城', address: '江西省上饶市上饶县城南大道11号 ', province: '江西', value: [117.92193300, 28.39829100], visualMap: false, newDate: '2020-08-15'},
  {name: '山东济南海鲜大市场', address: '济南市市中区小梁庄街277号', province: '山东', value: [116.99420600, 36.64910600], visualMap: false, newDate: '2020-08-15'},
  {name: '长沙市马王堆农产品股份有限公司海鲜水产批发市场', address: '长沙市马王堆农产品股份有限公司', province: '湖南', value: [113.04102400, 28.20187700], visualMap: false, newDate: '2020-08-15'},
  {name: '海南马井水产品交易市场管理有限公司', address: '海南马井', province: '海南', value: [109.22729200, 19.72200900], visualMap: false, newDate: '2020-08-15'},
  {name: '重庆市乐邦水产品有限公司', address: '重庆沙坪坝区井口街道', province: '重庆', value: [106.48452800, 29.59447400], visualMap: false, newDate: '2020-08-15'},
  {name: '重庆市龙门实业（集团）有限公司西三街农副水产品市场', address: '龙门实业（集团）有限公司西三街农副水产品市场', province: '重庆', value: [106.58898500, 29.56126400], visualMap: false, newDate: '2020-08-15'},
  {name: '普洱天恒市场经营公司五一市场', address: '普洱天恒市场经营公司五一市场', province: '云南', value: [100.97417100, 22.79145600], visualMap: false, newDate: '2020-08-15'},
  {name: '西安海隆实业有限责任公司（北二环水产批发中心）', address: '西安海隆实业有限责任公司（北二环水产批发中心）', province: '陕西', value: [108.95263000, 34.27420400], visualMap: false, newDate: '2020-08-15'},
  {name: '甘肃省兰州市绿色食品市场', address: '兰州市绿色食品市场', province: '甘肃', value: [103.88351700, 36.06708900], visualMap: false, newDate: '2020-08-15'},
  {name: '江苏省南京市众彩农副产品批发市场', address: '南京市', province: '江苏', value: [118.89382400, 31.99477500], visualMap: false, newDate: '2020-08-15'},
  {name: '甘肃陇南市武都区体育场大市场', address: '陇南市武都区体育场', province: '甘肃', value: [104.967414, 33.373396], visualMap: false, newDate: '2020-08-15'},
  {name: '白银市白银区文化路市场', address: '白银市白银区文化路', province: '甘肃', value: [104.184824, 36.554399], visualMap: false, newDate: '2020-08-15'},
  {name: '张掖市南关蔬菜果品水产品批发市场', address: '张掖市南关饮马桥', province: '甘肃', value: [100.468753, 38.930773], visualMap: false, newDate: '2020-08-15'},
  {name: '山东日照市石臼市场', address: '日照市石臼街道石臼路', province: '山东', value: [119.55451100, 35.39756900], visualMap: false, newDate: '2020-08-15'},
  {name: '福建省莆田市闽中水产品批发市场', address: ' 福建省莆田市涵江区塘北路西侧', province: '福建', value: [119.11405600, 25.46307200], visualMap: false, newDate: '2020-08-15'},
  {name: '攀枝花攀达水产批发市场有限公司', address: '攀枝花市东区银江镇沙坝村马家田', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
  {name: '重庆市涪陵区新大兴国际农产品批发市场', address: '重庆市涪陵区人民东路后街109号', province: '重庆', value: [107.40430500, 29.71266100], visualMap: false, newDate: '2020-08-15'},
  {name: '江西省萍乡市城南水产批发市场', address: '萍乡市环城南路与萍麻公路交汇处', province: '江西', value: [113.85277800, 27.61884100], visualMap: false, newDate: '2020-08-15'},
  {name: '上海江杨水产品批发市场经营管理有限公司', address: '上海市宝山区铁城路1555号', province: '上海', value: [121.458468, 31.361636], visualMap: false, newDate: '2020-08-15'},
  {name: '湖北中和农产品大市场有限责任公司', address: '仙桃市黄金大道西段55号', province: '湖北', value: [113.41922500, 30.36607300], visualMap: false, newDate: '2020-08-15'},
  {name: '湖州菱湖乌板桥水产品批发市场', address: '浙江省湖州市南浔区菱湖镇北桥浜路52号', province: '浙江', value: [120.16171900, 30.78536700], visualMap: false, newDate: '2020-08-15'},
  {name: '辽宁省大连辽渔国际水产品市场', address: '辽宁省大连市甘井子区大连湾街8-136号', province: '辽宁', value: [121.70593400, 39.02742000], visualMap: false, newDate: '2020-08-15'},
  {name: '广西南宁海陆丰水产品批发市场', address: ' 无', province: '广西', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
  {name: '云南华潮水产品批发市场', address: ' 无', province: '云南', value: [102.77981500, 24.97897700], visualMap: false, newDate: '2020-08-15'},
  {name: '上海江阳水产品批发交易市场经营管理有限公司', address: '上海市宝山区泰和路1700号', province: '上海', value: [121.45575100, 31.36268000], visualMap: false, newDate: '2020-08-15'},
  {name: '三亚崖州港湾投资有限公司', address: '海南省三亚市崖州区崖州中心渔港', province: '海南', value: [109.13429200, 18.36210000], visualMap: false, newDate: '2020-08-15'},
  {name: '湖北宜昌三峡物流园有限公司水产市场', address: '伍家乡三峡物流园', province: '湖北', value: [11.39861700, 30.66971200], visualMap: false, newDate: '2020-08-15'},
  {name: '海南海口水产品批发市场', address: '新埠路8号 ', province: '海南', value: [110.37419400, 20.07357500], visualMap: false, newDate: '2020-08-15'},
  {name: '湖北黄冈硕源水产品批发市场', address: ' 无', province: '湖北', value: [114.89112300, 30.43404300], visualMap: false, newDate: '2020-08-15'},
]
const provinceData = [
  { name: '北京', value: 177 },
  { name: '天津', value: 42 },
  { name: '河北', value: 102 },
  { name: '山西', value: 81 },
  { name: '内蒙古', value: 17 },
  { name: '辽宁', value: 67 },
  { name: '吉林', value: 182 },
  { name: '黑龙江', value: 100 },
  { name: '上海', value: 24 },
  { name: '江苏', value: 299 },
  { name: '浙江', value: 114 },
  { name: '安徽', value: 29 },
  { name: '福建', value: 316 },
  { name: '江西', value: 91 },
  { name: '山东', value: 19 },
  { name: '河南', value: 137 },
  { name: '湖北', value: 26 },
  { name: '湖南', value: 114 },
  { name: '重庆', value: 91 },
  { name: '四川', value: 25 },
  { name: '贵州', value: 62 },
  { name: '云南', value: 83 },
  { name: '西藏', value: 9 },
  { name: '陕西', value: 80 },
  { name: '甘肃', value: 256 },
  { name: '青海', value: 10 },
  { name: '宁夏', value: 18 },
  { name: '新疆', value: 67 },
  { name: '广东', value: 123 },
  { name: '广西', value: 59 },
  { name: '海南', value: 14 }

]
export default {
  name: 'FishingPriceMap',
  components: {
    BorderBox,
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    visualLabel: {
      type: Array,
      default() {
        return ['高', '低']
      }
    },
    visualFormatter: {
      type: [String, Function],
      default() {
        return ({data}) => {
          if (data.name && data.address) {
            return `
              <div class="map-tooltip-info">
                <h3>${data.name}</h3>
                <p><span>地址：</span>${data.address}</p>
                <p><span>最新采集时间：</span>${data.newDate}</p>
              </div>
            `
          }
          return null
        }
      }
    },
    visualConfig: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      range: [0, 80],
      map: null,
      mapName: 'china',
      config: {
        geo: {
          map: 'china',
          left: '1%',
          right: '1%',
          // top: 'auto',
          // bottom: '10%',
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          // scaleLimit: { //滚轮缩放的极限控制
          //   min: 0.8,
          //   max: 2,
          // },
          label: {
            normal: {
              show: true,
              color: '#fff',
              fontSize: 12 * this.sizeRate,
            },
            emphasis: {
              color: '#fff',
              fontSize: 15 * this.sizeRate,
              // fontFamily: 'Pangmenzhengdao',
            }
          },
          itemStyle: {
            normal: {
              // areaColor: 'rgba(91, 213, 255, 0.2)',
              borderColor: 'rgba(91, 213, 255, 0.9)',
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: '#069ae1',
            }
          },
          regions: [],
        },
        series: []
      },
      curProvince: null,
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  },
  methods: {
    initMap() {
      // 初始化echarts
      this.$echarts.registerMap(this.mapName, china)
      this.map = this.$echarts.init(this.$refs.map)
      // this.addEvent()
      this.config.series.push({
        type: 'map',
        map: this.mapName,
        geoIndex: 0,
        data: provinceData,
      })
      this.config.series.push({
        type: 'scatter', // series图表类型
        coordinateSystem: 'geo', // series坐标系类型
        data: mock,
        itemStyle: {
          color: 'gold'
        },
        symbolSize: 20 * this.sizeRate,
        symbol: 'pin',
        geoIndex: 0,
      })
      this.config.tooltip = {
        trigger: 'item',
        formatter: this.visualFormatter,
        // extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
      }
      this.config.visualMap = Object.assign({
        show: false,
        inRange: {
          // opacity: 1,
          color: ['rgba(140,228,252,0.1)', '#0ed7e1', '#069ae1']
          // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
        }
      }, this.visualConfig)
      this.map.setOption(this.config)
    },
    addEvent() {
      // 监听地图点击事件
      this.map.on('click', (ev) => {
        const {name} = ev.data
        console.log(name)
        this.setRegions(name)
        this.curProvince = name
        this.$emit('select', name)
      })
      // 点击空白处则取消选中状态
      this.map.getZr().on('click', e => {
        if (!e.target && this.curProvince) {
          const name = this.curProvince
          this.setRegions(null)
          this.$emit('select', name)
        }
      })
    },
    setRegions(name) {
      this.curProvince = name
      if (!name) {
        this.config.geo.regions = []
        this.map.setOption(this.config)
        return
      }
      let regions = [{
        name,
        selected: true,
        itemStyle: {
          areaColor: '#5ad4ff',
          shadowColor: 'rgba(0, 0, 0, 1)',
          shadowBlur: 10,
          shadowOffsetY: 10,
          shadowOffsetX: -5,
        }
      }]
      if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
        regions = []
      }
      this.config.geo.regions = regions
      this.map.setOption(this.config)
    },
  },
  // watch: {
  //   data(cur, past) {
  //     if (cur && cur !== past && cur.length > 0) {
  //       this.config.series.push({
  //         type: 'scatter',
  //         coordinateSystem: 'geo',
  //         // map: this.mapName,
  //         // geoIndex: 0,
  //         data: cur,
  //       })
  //       this.config.tooltip = {
  //         trigger: 'item',
  //         formatter: this.visualFormatter,
  //       }
  //       // this.config.visualMap = Object.assign({
  //       //   show: false,
  //       //   inRange: {
  //       //     opacity: 0.5,
  //       //     color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
  //       //   }
  //       // }, this.visualConfig)
  //       this.map.setOption(this.config)
  //     }
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
.map-wrapper
  width 100%
  height 100%
  position relative
  padding-top 3rem
  >.map
    position absolute
    width 45%
    height 250%
    z-index 99
  >.sum
    width 40%
    margin 2rem auto 0
    text-align center
    font-weight bold
    h2,.count
      color $edgeColor !important
      font-family $font-pang !important
      font-size 1.5rem !important
  .visual-range
    display flex
    z-index 9999
    width 100%
    align-items center
    justify-content center
    position absolute
    bottom 2rem
    p
      text-align center
      margin-right 1rem
      span
        font-size .8rem
    .slider-wrapper
      position relative
      width 60%
      .slider
        width 100%
      .count
        position absolute
        &:first-child
          left 0
        &:last-child
          right 0
</style>
<style lang="stylus">
.map-tooltip-info
  color $edgeColor
  padding 1rem
  border .1rem solid $edgeColor
  span
    color #fff
</style>
