<template>
  <m-animate enter="fadeInLeft" leave="fadeOutLeft" :duration="300">
    <div v-if="show" class="container">
      <n-collapse
        id="basic-info"
        arrow-placement="right"
        default-expanded-names="1"
        accordion
      >
        <template #arrow>
          <n-icon size=".08rem">
            <CaretForward />
          </n-icon>
        </template>
        <n-collapse-item name="1">
          <div
            class="info-wrapper"
            :class="{
              short: organization.source.length === 0,
            }"
          >
            <div class="sum">
              <div v-for="item in sum" :key="item.name">
                <p>
                  <m-count class="count" :value="item.value" />
                  <span>{{ item.unit }}</span>
                </p>
                <p>{{ item.name }}</p>
              </div>
            </div>
            <div class="box">
              <p class="title">关系在街道党员分类</p>
              <div class="content">
                <div class="pie">
                  <m-pie :option="pieOption" :dataset="member" />
                </div>
                <div>
                  <div v-for="(item, i) in member.source" :key="item.name">
                    <p>
                      <i class="dot" :style="`background:${color1[i]}`" />
                      {{ item.name }}
                    </p>
                    <p>
                      <span>
                        <m-count :value="item.ratio" :decimal="1" /> %
                      </span>
                      <span><m-count :value="item.value" /> 位</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="organization.source.length > 0" class="box">
              <p class="title">党组织分类</p>
              <div class="content">
                <div class="pie">
                  <m-pie
                    :option="{ ...pieOption, color: color2 }"
                    :dataset="organization"
                  />
                </div>
                <div>
                  <div
                    v-for="(item, i) in organization.source"
                    :key="item.name"
                  >
                    <p>
                      <i class="dot" :style="`background:${color2[i]}`" />
                      {{ item.name }}
                    </p>
                    <p>
                      <span>
                        <m-count :value="item.ratio" :decimal="1" /> %
                      </span>
                      <span><m-count :value="item.value" /> 个</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="box">
              <p class="title">关系在街道党员年龄分布</p>
              <div class="content">
                <m-line :option="lineOption" :dataset="age" />
              </div>
            </div>
          </div>
        </n-collapse-item>
      </n-collapse>
      <m-animate enter="fadeInUp" leave="fadeOutDown" :duration="200">
        <div v-if="visible" class="tag-box">
          <span
            v-for="tag in tagList"
            :key="tag.name"
            :class="{ on: tag.key === curTagKey }"
            @click="clickTag(tag.key)"
            >{{ tag.name }}</span
          >
        </div>
      </m-animate>
    </div>
  </m-animate>
</template>

<script lang="ts" setup>
import { ChartTypes } from '@/components/MyComponent'
import { ref, computed, onMounted } from 'vue'
import { CaretForward } from '@vicons/ionicons5'
import { useFetchOrg } from '@/hooks/useFetch'
import store from '@/store'

const show = computed(() => store.state.showBasicInfo)

const visible = computed(() => store.state.showTag)
const sum = computed(() => store.state.basicInfo.sum)
const member = computed(() => store.state.basicInfo.member)
const organization = computed(() => store.state.basicInfo.organization)
const age = computed(() => store.state.basicInfo.age)

const color1 = ['#FAADB8', '#C1474F', '#6D2C29']
const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
const pieOption: ChartTypes.PieOption = {
  color: color1,
  legend: { show: false },
  series: [
    {
      type: 'pie',
      radius: ['60%', '78%'],
      center: ['42%', '60%'],
      label: {
        show: false,
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: '#fff',
      },
    },
  ],
}
const lineOption: ChartTypes.LineOption = {
  color: ['#DD505E'],
  legend: { show: false },
  yAxis: [
    {
      type: 'value',
      minInterval: 1,
      // maxInterval: 100,
      // interval: 100,
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisTick: {
        interval: 0,
      },
      axisLabel: {
        interval: 0,
        color: '#000',
      },
    },
  ],
  series: [
    {
      type: 'line',
      smooth: false,
    },
  ],
}
onMounted(() => {
  store.dispatch('getBasicInfo')
})

const curTagKey = ref<string | null>(null)
const tagList = [
  { name: '机关事业单位党组织', key: '机关事业单位' },
  { name: '居民区党组织', key: '居民区' },
  { name: '“两新”党组织', key: '两新' },
]
const clickTag = async (key: string) => {
  if (key === curTagKey.value) {
    curTagKey.value = null
    store.commit('SET_MAP_POINTS')
    return
  }
  curTagKey.value = key
  const res = await useFetchOrg({
    q: `paths @ "类别" && string == "${key}"`,
  })
  console.log(`类别-${key}-撒点：`, res)
  store.commit('SET_MAP_POINTS', {
    labelKey: '党组织名称',
    result: res.map((item: any) => item.extra),
  })
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.container
  position fixed
  top .48rem
  left .05rem
  width 3rem
#basic-info
  width 100%
  background $bg
  border-radius .02rem
  $blur()
  .info-wrapper
    height 82vh
    box-sizing border-box
    padding .03rem .08rem
    display flex
    flex-direction column
    transition height .2s ease-in-out
    &.short
      height 60vh
    .sum
      display flex
      justify-content space-between
      margin-bottom .04rem
      >div
        background $white-bg
        width 32%
        border-radius .04rem
        padding .03rem .05rem
        box-sizing border-box
        font-size .09rem
        p
          &:last-child
            color $gray
        .count
          color $red
          font-size .2rem
          margin-right .05rem
    .box
      background $white-bg
      border-radius .04rem
      padding .05rem .03rem
      box-sizing border-box
      margin .04rem 0
      flex 1
      display flex
      flex-direction column
      overflow hidden
      .title
        font-family $font-ping-medium
        margin-left 6%
      .content
        flex 1
        display flex
        justify-content space-around
        overflow hidden
        >div
          &.pie
            width 1.4rem
            height 1rem
          &:last-child
            display flex
            flex-direction column
            justify-content center
          .dot
            display inline-block
            width .04rem
            height @width
            border-radius 50%
            margin-right .04rem
            margin-bottom .02rem
          span
            font-family $font-din
            margin-left .12rem
            margin-right .2rem
            &:last-child
              float right
.tag-box
  background $bg
  $blur()
  width 100%
  height .3rem
  position absolute
  left 0
  margin-top .05rem
  border-radius .02rem
  display flex
  justify-content space-between
  padding .05rem .08rem
  box-sizing border-box
  >span
    $flex-align()
    $text-overflow()
    justify-content center
    background #fff
    border-radius .03rem
    cursor pointer
    font-size .09rem
    width 32%
    &:hover
    &.on
      background $light-red
      color $red
      box-shadow 0 0 .04rem rgba(0,0,0,.5)
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
#basic-info
  .n-collapse-item__header
    position relative
    display flex
    height .3rem
    border-radius .02rem
    padding 0 .12rem
    font-family $font-ping-medium
    font-size .14rem
    .n-collapse-item__header-main
      justify-content flex-end
    &:before
      position absolute
      left 0.12rem
      content '基本情况'
      height 0.14rem
      border-left 0.02rem solid #dd505e
      padding-left 0.05rem
      display flex
      align-items center
  .n-collapse-item__content-inner
    padding 0
</style>
