<template>
  <m-card
    title="实有房屋"
    :addition="{
      value: allTrueHouse,
      unit: '幢',
    }"
  >
    <div>
      <m-sub :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
        居住房屋
      </m-sub>
      <Brief :list="summary" color="#fff" />
      <div class="bar-txt">
        <p>
          <span>2000年前房屋</span>
          <m-count class="count" :value="pubulicSafeHouse.befor" />
          <span class="unit">幢</span>
        </p>
        <img src="@/assets/images/location.png" />
      </div>
      <m-progress
        v-if="allTrueHouse"
        :value="(pubulicSafeHouse.befor / allTrueHouse) * 100"
        :height="0.1"
      />
      <div class="house-types">
        <div v-for="item in houseTypes" :key="item.name">
          <m-wave v-if="item.percent" :value="item.percent" size=".34rem" />
          <div>
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <m-sub
        :addition="{ value: pubulicSafeNonResident.nonResidentNum, unit: '幢' }"
      >
        非居房屋
      </m-sub>
      <Brief :list="houseSum" color="#fff" />
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import icon18 from '@/assets/images/icon18.png'
import icon19 from '@/assets/images/icon19.png'
import icon20 from '@/assets/images/icon20.png'
import icon7 from '@/assets/images/icon7.png'
import icon21 from '@/assets/images/icon21.png'
import icon22 from '@/assets/images/icon22.png'
import store from '@/store'
export default defineComponent({
  name: 'House',
  components: { Brief },
  setup() {
    store.dispatch('GET_PUBLICSAFE_HOUSE')
    store.dispatch('GET_PUBLICSAFE_NONRESIDENT')
    const pubulicSafeHouse = computed(() => store.state.pubulicSafeHouse)
    const pubulicSafeNonResident = computed(
      () => store.state.pubulicSafeNonResident
    )
    const pubulicSafeHouseStKind = computed(
      () => store.state.pubulicSafeHouseStKind
    )

    const pubulicSafeHouseStKindNum = computed(() => {
      let num = 0
      for (const k in store.state.pubulicSafeHouseStKind) {
        num += store.state.pubulicSafeHouseStKind[k]
      }
      return num
    })

    const allTrueHouse = computed(
      () => pubulicSafeHouse.value.nonResident + pubulicSafeHouse.value.house
    )

    const summary = computed(() => {
      return [
        {
          name: '小区数',
          value: pubulicSafeHouse.value.community,
          icon: icon18,
        },
        {
          name: '物业公司',
          value: pubulicSafeHouse.value.company,
          icon: icon19,
        },
        { name: '业委会', value: pubulicSafeHouse.value.ic, icon: icon20 },
      ]
    })
    const houseTypes = computed(() => {
      return [
        {
          name: '商品房',
          value: pubulicSafeHouseStKind.value.spf,
          percent:
            (pubulicSafeHouseStKind.value.spf /
              pubulicSafeHouseStKindNum.value) *
            100,
        },
        {
          name: '直管公房',
          value: pubulicSafeHouseStKind.value.zggf,
          percent:
            (pubulicSafeHouseStKind.value.zggf /
              pubulicSafeHouseStKindNum.value) *
            100,
        },
        {
          name: '保障房及其他',
          value: pubulicSafeHouseStKind.value.other,
          percent:
            (pubulicSafeHouseStKind.value.other /
              pubulicSafeHouseStKindNum.value) *
            100,
        },
      ]
    })
    const houseSum = computed(() => {
      return [
        {
          name: '门面房',
          value: pubulicSafeNonResident.value.others,
          icon: icon7,
        },
        {
          name: '商办',
          value: pubulicSafeNonResident.value.commercial,
          icon: icon21,
        },
        {
          name: '商业综合体',
          value: pubulicSafeNonResident.value.comprehensive,
          icon: icon22,
        },
      ]
    })
    return {
      summary,
      houseTypes,
      houseSum,
      pubulicSafeHouse,
      pubulicSafeNonResident,
      allTrueHouse,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.bar-txt
  display flex
  align-items center
  justify-content space-between
  padding 0 0.03rem
  margin 0.05rem 0 0.02rem
  color #eee
  .count
    color $secondary-color
    font-size 0.14rem
    margin-left 0.15rem
  .unit
    color #aaa
    font-size 0.08rem
    margin-left 0.05rem
  img
    width 0.1rem
    height @width
.house-types
  display flex
  justify-content space-between
  align-items center
  margin-top 0.1rem
  >div
    display flex
    align-items center
    >div
      margin-left 0.05rem
      .count
        font-size 0.12rem
        font-weight bold
      p
        color #ccc
</style>
