<template>
  <div class="pageBg">

    <div class="box" style="height: 100%">
      <div class="mapArea" style="height: 100%">
        <div ref="chartMap" style="width: calc(100% - 400px);height: 80vh" />
      </div>

      <el-card class="fixed-menu" body-style="padding:0">
        <template #header>
          <div class="card-header">
            <div style="display: inline-flex;align-items: center;">
              <span style="cursor: pointer" @click="showSheng">全部</span>
              <el-icon v-if="nowkind.name"><ArrowRight /></el-icon>
              <span>{{ nowkind.name }}</span>
            </div>
            <el-button class="button" text @click="goList">More⇀</el-button>
          </div>
        </template>
        <div class="xhList">
          <div v-if="!nowkind.name">
            <div v-for="n in sheng" :key="n.memId" class="item" @click="goDetail(n.memId)">
              <div class="imgbox" style="background-size: contain;">
                <span class="leaf-tag bg-danger">省会</span>
                <el-image :src="n.pictures?fillImgUrl(n.pictures.split(',')[0]):''" />
              </div>
              <div class="info">
                <h3 class="esp">{{ n.name }}</h3>
                <h4 class="">
                  <el-icon color="#E6E6E6"><LocationFilled /></el-icon>
                  {{ n.address }}
                </h4>
                <!--              <p class="esp"><a target="_blank">https://www.taekwondo.org.cn</a></p>-->
                <p class="esp_2">{{ n.introduce }}</p>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="item" @click="goDetail(nowkind.memId)">
              <div class="imgbox" style="background-size: contain;">
                <span class="leaf-tag bg-danger">省会</span>
                <el-image :src="nowkind.pictures?fillImgUrl(nowkind.pictures.split(',')[0]):''" />
              </div>
              <div class="info">
                <h3 class="esp">{{ nowkind.name }}</h3>
                <h4 class="">
                  <el-icon color="#E6E6E6"><LocationFilled /></el-icon>
                  {{ nowkind.address }}
                </h4>
                <!--              <p class="esp"><a target="_blank">https://www.taekwondo.org.cn</a></p>-->
                <p class="esp_2">{{ nowkind.introduce }}</p>
              </div>
            </div>
            <div class="childrenlist">
              <div v-for="c in nowkind.children" :key="c.memId" class="item">
                <div class="imgbox" style="background-size: contain;">
                  <el-image :src="c.pictures?fillImgUrl(c.pictures.split(',')[0]):''" />
                </div>
                <div class="info">
                  <h3 class="esp">{{ c.name }}</h3>
                  <h4 class="">
                    <el-icon color="#E6E6E6"><LocationFilled /></el-icon>
                    {{ c.address }}
                  </h4>
                  <!--                  <p class="esp"><a target="_blank">https://www.taekwondo.org.cn</a></p>-->
                  <p class="esp_2">{{ c.introduce }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>

import * as echarts from 'echarts'
import chinaMap from '@/assets/json/china.json'
import _ from 'lodash'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getMemListByProvinceId, getProvinceCount } from '@/apiPc/local'


const router = useRouter()
const nowkind = ref({})
const sheng = ref([])
const chartMap = ref(null)

let myChart
const onResize = _.throttle(() => {
  if (myChart) {
    myChart.resize()
  }
}, 150)


onMounted(() => {
  getChartMap()
  getMemListByProvinceId().then((res) => {
    sheng.value = res.data
  })

  window.addEventListener('resize', onResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})

function getChartMap() {
  getProvinceCount().then((res) => {
    const myData = res.data

    myChart = echarts.init(chartMap.value)
    echarts.registerMap('china', chinaMap)
    const option = {
      tooltip: {
        trigger: 'item',
        // formatter: '{b}：{c}'
        formatter: (params, ticket, callback) => {
          return `${params.name}：${params.value || 0}`
        }
      },
      visualMap: {
        type: 'continuous',
        min: 0,
        max: Math.max(100, _.maxBy(myData, item => item.value).value),
        // calculable: true,
        // itemWidth: 20,
        // itemHeight: 140,
        // text: ['高', '低'],
        inRange: {
          color: ['#A1D0FF', '#63B0FF', '#3D9BFF', '#158DED', '#1A7FCB']
        }
      },
      series: [
        {
          type: 'map',
          map: 'china',
          roam: true,
          zoom: 1.5,
          top: '25%',
          label: {
            show: false
          },
          itemStyle: {
            borderColor: '#fff',
            boxShadow: ''
          },
          emphasis: {
            itemStyle: {
              areaColor: '#FABD47'
            }
          },
          data: myData
        }
      ]
    }
    myChart.setOption(option)

    myChart.on('click', (params) => {
      // console.log(params)
      getMemListByProvinceId(params.data.id).then((res) => {
        nowkind.value = res.data[0] || {}
      })
    })
  })
}

const goDetail = (id) => {
  router.push({
    path: `/local/index/${id}`
  })
}
const goList = () => {
  router.push({
    path: `/local/index/list`
  })
}
const showSheng = () => {
  nowkind.value = {}
}
</script>

<style scoped lang="scss">
.childrenlist{
  .item{
    border-left: 1px solid #e6e6e6;
    margin-left: 20px;border-bottom: none;
    &::before{content: '';position: absolute;left: -5px;
      width: 8px;top: 0;bottom:0;margin: auto;
      height: 8px;
      background: #E6E6E6;
      border-radius: 50%;}
  }
}
.pageBg {
  background: url("@/assets/v1/dfxh_bg.png") no-repeat center;
  background-size: cover;
  height: calc(100vh - 150px);
  min-height: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fixed-menu {
  position:absolute;top: 20px;
  right: 90px;
  width: 400px;
  height:calc(100% - 40px);
}
.xhList{height: calc(100vh - 250px);}
</style>