<template>
  <div class="main-map">
    <div
      class="chart"
      ref="chart"
    >
    </div>
    <div class="bg">

    </div>
    <div class="tip">
      <p class="name">{{selectData.name}}</p>
      <div class="b">
        <div class="l">
          <p class="p1">项目总数</p>
          <p class="p2">{{selectData.value}}</p>
        </div>
        <ul class="r">
          <li>
            <i class="xt"></i>
            <span>胸痛</span>
            <span class="num">{{selectData.val1}}</span>
          </li>
          <li>
            <i class="cz"></i>
            <span>卒中</span>
            <span class="num">{{selectData.val2}}</span>
          </li>
          <li>
            <i class="css"></i>
            <span>创/烧伤</span>
            <span class="num">{{selectData.value - selectData.val1 - selectData.val2}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
let Echarts = require('echarts/lib/echarts');
let wuhan = require('@/assets/map/wuhan.json');
// let china = require('echarts/map/json/china');
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { name: '江岸区', selected: true, value: 541, val1: 300, val2: 200 },
        { name: '江汉区', value: 416, val1: 200, val2: 100 },
        { name: '硚口区', value: 280, val1: 200, val2: 10 },
        { name: '汉阳区', value: 971, val1: 200, val2: 100 },
        { name: '武昌区', value: 157, val1: 20, val2: 10 },
        { name: '青山区', value: 827, val1: 200, val2: 100 },
        { name: '洪山区', value: 844, val1: 200, val2: 100 },
        { name: '东西湖区', value: 850, val1: 200, val2: 100 },
        { name: '汉南区', value: 354, val1: 200, val2: 100 },
        { name: '蔡甸区', value: 431, val1: 200, val2: 100 },
        { name: '江夏区', value: 252, val1: 200, val2: 10 },
        { name: '黄陂区', value: 340, val1: 200, val2: 100 },
        { name: '新洲区', value: 752, val1: 200, val2: 100 }
      ],
      selectData: { name: '江岸区', value: 541, val1: 300, val2: 200 }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      Echarts.registerMap('wuhan', wuhan)
      // Echarts.registerMap('china', china)
      this.chart = Echarts.init(this.$refs.chart);
      let option = {
        title: {
          text: '武汉市地图',
          textStyle: {
            color: '#386FFF',
            fontSize: 40,
          },
          right: '90px',
          bottom: '109px'
        },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b}<br/>{c} (p / km2)'
        // },
        visualMap: {
          type: 'piecewise',
          min: 100,
          max: 1000,
          left: 138,
          bottom: 108,
          pieces: [
            { gt: 820, lte: 1000, label: '高', color: '#386FFF' },
            { gt: 640, lte: 820, label: ' ', color: '#3361DE' },
            { gt: 460, lte: 640, label: ' ', color: '#2B52BD' },
            { gt: 280, lte: 460, label: ' ', color: '#24449C' },
            { gt: 100, lte: 280, label: '低', color: '#1A347A' }
          ],
          itemWidth: 44,
          itemHeight: 27,
          itemGap: 24,
          itemSymbol: 'rect',
          // realtime: false,
          // calculable: true,
          textStyle: {
            color: '#386FFF',
            fontSize: 29,
          },
          inRange: {
            symbol: [],
            color: ['#1A347A', '#24449C', '#2B52BD', '#3361DE', '#386FFF']
          }
        },
        series: [
          {
            name: '武汉市地图',
            type: 'map',
            selectedMode: 'single',
            mapType: 'wuhan', // 自定义扩展图表类型
            // label: {
            //   show: true
            // },
            // zoom: 1.2,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: '#00FFFC',
                backgroundColor: '#00FFFC',
              },
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#000D4A'
            },
            top: 115,
            bottom: 325,
            data: this.dataList
          }
        ]
      }
      this.chart.setOption(option);
      this.chart.on('click', (params) => {
        this.selectData = params.data
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.main-map {
  // margin: 100px 0 0;
  height: calc(100% - 266px);
  position: relative;
  .chart {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }
  .bg {
    width: 1130px;
    height: 381px;
    bottom: 139px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: url("../../../assets/images/quan.png");
    background-size: 100%;
    z-index: 997;
  }
  .tip {
    position: absolute;
    width: 520px;
    height: 382px;
    background: #00fffc;
    box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5),
      0px 0px 64px 0px #00b3ff;
    border-radius: 24px;
    border: 4px solid #00fffc;
    bottom: 350px;
    right: 240px;
    z-index: 999;
    .name {
      padding: 48px 49px 37px;
      height: 60px;
      font-size: 56px;
      font-weight: bold;
      color: #000000;
      line-height: 60px;
    }
    .b {
      height: 189px;
    }
    .l,
    .r {
      float: left;
      height: 100%;
    }
    .l {
      box-sizing: border-box;
      border-right: 2px solid rgba(0, 0, 0, 0.38);
      padding-top: 36px;
      text-align: center;
      width: 40%;
      .p1 {
        font-size: 32px;
        color: rgba(0, 0, 0, 0.6);
      }
      .p2 {
        font-size: 72px;
        color: #000000;
        margin-top: 16px;
      }
    }
    .r {
      width: 60%;
      li {
        height: 63px;
        line-height: 63px;
        font-size: 36px;
        color: #000000;
        i {
          display: inline-block;
          width: 12px;
          height: 12px;
          vertical-align: middle;
          border: 2px solid #ffffff;
          margin: auto 16px auto 33px;
          border-radius: 50%;
          &.xt {
            background: #ff3178;
          }
          &.cz {
            background: #316aff;
          }
          &.css {
            background: #ff8931;
          }
        }
        span:nth-child(2) {
          display: inline-block;
          width: 130px;
        }
        .num {
          font-weight: bold;
        }
      }
    }
  }
}
</style>