<template>
  <m-card title="实有房屋" :addition="{ value: 18980, unit: '幢' }">
    <div>
      <m-sub :addition="{ value: 11883, unit: '幢' }">居住房屋</m-sub>
      <Brief :list="summary" color="#fff" />
      <div class="bar-txt">
        <p>
          <span>2000年前房屋</span>
          <m-count class="count" :value="5616" />
          <span class="unit">幢</span>
        </p>
        <img src="@/assets/images/location.png" />
      </div>
      <m-progress :value="80" :height="0.1" />
      <div class="house-types">
        <div v-for="item in houseTypes" :key="item.name">
          <m-wave-ball :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: 7097, unit: '幢' }">非居房屋</m-sub>
      <Brief :list="houseSum" color="#fff" />
    </div>
  </m-card>
</template>

<script lang="ts">
import { 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'

export default defineComponent({
  name: 'House',
  components: { Brief },
  setup() {
    const summary = ref<BriefProp[]>([
      { name: '小区数', value: 65465, icon: icon18 },
      { name: '物业公司', value: 1648, icon: icon19 },
      { name: '业委会', value: 56462, icon: icon20 },
    ])
    const houseTypes = ref([
      {
        name: '商品房',
        value: 7128,
        percent: 60,
      },
      {
        name: '直管公房',
        value: 3564,
        percent: 30,
      },
      {
        name: '保障房及其他',
        value: 1188,
        percent: 15,
      },
    ])
    const houseSum = ref<BriefProp[]>([
      { name: '门面房', value: 1658, icon: icon7 },
      { name: '商办', value: 3564, icon: icon21 },
      { name: '商业综合体', value: 1875, icon: icon22 },
    ])
    return {
      summary,
      houseTypes,
      houseSum,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.bar-txt
  display flex
  align-items center
  justify-content space-between
  padding 0 .03rem
  margin .05rem 0 .02rem
  color #eee
  .count
    color $secondary-color
    font-size .14rem
    margin-left .15rem
  .unit
    color #aaa
    font-size .08rem
    margin-left .05rem
  img
    width .1rem
    height @width
.house-types
  display flex
  justify-content space-between
  align-items center
  margin-top .1rem
  >div
    display flex
    align-items center
    >div
      margin-left .05rem
      .count
        font-size .12rem
        font-weight bold
      p
        color #ccc
</style>
