<template>
  <div class="container">
    <n-collapse
      id="basic-info"
      arrow-placement="right"
      default-expanded-names="1"
      accordion
    >
      <n-collapse-item name="1">
        <div class="info-wrapper">
          <div class="sum">
            <div v-for="item in sumList" :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="data1" />
              </div>
              <div>
                <div v-for="(item, i) in data1.source" :key="item.name">
                  <p>
                    <i class="dot" :style="`background:${color1[i]}`" />
                    {{ item.name }}
                  </p>
                  <p>
                    <span><m-count :value="item.ratio" /> %</span>
                    <span><m-count :value="item.value" /> 位</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="box">
            <p class="title">党组织分类</p>
            <div class="content">
              <div class="pie">
                <m-pie
                  :option="{ ...pieOption, color: color2 }"
                  :dataset="data2"
                />
              </div>
              <div>
                <div v-for="(item, i) in data2.source" :key="item.name">
                  <p>
                    <i class="dot" :style="`background:${color2[i]}`" />
                    {{ item.name }}
                  </p>
                  <p>
                    <span><m-count :value="item.ratio" /> %</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="data3" />
            </div>
          </div>
        </div>
      </n-collapse-item>
    </n-collapse>
    <m-animate enter="fadeInUp" leave="fadeOutDown" :duration="100">
      <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>
</template>

<script lang="ts" setup>
import { ChartTypes } from '@/components/MyComponent'
import { ref, PropType, computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
})

const visible = computed(() => props.visible)

const sumList = [
  { name: '党组织', value: 355, unit: '个' },
  { name: '关系在街道内党员', value: 10890, unit: '位' },
  { name: '街道居民党员', value: 10890, unit: '位' },
]

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: 100,
      maxInterval: 100,
      interval: 100,
      splitLine: {
        interval: 100,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisTick: {
        interval: 0,
      },
      axisLabel: {
        interval: 0,
        color: '#000',
      },
    },
  ],
  series: [
    {
      type: 'line',
      smooth: false,
    },
  ],
}
const data1 = {
  dimensions: [
    { name: 'name', displayName: '类型' },
    { name: 'value', displayName: '数量' },
  ],
  source: [
    { name: '机关事业单位党员', value: 6000, ratio: 60 },
    { name: '居民区党员', value: 3000, ratio: 30 },
    { name: '“两新”党员', value: 1000, ratio: 10 },
  ],
}
const data2 = {
  dimensions: [
    { name: 'name', displayName: '类型' },
    { name: 'value', displayName: '数量' },
  ],
  source: [
    { name: '党委', value: 10, ratio: 10 },
    { name: '党总支', value: 70, ratio: 70 },
    { name: '党支部', value: 10, ratio: 10 },
    { name: '联合党支部', value: 10, ratio: 10 },
  ],
}
const data3 = {
  dimensions: [
    { name: 'name', displayName: '年龄' },
    { name: 'value', displayName: '数量' },
  ],
  source: [
    { name: '18-25岁', value: 210 },
    { name: '26-35岁', value: 320 },
    { name: '36-50岁', value: 150 },
    { name: '50-70岁', value: 80 },
    { name: '70岁以上', value: 270 },
  ],
}

const curTagKey = ref<string | null>(null)
const tagList = [
  { name: '机关事业单位党组织', key: '机关事业单位党组织' },
  { name: '居民区党组织', key: '居民区党组织' },
  { name: '“两新”党组织', key: '“两新”党组织' },
]
const clickTag = (key: string) => {
  if (key === curTagKey.value) {
    curTagKey.value = null
    return
  }
  curTagKey.value = key
}
</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
    .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

.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
    width 32%
    background #fff
    border-radius .03rem
    cursor pointer
    font-size .09rem
    &: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
    justify-content flex-end
    height .3rem
    border-radius .02rem
    padding 0 .12rem
    font-family $font-ping-medium
    font-size .14rem
    &: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>
