<template>
  <m-card title="体征指标">
    <m-sub :addition="{ value: totalCommunityCount, unit: '个小区' }">
      住宅房屋
    </m-sub>
    <Brief :list="summary" click-able @touch="onTouch" />
    <m-sub
      :addition="{ value: nonResident?.length || 0, unit: '幢' }"
      click-able
      @selct="onSelect"
    >
      非居建筑
    </m-sub>
    <m-sub> 服务主体 </m-sub>
    <Brief :list="list" />
    <p />
  </m-card>
</template>

<script lang="ts">
const _config = {
  name: 'A015',
  title: '体征指标',
  row: 1,
  baseUrl: window._base_url,
  apis: {
    community: '/service-customkey-ddd/public/communities/v2?pageSize=9000',
    nonResident: '/service-basicdatasync-ddd/public/nonResi/buildings',
    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 icon4 from '@/assets/images/icon4.png'
import icon5 from '@/assets/images/icon5.png'
import icon1 from '@/assets/images/icon1.png'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'
import icon9 from '@/assets/images/icon9.png'
import c1 from '@/assets/images/c1.png'
import c2 from '@/assets/images/c2.png'
import c3 from '@/assets/images/c3.png'
import c4 from '@/assets/images/c4.png'
import c5 from '@/assets/images/c5.png'
import c6 from '@/assets/images/c6.png'
import NoresIcon from '@/assets/images/yellow-point.png'
import Brief, { BriefProp } from '@/components/brief.vue'
import { onMounted, ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'
import usePointType from '@/hooks/usePointType'

const totalCommunityCount = ref(0)
const summary = ref<BriefProp[]>([
  { icon: icon4, name: '商品房', value: 0 },
  { icon: icon5, name: '公房', value: 0 },
  { icon: icon1, name: '公租房', value: 0 },
  { icon: icon6, name: '混合', value: 0 },
  { icon: icon7, name: '军产', value: 0 },
  { icon: icon8, name: '售后房', value: 0 },
])
onMounted(() => {
  ajax
    .post({
      url: _config.apis.community,
      params: {
        conditions: [{ conditionsGroup: [] }],
        subject: 'tbl_community',
      },
    })
    .then((res) => {
      const data = res?.data?.content || []
      bus.emit('communityList', data)
      totalCommunityCount.value = data.length
      // 1商品房 2动迁房 3共有产权保障房 4售后房 5直管公房 6混合 7系统公房 8集体土地集资房 9军产 10私产 11公租房
      const list = {
        type1: data.filter((item) => item?.stKind == '01'),
        type2: data.filter(
          (item) => item?.stKind == '07' || item?.stKind == '05',
        ),
        type3: data.filter((item) => item?.stKind == '11'),
        type4: data.filter((item) => item?.stKind == '06'),
        type5: data.filter((item) => item?.stKind == '09'),
        type6: data.filter((item) => item?.stKind == '04'),
      }
      summary.value = [
        {
          icon: icon4,
          name: '商品房',
          value: list.type1?.length || 0,
          data: list.type1,
          point: c1,
          key: 1,
        },
        {
          icon: icon5,
          name: '公房',
          value: list.type2?.length || 0,
          data: list.type2,
          point: c2,
          key: 2,
        },
        {
          icon: icon1,
          name: '公租房',
          value: list.type3?.length || 0,
          data: list.type3,
          point: c3,
          key: 3,
        },
        {
          icon: icon6,
          name: '混合',
          value: list.type4?.length || 0,
          data: list.type4,
          point: c4,
          key: 4,
        },
        {
          icon: icon7,
          name: '军产',
          value: list.type5?.length || 0,
          data: list.type5,
          point: c5,
          key: 5,
        },
        {
          icon: icon8,
          name: '售后房',
          value: list.type6?.length || 0,
          data: list.type6,
          point: c6,
          key: 6,
        },
      ]
    })
})

const { curPointType, setCurPointType } = usePointType()

const onTouch = (i: number) => {
  const { data, point, key } = summary.value[i]
  bus.emit('addPoints', { icon: point, data })
  setCurPointType(key)
}

const nonResident = ref([])
ajax
  .get({ url: _config.apis.nonResident, params: { pageSize: 9000 } })
  .then((res) => {
    nonResident.value = res?.data?.content || []
  })
const onSelect = () => {
  bus.emit('addPoints', { icon: NoresIcon, size: 6, data: nonResident.value })
  setCurPointType(7)
}

const list = ref([
  { icon: icon9, name: '业委会', value: 0 },
  { icon: icon9, name: '居委会', value: 0 },
  { icon: icon9, name: '物业企业', value: 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]) => {
  list.value = [
    { icon: icon9, name: '业委会', value: data1?.data?.totalRows || 0 },
    { icon: icon9, name: '居委会', value: data2?.data?.totalRows || 0 },
    { icon: icon9, name: '物业企业', value: data3?.data?.totalRows || 0 },
  ]
})
</script>

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