<template>
  <m-card title="实有房屋">
    <div>
      <m-sub2 :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
        居住房屋
      </m-sub2>
      <Brief :list="summary" color="#fff" />
      <div class="bar-txt">
        <p>
          <span>2000年前房屋</span>
        </p>
        <p>
          <m-count class="count" :value="pubulicSafeHouse.befor" />
          <span class="unit">幢</span>
        </p>
      </div>
      <m-progress
        v-if="allTrueHouse"
        :value="(pubulicSafeHouse.befor / allTrueHouse) * 100"
        :height="0.1"
        :color="['rgba(253,211,116,.15)', '#F7933E']"
      />
      <div class="house-types">
        <div v-for="item in houseTypes" :key="item.name">
          <m-wave
            v-if="item.percent"
            :value="item.percent"
            size=".34rem"
            color="#DB8000"
          />
          <div>
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <m-sub2
        :addition="{ value: pubulicSafeNonResident.nonResidentNum, unit: '幢' }"
      >
        非居房屋
      </m-sub2>
      <Brief :list="houseSum" color="#fff" />
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import Brief from '../components/brief.vue'
import icon31 from '@/assets/images/icon31.png'
import icon38 from '@/assets/images/icon38.png'
import icon37 from '@/assets/images/icon37.png'
import img3 from '@/assets/images/img3.png'
import img9 from '@/assets/images/img9.png'
import img10 from '@/assets/images/img10.png'
import store from '@/store'
export default defineComponent({
  name: 'House',
  components: { Brief },
  setup() {
    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: 87,
          // value: pubulicSafeHouse.value.community,
          icon: icon31,
        },
        {
          name: '物业公司',
          value: pubulicSafeHouse.value.company,
          icon: icon38,
        },
        { name: '业委会', value: pubulicSafeHouse.value.ic, icon: icon37 },
      ]
    })
    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: img3,
        },
        {
          name: '商办',
          value: pubulicSafeNonResident.value.commercial,
          icon: img9,
        },
        {
          name: '商业综合体',
          value: pubulicSafeNonResident.value.comprehensive,
          icon: img10,
        },
      ]
    })
    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
    font-size 0.14rem
    font-family $font-barlow
  .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 0.1rem 0
  >div
    display flex
    align-items center
    >div
      margin-left 0.05rem
      .count
        font-size 0.14rem
        font-family $font-barlow
      p
        color #ccc
</style>
