<template>
  <m-card title="党建引领">
    <div class="sum">
      <div v-for="item in summary" :key="item.name" class="rate">
        <Circle :value="item.ratio">
          <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">
const _config = {
  name: 'A003',
  title: '党建引领',
  row: 1,
  apis: {
    api1: '/service-basicdatasync-ddd/public/indCous',
    api2: '/service-basicdatasync-ddd/public/residentsCommitteesV2',
    api3: '/service-basicdatasync-ddd/public/propCompanies',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import Circle from '@/components/circle.vue'
import { ajax } from '@/ajax'

const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const summary = ref([
  { name: '业委会', value: 0, ratio: 0 },
  { name: '居委会', value: 0, ratio: 0 },
  { name: '物业企业', value: 0, ratio: 0 },
])
Promise.all([
  ajax.get({ url: _config.apis.api1, params: { sectType_in: '1' } }),
  ajax.get({ url: _config.apis.api2, params: { sectType_in: '1' } }),
  ajax.get({
    url: _config.apis.api3,
    params: { sectType_in: '1', managedNum_desc: '1' },
  }),
]).then(([data1, data2, data3]) => {
  const total = [data1, data2, data3].reduce(
    (acc, cur) => acc + (cur?.data?.totalRows || 0),
    0,
  )
  summary.value = [
    {
      name: '业委会',
      value: data1?.data?.totalRows || 0,
      ratio: ((data1?.data?.totalRows || 0) / (total || 1)) * 100,
    },
    {
      name: '居委会',
      value: data2?.data?.totalRows || 0,
      ratio: ((data2?.data?.totalRows || 0) / (total || 1)) * 100,
    },
    {
      name: '物业企业',
      value: data3?.data?.totalRows || 0,
      ratio: ((data3?.data?.totalRows || 0) / (total || 1)) * 100,
    },
  ]
})

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
  p
    font-size .08rem
.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>
