<template>
  <m-card title="党建引领">
    <div class="sum">
      <div v-for="item in summary" :key="item.name" class="rate">
        <Circle :value="item.value">
          <div class="content">
            <m-count :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </Circle>
      </div>
      <div class="cross">
        <p><m-count class="count" :value="5" /> 个</p>
        <span>交叉任职数</span>
      </div>
    </div>
    <div class="chart">
      <m-bar
        v-if="barData.source.length > 0"
        :dataset="barData"
        :option="barOption"
      />
      <m-empty v-else />
    </div>
  </m-card>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import Circle from './circle.vue'

const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const summary = [
  { name: '居委会', value: 10 },
  { name: '业委会', value: 10 },
  { name: '物业企业', value: 20 },
]
const barData = {
  dimensions: [
    { name: 'street', displayName: '街道' },
    { name: 'partyNum', displayName: '党小组数量' },
    { name: 'data1', displayName: '居委会' },
    { name: 'data2', displayName: '业委会' },
    { name: 'data3', displayName: '物业企业' },
  ],
  source: [
    { street: '街道1', partyNum: 60, data1: 20, data2: 20, data3: 20 },
    { street: '街道2', partyNum: 90, data1: 20, data2: 30, data3: 40 },
    { street: '街道3', partyNum: 130, data1: 30, data2: 40, data3: 60 },
    { street: '街道4', partyNum: 120, data1: 40, data2: 50, data3: 30 },
    { street: '街道5', partyNum: 120, data1: 50, data2: 60, data3: 10 },
    { street: '街道6', partyNum: 140, data1: 50, data2: 60, data3: 30 },
    { street: '街道7', partyNum: 130, data1: 50, data2: 60, data3: 20 },
    { street: '街道8', partyNum: 110, data1: 20, data2: 60, data3: 30 },
  ],
}
const barOption = {
  color: ['#785CDD', '#77BFF9', '#EDB872', '#64C29D'],
  legend: {
    right: '2%',
    itemWidth: fontSize.value * 0.6,
    itemHeight: fontSize.value * 0.8,
  },
  yAxis: {
    minInterval: 1,
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        interval: 0,
      },
    },
  ],
  series: [
    {
      type: 'bar',
      barWidth: '18%',
      itemStyle: {
        borderRadius: 8,
      },
      barGap: 0,
    },
    ...[1, 2, 3].map(() => ({
      type: 'bar',
      barWidth: '18%',
      itemStyle: {
        borderRadius: 8,
      },
      barGap: 0,
      stack: '总量',
    })),
  ],
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.content
  text-align center
  white-space nowrap
.sum
  display flex
  >div
    flex 1
    &.rate
      box-sizing border-box
      padding .06rem
    &.cross
      flex 1.4
      margin .08rem .05rem
      $box()
      $center()
      flex-direction column
      .count
        color $orange
        font-size .12rem
.chart
  width 100%
  height 1.1rem
</style>
