<template>
  <m-card title="交易数据">
    <div class="sum">
      <p v-for="item in summary" :key="item.name">
        {{ item.name }}
        <span>
          <m-count class="orange-count" :value="item.value" />
          {{ item.unit }}
        </span>
      </p>
    </div>
    <m-sub>新建商品房</m-sub>
    <div class="house">
      <div class="title">
        <p>福新名苑</p>
        <span class="line" />
        <span>
          <m-count class="orange-count" :value="13.2" :decimal="2" />万㎡
        </span>
      </div>
      <div class="company">上海北航置业发展有限公司</div>
      <div class="info">
        <div>
          <span>上市套数</span>
          <p><m-count class="count" :value="199" /><span>套</span></p>
        </div>
        <div>
          <span>上市面积</span>
          <p>
            <m-count class="count" :value="29.6" :decimal="2" />
            <span>万㎡</span>
          </p>
        </div>
        <div>
          <span>去化率</span>
          <p><m-count class="count" :value="100" /><span>%</span></p>
        </div>
      </div>
    </div>
    <m-sub>租赁住房</m-sub>
    <div class="lease">
      <div class="house">
        <div class="title">
          <p>魔方公寓</p>
          <span class="line" />
          <span> <m-count class="orange-count" :value="5000" />元 </span>
        </div>
        <div class="company">上海盛派投资管理有限公司</div>
        <div class="info">
          <div>
            <span>上市套数</span>
            <p><m-count class="count" :value="499" /><span>套</span></p>
          </div>
          <div>
            <span>上市面积</span>
            <p>
              <m-count class="count" :value="8595" />
              <span>㎡</span>
            </p>
          </div>
        </div>
      </div>
      <div class="house">
        <div class="title">
          <p>宁家公寓止园路</p>
          <span class="line" />
          <span> <m-count class="orange-count" :value="4500" />元 </span>
        </div>
        <div class="company">上海金茂实业有限公司</div>
        <div class="info">
          <div>
            <span>上市套数</span>
            <p><m-count class="count" :value="113" /><span>套</span></p>
          </div>
          <div>
            <span>上市面积</span>
            <p>
              <m-count class="count" :value="4146" />
              <span>㎡</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A010',
  title: '交易数据',
  row: 2,
}
</script>
<script lang="ts" setup>
const summary = [
  { name: '房屋供应总套数', value: 714, unit: '套' },
  { name: '房屋成交总套数', value: 1564, unit: '套' },
  { name: '车位成交总数', value: 1353, unit: '个' },
]
</script>

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

.sum
  display flex
  flex-wrap wrap
  $box()
  padding .05rem 0
  margin-bottom .05rem
  >p
    width 50%
    padding 0 .05rem
    box-sizing inherit
    display flex
    align-items center
    justify-content space-between
.house
  $box()
  padding .04rem .1rem
  margin-bottom .05rem
  .title
    display flex
    align-items center
    .line
      flex 1
      height 0
      border-bottom .01rem dashed $blue
      margin 0 .05rem
  .info
    display flex
    justify-content space-between
    >div
      // flex 1
      display flex
      span
        color #ccc
        font-size .08rem
      .count
        color #EDB872
        margin-left .04rem
</style>
