<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.itemTotal}}</p>
        </div>
        <ul class="r">
          <li>
            <i class="xt"></i>
            <span>胸痛</span>
            <span class="num">{{selectData.chestTotal}}</span>
          </li>
          <li>
            <i class="cz"></i>
            <span>卒中</span>
            <span class="num">{{selectData.strokeTotal}}</span>
          </li>
          <li>
            <i class="css"></i>
            <span>创伤</span>
            <span class="num">{{selectData.traumaTotal}}</span>
          </li>
          <li>
            <i class="ss"></i>
            <span>烧伤</span>
            <span class="num">{{selectData.burnTotal}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 江岸区 江汉区 硚口区 汉阳区 武昌区 青山区 洪山区 东西湖区 汉南区 蔡甸区 江夏区 黄陂区 新洲区
 * */
import * as echarts from 'echarts';
import wuhan from '@/assets/map/wuhan.json'

export default {
  props: {
    areaCenters: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      myChart: null,
      dataIndex: 0,
      dataList: [],
      selectData: {
        name: '',
        itemTotal: 0,
        chestTotal: 0,
        strokeTotal: 0,
        traumaTotal: 0,
        burnTotal: 0,
      }
    }
  },
  watch: {
    areaCenters: function(val) {
      if (val || val.length > 0) {
        this.init()
      }
    }
  },
  mounted() {
    echarts.registerMap('wuhan', wuhan)
    this.init()
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    init() {
      let total = 0
      const list = this.areaCenters.map((item, index) => {
        total += item.itemTotal
        const params = {
          name: item.areaName,
          value: item.itemTotal,
          ...item
        }
        if (index === 0) {
          params.selected = true
          this.selectData = params
        }
        return params
      })
      this.myChart = this.myChart || echarts.init(this.$refs.chart);
      this.myChart.off('click')
      this.myChart.off('selectchanged')

      let option = {
        title: {
          text: '武汉市地图',
          textStyle: {
            color: '#386FFF',
            fontSize: 40,
          },
          right: '90px',
          bottom: '109px'
        },
        visualMap: {
          type: 'piecewise',
          min: 100,
          max: 1000,
          left: 138,
          bottom: 108,
          pieces: [
            { gt: total / 5 * 4, lte: total, label: '高', color: '#386FFF' },
            { gt: total / 5 * 3, lte: total / 5 * 4, label: ' ', color: '#3361DE' },
            { gt: total / 5 * 2, lte: total / 5 * 3, label: ' ', color: '#2B52BD' },
            { gt: total / 5, lte: total / 5 * 2, label: ' ', color: '#24449C' },
            { gt: 0, lte: total / 5, label: '低', color: '#1A347A' }
          ],
          itemWidth: 44,
          itemHeight: 27,
          itemGap: 24,
          itemSymbol: 'rect',
          // realtime: false,
          // calculable: true,
          textStyle: {
            color: '#386FFF',
            fontSize: 29,
          },
          color: ['#1A347A', '#24449C', '#2B52BD', '#3361DE', '#386FFF']
          // inRange: {
          //   // symbol: [],
          // }
        },
        series: [
          {
            name: '武汉市地图',
            type: 'map',
            selectedMode: 'single',
            mapType: 'wuhan', // 自定义扩展图表类型
            // label: {
            //   show: true
            // },
            // zoom: 1.2,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: '#00FFFC',
                backgroundColor: '#00FFFC',
              },
            },
            select: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: '#00FFFC',
                backgroundColor: '#00FFFC',
              },
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#000D4A'
            },
            top: 115,
            bottom: 325,
            data: list
          }
        ]
      }
      this.myChart.setOption(option);
      this.myChart.on('click', (params) => {
        this.dataIndex = params.dataIndex
        this.selectData = list[this.dataIndex]
      });
      this.myChart.on('selectchanged', (params) => {
        this.dataIndex = params.fromActionPayload.dataIndex
        this.selectData = list[this.dataIndex]
      });
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.dataIndex++
        if (this.dataIndex >= list.length) {
          this.dataIndex = 0
        }
        this.myChart.dispatchAction({
          type: 'select',
          dataIndex: this.dataIndex
        })
      }, 30 * 1000)
    }
  }
}
</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: 450px;
    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: 257px;
    }
    .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;
          }
          &.ss {
            background: #ff5600;
          }
        }
        span:nth-child(2) {
          display: inline-block;
          width: 130px;
        }
        .num {
          font-weight: bold;
        }
      }
    }
  }
}
</style>