<template>
<div class="map-wrapper">
  <BorderBox class="sum">
    <p>{{curProvince ? `${curProvince}示范企业数量` : '示范区数量'}}</p>
    <h2><m-count class="count" :value="curProvince ? (provinceData.find(item => item.name === curProvince).company) : 95 " :decimal="0"/> 个</h2>
  </BorderBox>
  <div class="map" ref="map"/>
</div>
</template>

<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
const mock = [
  {name: '天津市宝坻区鸿腾国家级稻渔综合种养示范区', area: 3000, product1: 1650, val1: 594, product2: 100, val2: 243.75, value: [117.525896, 39.575499], visualMap: false},
  {name: '吉林省白城市弘博国家级稻渔综合种养示范区', area: 2000, product1: 1220, val1: 497.76, product2: 30.2, val2: 151, value: [122.928114, 45.574453], visualMap: false},
  {name: '吉林省东辽县金洲国家级稻渔综合种养示范区', area: 3000, product1: 1200, val1: 1200, product2: 47, val2: 111, value: [124.999886, 42.941805], visualMap: false},
  {name: '吉林省松原市前郭县万亩良田国家级稻渔综合种养示范区', area: 7000, product1: 3500, val1: 1530, product2: 75, val2: 180, value: [122.928114, 45.574453], visualMap: false},
  {name: '黑龙江省北安市乌裕尔国家级稻渔综合种养示范区', area: 12000, product1: 5520, val1: 1766.4, product2: 121.25, val2: 653.4, value: [126.502404, 48.246249], visualMap: false},
  {name: '黑龙江省绥化市北林区国家级稻渔综合种养示范区', area: 5000, product1: 276, val1: 967.75, product2: 197.5, val2: 130.35, value: [126.985684, 46.805695], visualMap: false},
  {name: '江苏省东海县瑞沃国家级稻渔综合种养示范区', area: 3200, product1: 160, val1: 347, product2: 300, val2: 900, value: [118.756208, 34.541536], visualMap: false},
  {name: '江苏省盱眙县小河国家级稻渔综合种养示范区', area: 3600, product1: 1872, val1: 468, product2: 482.4, val2: 2026, value: [118.361917, 32.919313], visualMap: false},
  {name: '江苏省泗洪县环宇国家级稻渔综合种养示范区', area: 3208, product1: 1967, val1: 767, product2: 390, val2: 975, value: [118.515099, 33.405585], visualMap: false},
  {name: '江苏省沛县湖西国家级稻渔综合种养示范区', area: 6466, product1: 3556.3, val1: 925, product2: 808.25, val2: 2829, value: [117.079993, 34.724683], visualMap: false},
  {name: '江苏省盐都区七星国家级稻渔综合种养示范区', area: 4130, product1: 2040, val1: 1672, product2: 400, val2: 1794, value: [120.1187, 33.318169], visualMap: false},
  {name: '浙江省德清县清溪国家级稻渔综合种养示范区', area: 2880, product1: 1302.7, val1: 1264, product2: 191.1, val2: 3903, value: [120.197967, 30.243386], visualMap: false},
  {name: '安徽省繁昌县盛典国家级稻渔综合种养示范区', area: 5120, product1: 2621.4, val1: 734, product2: 773.2, val2: 2319.4, value: [118.342283, 31.056628], visualMap: false},
  {name: '安徽省全椒县赤镇国家级稻渔综合种养示范区', area: 13500, product1: 8100, val1: 1944, product2: 2835, val2: 9072, value: [120.197967, 30.243386], visualMap: false},
  {name: '安徽省庐江县放马滩国家级稻渔综合种养示范区', area: 12000, product1: 6000, val1: 1440, product2: 780, val2: 3120, value: [117.379768, 31.136248], visualMap: false},
  {name: '安徽省巢湖市高瑞国家级稻渔综合种养示范区', area: 3700, product1: 2035, val1: 520.96, product2: 555, val2: 1887, value: [117.599752, 31.686859], visualMap: false},
  {name: '安徽省肥东县润枝国家级稻渔综合种养示范区', area: 8530, product1: 4423.6, val1: 2875.34, product2: 980.95, val2: 3923.8, value: [117.488041, 31.743138], visualMap: false},
  {name: '安徽省全椒县银花国家级稻渔综合种养示范区', area: 5200, product1: 2860, val1: 692.12, product2: 728, val2: 2184, value: [118.252027, 32.117209], visualMap: false},
  {name: '安徽省宣城市念念国家级稻渔综合种养示范区', area: 4500, product1: 2700, val1: 648, product2: 675, val2: 2025, value: [119.007731, 30.984564], visualMap: false},
  {name: '福建省松溪县稻花鱼国家级稻渔综合种养示范区', area: 360, product1: 165.6, val1: 129.168, product2: 16.2, val2: 81, value: [118.73601, 27.595787], visualMap: false},
  {name: '福建省政和县瑞圣国家级稻渔综合种养示范区', area: 613, product1: 306.5, val1: 61.3, product2: 5.3, val2: 21.2, value: [118.641993, 27.420024], visualMap: false},
  {name: '江西省彭泽县九江凯瑞国家级稻渔综合种养示范区', area: 10000, product1: 5000, val1: 1000, product2: 1500, val2: 4500, value: [116.678683, 29.954903], visualMap: false},
  {name: '江西省万载县丁家源国家级稻渔综合种养示范区', area: 3000, product1: 1350, val1: 486, product2: 285, val2: 684, value: [116.471523, 29.540593], visualMap: false},
  {name: '江西省余江县神农氏国家级稻渔综合种养示范区', area: 2800, product1: 557.52, val1: 1204.2432, product2: 739.48, val2: 7386.128, value: [116.991676, 28.375221], visualMap: false},
  {name: '江西省彭泽县中梁国家级稻渔综合种养示范区', area: 6169, product1: 4000, val1: 800, product2: 1230, val2: 1500, value: [116.668768, 29.917313], visualMap: false},
  {name: '江西省进贤县军山湖国家级稻渔综合种养示范区', area: 7600, product1: 3762, val1: 790, product2: 760, val2: 623, value: [116.286082, 28.61954], visualMap: false},
  {name: '山东省鱼台县丰谷国家级稻渔综合种养示范区', area: 5600, product1: 2275, val1: 1001, product2: 450, val2: 2700, value: [116.595303, 35.088097], visualMap: false},
  {name: '山东省滨城市澍稻廪实国家级稻渔综合种养示范区', area: 6000, product1: 2100, val1: 446, product2: 135, val2: 652.5, value: [118.560394, 37.931575], visualMap: false},
  {name: '山东省高青县大芦湖国家级稻渔综合种养示范区', area: 500, product1: 187.6, val1: 260, product2: 37.5, val2: 168, value: [117.896273, 37.240488], visualMap: false},
  {name: '山东省东营市汇海国家级稻渔综合种养示范区', area: 3000, product1: 990, val1: 257.4, product2: 68, val2: 307.2, value: [118.649066, 37.329375], visualMap: false},
  {name: '河南省潢川县黄国粮业国家级稻渔综合种养示范区', area: 4564, product1: 2078, val1: 831.2, product2: 253.8, val2: 761, value: [115.11061, 32.134403], visualMap: false},
  {name: '河南省光山县青龙河国家级稻渔综合种养示范区', area: 3620, product1: 1810, val1: 543, product2: 289.6, val2: 231.68, value: [114.704624, 31.985003], visualMap: false},
  {name: '河南华来时代稻渔综合种养示范区', area: 750, product1: 397.5, val1: 119.25, product2: 81.25, val2: 372, value: [112.949188, 33.045476], visualMap: false},
  {name: '湖北省龙感湖管理区洋湖国家级稻渔综合种养示范区', area: 10000, product1: 6000, val1: 1440, product2: 1500, val2: 3300, value: [112.529443, 32.997326], visualMap: false},
  {name: '湖北省潜江市莱克国家级稻渔综合种养示范区', area: 40600, product1: 20706, val1: 4969.44, product2: 8526, val2: 20462.4, value: [112.884988, 30.417564], visualMap: false},
  {name: '湖北省潜江市华山国家级稻渔综合种养示范区', area: 30000, product1: 18000, val1: 4680, product2: 8100, val2: 17820, value: [112.793, 30.319697], visualMap: false},
  {name: '湖北省公安县通威国家级稻渔综合种养示范区', area: 5863, product1: 3205.8, val1: 865, product2: 1817.53, val2: 6543, value: [113.412162, 30.44749], visualMap: false},
  {name: '湖北省汉川市南河古渡国家级稻渔综合种养示范区', area: 6680, product1: 3383.42, val1: 1001.49, product2: 750.164, val2: 2190.48, value: [113.756978, 30.492272], visualMap: false},
  {name: '湖北省监利县福娃国家级稻渔综合种养示范区', area: 12100, product1: 4840, val1: 1450, product2: 980.1, val2: 2940, value: [112.967447, 30.129134], visualMap: false},
  {name: '湖北省京山市盛老汉国家级稻渔综合种养示范区', area: 5600, product1: 2240, val1: 618, product2: 1120, val2: 28672, value: [112.790209, 30.892451], visualMap: false},
  {name: '湖北省天门市四海国家级稻渔综合种养示范区', area: 6800, product1: 3720, val1: 4400, product2: 776, val2: 5900, value: [113.355574, 30.523175], visualMap: false},
  {name: '湖南省南县君富国家级稻渔综合种养示范区', area: 3075.55, product1: 3383.105, val1: 420, product2: 676.621, val2: 1020, value: [112.386204, 29.201543], visualMap: false},
  {name: '湖南省华容县天星洲国家级稻渔综合种养示范区', area: 5620.7, product1: 3642.408, val1: 983.45, product2: 786.94, val2: 1888.66, value: [112.678457, 29.525739], visualMap: false},
  {name: '广西壮族自治区桂平市维军生态国家级稻渔综合种养示范区', area: 3350, product1: 2574.81, val1: 1390.395, product2: 652.78, val2: 3270.384, value: [110.001602, 23.670861], visualMap: false},
  {name: '广西壮族自治区桂林市绿淼国家级稻渔综合种养示范区', area: 1600, product1: 800, val1: 240, product2: 96, val2: 576, value: [109.782755, 25.175259], visualMap: false},
  {name: '四川省昭化区万田国家级稻渔综合种养示范区', area: 4300, product1: 1935, val1: 564.3, product2: 465, val2: 747, value: [105.868863, 32.42413], visualMap: false},
  {name: '四川省宣汉县鸭池国家级稻渔综合种养示范区', area: 2000, product1: 1000, val1: 300, product2: 200, val2: 400, value: [107.671792, 31.56672], visualMap: false},
  {name: '四川省开江县稻法自然国家级稻渔综合种养示范区', area: 3000, product1: 1242, val1: 497, product2: 262.5, val2: 615, value: [107.870691, 31.095923], visualMap: false},
  {name: '四川省江油市贯福国家级稻渔综合种养示范区', area: 4360, product1: 2005.6, val1: 816.5, product2: 649.75, val2: 1348.8, value: [104.594498, 31.659064], visualMap: false},
  {name: '四川省隆昌市隆农汇国家级稻渔综合种养示范区', area: 5632, product1: 2421.76, val1: 1453, product2: 563.2, val2: 2816, value: [105.31057, 29.411789], visualMap: false},
  {name: '四川省邛崃市稻渔源国家级稻渔综合种养示范区', area: 5000, product1: 2500, val1: 1680, product2: 750, val2: 3000, value: [103.589504, 30.387263], visualMap: false},
  {name: '贵州省湄潭县满地金国家级稻渔综合种养示范区', area: 1200, product1: 540, val1: 270, product2: 150, val2: 600, value: [107.503809, 27.689073], visualMap: false},
  {name: '贵州省遵义市山至金国家级稻渔综合种养示范区', area: 670, product1: 335, val1: 536, product2: 33.5, val2: 134, value: [107.056897, 27.76848], visualMap: false},
  {name: '云南省元阳县呼山众创国家级稻渔综合种养示范区', area: 84, product1: 17.734, val1: 12.41, product2: 5.04, val2: 30.24, value: [102.85925, 23.231776], visualMap: false},
  {name: '云南省大理市荣江国家级稻渔综合种养示范区', area: 1020, product1: 663, val1: 954.7, product2: 51, val2: 255, value: [100.327186, 25.619677], visualMap: false},
  {name: '云南省红河县红河中海国家级稻渔综合种养示范区', area: 620, product1: 235.6, val1: 141.36, product2: 18.692, val2: 52.34, value: [102.80335, 23.975334], visualMap: false},
  {name: '陕西省榆林市百川国家级稻渔综合种养示范区', area: 2000, product1: 900, val1: 234, product2: 30, val2: 168, value: [109.535959, 38.067351], visualMap: false},
  {name: '陕西省旬阳县绿富地国家级稻渔综合种养示范区', area: 2300, product1: 1311, val1: 280, product2: 345, val2: 414, value: [109.366707, 32.844277], visualMap: false},
  {name: '宁夏回族自治区贺兰县广银米业国家级稻渔综合种养示范区', area: 3600, product1: 1828.2, val1: 586.46, product2: 201.75, val2: 345, value: [106.375024, 38.633595], visualMap: false},
  {name: '宁夏回族自治区贺兰县生瑞国家级稻渔综合种养示范区', area: 7300, product1: 4022.3, val1: 1046, product2: 216.6, val2: 543, value: [106.335298, 38.558586], visualMap: false},
  {name: '宁夏回族自治区灵武市金河渔业国家级稻渔综合种养示范区', area: 3115, product1: 1401.75, val1: 504.63, product2: 68.396, val2: 246.67, value: [106.346874, 38.274853], visualMap: false},
  {name: '宁夏回族自治区银川市军华国家级稻渔综合种养示范区', area: 3000, product1: 1800, val1: 432, product2: 31.5, val2: 78.6, value: [106.186844, 38.568521], visualMap: false},
  {name: '部级水产健康养殖示范场', area: 6820, product1: 4089.98, val1: 993.94, product2: 129.95, val2: 267.005, value: [106.173443, 38.565809], visualMap: false},
]
const provinceDetail = [
  {province: '江苏省', city: '连云港市东海县', name: '江苏瑞沃农业开发有限公司', manager: '李前方', phone: '18994501768', address: '江苏省东海县黄川镇新联村36-66号', value: [118.756208, 34.541536], visualMap: false},
  {province: '江苏省', city: '淮安市盱眙县', name: '盱眙小河农业发展有限公司', manager: '汪祖佳', phone: '0517-88485668', address: '盱眙县黄花塘镇岗村街西2队68号', value: [118.361917, 32.919313], visualMap: false},
  {province: '江苏省', city: '宿迁市泗洪县', name: '泗洪县环宇粮食种植家庭农场', manager: '汤球', phone: '13951199293', address: '泗洪县龙集镇', value: [118.515099, 33.405585], visualMap: false},
  {province: '江苏省', city: '沛县', name: '江苏徐垦湖西农业发展有限公司', manager: '水爱莲', phone: '15052061411', address: '沛县湖西农场', value: [117.079993, 34.724683], visualMap: false},
  {province: '江苏省', city: '盐都区', name: '盐城市盐都七星现代农业发展有限公司', manager: '宋长锋', phone: '18936318361', address: '江苏省盐城市盐都地区', value: [119.986907, 33.172954], visualMap: false},
]
const provinceData = [
  { name: '北京', value: 0 },
  { name: '河北', value: 0 },
  { name: '山西', value: 0 },
  { name: '内蒙古', value: 0 },
  { name: '辽宁', value: 0 },
  { name: '上海', value: 0 },
  { name: '湖南', value: 0 },
  { name: '重庆', value: 0 },
  { name: '西藏', value: 0 },
  { name: '甘肃', value: 0 },
  { name: '青海', value: 0 },
  { name: '新疆', value: 0 },
  { name: '广东', value: 0 },
  { name: '海南', value: 0 },
  {name: '天津', value: 1, region: 1, company: 1, area: 3000, product1: 1650, val1: 594, product2: 100, val2: 243.75, },
  {name: '吉林', value: 3, region: 3, company: 3, area: 12000, product1: 5920, val1: 3227.76, product2: 152.2, val2: 442, },
  {name: '黑龙江', value: 2, region: 2, company: 2, area: 17000, product1: 8285, val1: 2734.15, product2: 317.75, val2: 783.75, },
  {name: '江苏', value: 5, region: 5, company: 5, area: 20604, product1: 11035.3, val1: 4179, product2: 2380.65, val2: 8524, },
  {name: '浙江', value: 1, region: 1, company: 1, area: 2880, product1: 1302.7, val1: 1264, product2: 191.1, val2: 3903, },
  {name: '安徽', value: 7, region: 7, company: 7, area: 52550, product1: 26705, val1: 8854.42, product2: 6772.15, val2: 24531.2, },
  {name: '福建', value: 2, region: 2, company: 2, area: 973, product1: 472.1, val1: 190.468, product2: 21.5, val2: 102.2, },
  {name: '江西', value: 5, region: 5, company: 5, area: 29569, product1: 14669.52, val1: 4280.24, product2: 4514.48, val2: 14693.13, },
  {name: '山东', value: 4, region: 4, company: 4, area: 15100, product1: 5552.6, val1: 2064.4, product2: 690.5, val2: 3827.7, },
  {name: '河南', value: 3, region: 3, company: 3, area: 8934, product1: 4285.5, val1: 1493.45, product2: 624.65, val2: 1364.68, },
  {name: '湖北', value: 10, region: 10, company: 10, area: 117643, product1: 62095.22, val1: 19423.93, product2: 23569.79, val2: 87827.88, },
  {name: '广西', value: 2, region: 2, company: 2, area: 4950, product1: 3374.81, val1: 1630.397, product2: 748.78, val2: 3846.384, },
  {name: '四川', value: 6, region: 6, company: 6, area: 24292, product1: 11104.36, val1: 5310.8, product2: 2890.45, val2: 8926.8, },
  {name: '贵州', value: 2, region: 2, company: 2, area: 1870, product1: 875, val1: 806, product2: 183.5, val2: 734, },
  {name: '云南', value: 3, region: 3, company: 3, area: 1724, product1: 916.33, val1: 1108.47, product2: 74.73, val2: 337.58, },
  {name: '陕西', value: 2, region: 2, company: 2, area: 4300, product1: 2211, val1: 514, product2: 375, val2: 582, },
  {name: '宁夏', value: 5, region: 5, company: 6, area: 20535, product1: 13142.23, val1: 3563.03, product2: 648.2, val2: 1480.27, },
]
const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
const provinceText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']

