<template>
  <m-card title="市场预售">
    <n-space justify="space-between">
      <p>
        住宅预销售金额
        <span style="margin-left: 0.1rem">
          <m-count class="orange-count" :value="1684" />
          万元
        </span>
      </p>
      <n-select v-model:value="year" size="small" :options="yearOptions" />
    </n-space>
    <div class="bar">
      <div
        v-for="item in list"
        :key="item.name"
        :style="{ flex: item.rate, background: item.color }"
      >
        <div :style="{ borderColor: item.color }">
          <p>
            <span :style="{ color: item.color }">
              {{ item.value }}
            </span>
            张
            <span :style="{ color: item.color }">
              {{ item.rate }}
            </span>
            %
          </p>
          <p class="name">{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="areas">
      <div v-for="item in areas" :key="item.name">
        <p>{{ item.name }}</p>
        <span>
          <m-count
            class="orange-count"
            :value="item.value"
            :decimal="item.decimal"
          />
          {{ item.unit }}
        </span>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A019',
  title: '市场预售',
  row: 1,
}
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import { NSpace, NSelect } from 'naive-ui'

const year = ref('2021')
const yearOptions = [
  { label: '2021', value: '2021' },
  { label: '2020', value: '2020' },
  { label: '2019', value: '2019' },
]
const list = [
  { name: '住房', value: 10, rate: 65, color: '#ff9d26' },
  { name: '商办', value: 2, rate: 35, color: '#01bffe' },
]
const areas = [
  { name: '预销售面积', value: 32.99, unit: '㎡', decimal: 2 },
  { name: '预销售套数', value: 561, unit: '套', decimal: 0 },
]
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.bar
  display flex
  width 100%
  height .06rem
  margin .1rem 0
  >div
    position relative
    .count
      font-size .12rem
    >div
      height .15rem
      transform translateY(-100%)
      .name
        margin-top .05rem
    &:nth-of-type(1)
      >div
        border-left .01rem solid
      p
        margin-left .05rem
    &:nth-of-type(2)
      >div
        border-right .01rem solid
        padding-right .1rem
      p
        width 100%
        text-align right
        margin-right .1rem
.areas
  display flex
  justify-content space-between
  >div
    display flex
    align-items center
    justify-content space-between
    width 49%
    $box()
    color #ccc
    padding .05rem .08rem
    .orange-count
      margin 0 .04rem .02rem 0
    span
      display flex
      align-items center
      font-size .09rem
      color #aaa
</style>
