<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',
    streets: '/service-basicdatasync-ddd/public/getCspHocByStreet',
  },
}
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 = ref({
  dimensions: [
    { name: 'streetName', displayName: '街道' },
    { name: 'hocNum', displayName: '业委会' },
    { name: 'cspNum', displayName: '物业企业' },
  ],
  source: [],
})

ajax
  .get({
    url: _config.apis.streets,
  })
  .then((res) => {
    barData.value.source = res?.data?.content || []
  })

const barOption = {
  color: ['#785CDD', '#77BFF9'],
  legend: {
    right: '2%',
    itemWidth: fontSize.value * 0.6,
    itemHeight: fontSize.value * 0.8,
  },
  grid: {
    left: '2%',
    right: '1%',
    bottom: 0,
    top: '20%',
    containLabel: true,
    height: '92%',
  },
  yAxis: {
    minInterval: 1,
  },
  xAxis: [
    {
      type: 'category',
      show: false,
    },
  ],
  // xAxis: [
  //   {
  //     type: 'category',
  //     axisLabel: {
  //       interval: 0,
  //       rotate: 45,
  //       fontSize: fontSize.value * 0.8,
  //     },
  //   },
  // ],
  // series: [
  //   {
  //     type: 'bar',
  //     barWidth: '20%',
  //     itemStyle: {
  //       borderRadius: 8,
  //     },
  //     barGap: 0,
  //   },
  //   {
  //     type: 'bar',
  //     barWidth: '20%',
  //     itemStyle: {
  //       borderRadius: 8,
  //     },
  //     barGap: 0,
  //   },
  // ],
}
</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>