export default {
  name: 'RiceFishMap',
  components: {
    BorderBox,
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    visualLabel: {
      type: Array,
      default() {
        return ['高', '低']
      }
    },
    visualFormatter: {
      type: [String, Function],
      default() {
        return ({data}) => {
          if (data.region && data.company) {
            return `
              <div class="map-tooltip-info">
                <h3>${data.name}</h3>
                <p><span>示范区数量：</span>${this.$com.transNumber(data.region)}个</p>
                <p><span>企业数量：</span>${this.$com.transNumber(data.company)}个</p>
                <p><span>总面积：</span>${this.$com.transNumber(data.area)}亩</p>
                <p><span>水稻总产值/产量：</span>${this.$com.transNumber(data.val1)}万元/${this.$com.transNumber(data.product1)}吨</p>
                <p><span>水产品总产值/产量：</span>${this.$com.transNumber(data.val2)}万元/${this.$com.transNumber(data.product2)}吨</p>
              </div>
            `
          } else if (data.val1 && data.product1){
            return `
              <div class="map-tooltip-info">
                <h3>${data.name}</h3>
                <p><span>总面积：</span>${this.$com.transNumber(data.area)}亩</p>
                <p><span>水稻总产值/产量：</span>${this.$com.transNumber(data.val1)}万元/${this.$com.transNumber(data.product1)}吨</p>
                <p><span>水产品总产值/产量：</span>${this.$com.transNumber(data.val2)}万元/${this.$com.transNumber(data.product2)}吨</p>
              </div>
            `
          } else {
            return null
          }
        }
      }
    },
    visualConfig: {
      type: Object,
      default() {
        return {
          min: 0,
          max: 10,
        }
      }
    },
  },
  data() {
    return {
      range: [0, 80],
      map: null,
      mapName: 'china',
      config: {
        geo: {
          map: 'china',
          // left: '1%',
          // right: '1%',
          layoutCenter: ['50%', '40%'],
          layoutSize: '100%',
          zoom: 1, //当前视角的缩放比例
          label: {
            normal: {
              show: true,
              color: '#fff',
              fontSize: 12 * this.sizeRate,
            },
            emphasis: {
              color: '#fff',
              fontSize: 15 * this.sizeRate,
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(91, 213, 255, 0.9)',
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: '#069ae1',
            }
          },
          regions: [],
        },
        series: []
      },
      curProvince: null,
      provinceData: provinceData,
    }
  },
  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.loadNationMap()
    },
    loadNationMap() {
      this.curProvince = null
      this.map.clear()
      this.config.series = [{
        type: 'map',
        map: this.mapName,
        geoIndex: 0,
        data: provinceData,
      }, {
        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)
    },
    isProvince(name) {
      return provinceText.some(province => province === name)
    },
    loadMapSource(name) {
    // 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
      const pinyinName = provinces[provinceText.indexOf(name)]
      // 引入这个对应的地图JS，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
      // build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
      require(`echarts/map/js/province/${pinyinName}`)
      this.loadMap(name)
    },
    loadMap(name) {
      this.map.clear()
      const config = {
        geo: {
          map: name,
          layoutCenter: ['50%', '40%'],
          layoutSize: '90%',
          zoom: 1, //当前视角的缩放比例
          itemStyle: {
            areaColor: 'rgba(0, 0, 0, 0.5)',
            borderColor: 'rgba(91, 213, 255, 1)',
            borderWidth: 1,
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: 'rgba(0, 0, 0, 0.5)',
            }
          },
          regions: [],
        },
        tooltip: {
          trigger: 'item',
          formatter: ({data}) => {
            return `
              <div class="map-tooltip-info">
                <h3>${data.name}</h3>
                <p><span>联系人：</span>${data.manager}</p>
                <p><span>联系电话：</span>${data.phone}</p>
                <p><span>公司地址：</span>${data.address}</p>
              </div>
            `
          },
        },
        series: [{
          type: 'scatter', // series图表类型
          coordinateSystem: 'geo', // series坐标系类型
          data: name === '江苏' ? provinceDetail : [],
          itemStyle: {
            color: 'gold'
          },
          symbolSize: 20 * this.sizeRate,
          symbol: 'pin',
          geoIndex: 0,
        }],
      }
      this.map.setOption(config)
    },
    addEvent() {
      this.map.on('click', ({name}) => {
        if (this.isProvince(name)) {
          this.$emit('select', name)
          this.curProvince = name
          this.loadMapSource(name)
        }
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.map-wrapper
  width 100%
  height 100%
  padding-top 3rem
  >.map
    width 100%
    height 100%
    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>
