<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars.png')})`">
    <div id="map" />
    <div class="area">
      <p>当前广东省养殖面积</p>
      <b><m-flip :value="888888888"/></b>
      <span>k㎡</span>
    </div>
    <div class="box1">
      <m-card mode="2" title="各品种企业排行榜">
        <DataList :list="list1"/>
      </m-card>
    </div>
    <div class="box2">
      <m-card mode="2" title="各市养殖面积"></m-card>
    </div>
    <div class="box3">
      <m-card mode="2" title="各品种养殖/出塘数据"></m-card>
    </div>
  </div>
</template>

<script>
import guangdong from 'echarts/map/json/province/guangdong.json'
import DataList from './list'
export default {
  name: 'Guangdong',
  components: {
    DataList,
  },
  data() {
    return {
      testData: [
        {name: 'test', value: [114.280637, 24.125178]},
        {name: 'test', value: [113.280637, 23.125178]},
        {name: 'test', value: [112.280637, 22.125178]},
        {name: 'test', value: [111.180637, 22.125178]},
        {name: 'test', value: [112.280637, 24.125178]},
        {name: 'test', value: [115.280637, 23.125178]},
        {name: 'test', value: [115.980637, 23.125178]},
        {name: 'test', value: [114.780637, 24.125178]},
      ],
      list1: [
        {name: '淡水鱼苗', value: 8279, unit: '亿尾'},
        {name: '淡水鱼种', value: 222544, unit: '吨'},
        {name: '投放鱼种', value: 193027, unit: '吨'},
        {name: '稚鳖', value: 6549, unit: '万只'},
        {name: '稚龟', value: 655, unit: '万只'},
        {name: '鳗苗捕捞', value: 43, unit: '千克'},
        {name: '海水鱼苗', value: 508510, unit: '万尾'},
        {name: '虾类育苗', value: 5455, unit: '万尾'},
        {name: '贝类育苗', value: 293678, unit: '万尾'},
        {name: '海带', value: 100, unit: '亿株'},
        {name: '紫菜', value: 0.06, unit: '亿株'},
        {name: '海参', value: 0.09, unit: '亿头'},
      ],
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
  },
  methods: {
    initMap() {
      const mapName = 'guangdong'
      // 调整label坐标位置
      guangdong.features.forEach(el => {
        switch (el.properties.name) {
        case '河源市':
          el.properties.cp = [114.897802, 23.946266]
          break
        case '清远市':
          el.properties.cp = [113.051227, 24.185022]
          break
        case '肇庆市':
          el.properties.cp = [112.172529, 23.451546]
          break
        case '云浮市':
          el.properties.cp = [111.844439, 22.829801]
          break
        case '湛江市':
          el.properties.cp = [110.164977, 21.274898]
          break
        case '茂名市':
          el.properties.cp = [110.919229, 21.859751]
          break
        case '阳江市':
          el.properties.cp = [111.775107, 21.959222]
          break
        case '广州市':
          el.properties.cp = [113.580637, 23.325178]
          break
        case '江门市':
          el.properties.cp = [112.694942, 22.190431]
          break
        case '揭阳市':
          el.properties.cp = [116.055733, 23.243778]
          break
        case '潮州市':
          el.properties.cp = [116.832301, 23.761701]
          break
        case '汕尾市':
          el.properties.cp = [115.564238, 22.974485]
          break
        case '东莞市':
          el.properties.cp = [113.846262, 22.946237]
          break
        default:
          break
        }
      })
      this.$echarts.registerMap(mapName, guangdong)
      const map = this.$echarts.init(document.getElementById('map'))
      const config = {
        geo: {
          map: mapName,
          top: 120,
          label: {
            normal: {
              show: true,
              color: '#fff',
              fontSize: 10,
            },
            emphasis: {
              show: true,
              color: '#fff',
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(0, 191, 255, 0.1)',
              borderColor: 'rgba(0, 191, 255, 0.6)',
              borderWidth: 0.4,
            },
            emphasis: {
              areaColor: '#5ad4ff',
              color: '#fff'
            }
          },
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.testData,
            symbolSize: 10,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true,
                formatter: '{b}',
                position: 'right',
              }
            },
            itemStyle: {
              normal: {
                color: '#5BD5FF',
                shadowColor: '#5BD5FF',
                shadowBlur: 2
              }
            }
          },
        ],
      }
      map.setOption(config)
    },
  }
}
</script>

<style lang="stylus" scoped>
#container
  width 100%
  height 100%
  background-size cover
  background-position center
  background-color #061627
  position relative
  display grid
  grid-template-areas \
    'box1 . box2'\
    'box1 . box2'\
    'box3 box3 box2'
  grid-template-rows 1fr 1fr 1fr
  grid-template-columns 1fr 3fr 1fr
  grid-gap 0.7rem
  padding 0.7rem
  .box1
    grid-area box1
  .box2
    grid-area box2
  .box3
    grid-area box3
  #map
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    // transform rotate(25deg)
  .area
    font-size 1.8rem
    color $color-map(1)
    position absolute
    top 10%
    left 0
    right 0
    text-align center
    p
      color #fff
      font-family $font-pang
    b
      font-size 3rem
    >span
      font-size 1.5rem
</style>
