<template>
  <m-card title="市场预售">
    <n-space justify="space-between">
      <p>
        住宅预销售金额
        <span style="margin-left: 0.1rem">
          <m-count class="orange-count" :value="total" />
          万元
        </span>
      </p>
      <n-select
        v-model:value="year"
        class="my-select"
        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">
const _config = {
  name: 'A019',
  title: '市场预售',
  row: 1,
  baseUrl: window._base_url,
  apis: {
    main: '/service-special-ja-ddd/public/presale/statistical',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { NSpace, NSelect } from 'naive-ui'
import { ajax } from '@/ajax'

const year = ref('2021')
const total = ref(0)

watch(
  () => year.value,
  (val) => {
    ajax
      .get({
        url: _config.apis.main,
        params: { year: val },
      })
      .then((res) => {
        const {
          noLivePresaleNum = 0, //非居预售证数
          totalSets = 0, //总套数
          liveRate = 0, //居住占比
          totalPrice = 0, //总金额
          presaleNum = 0, //预售证数
          noLiveRate = 0, //非居占比
          livePresaleNum = 0, //居住预售证数
          totalArea = 0, //总面积
        } = res?.data?.content || {}
        total.value = totalPrice
        list.value = [
          {
            name: '住房',
            value: livePresaleNum,
            rate: liveRate * 100,
            color: '#ff9d26',
          },
          {
            name: '商办',
            value: noLivePresaleNum,
            rate: noLiveRate * 100,
            color: '#01bffe',
          },
        ]
        areas.value = [
          { name: '预销售面积', value: totalArea, unit: '㎡', decimal: 2 },
          { name: '预销售套数', value: totalSets, unit: '套', decimal: 0 },
        ]
      })
  },
  { immediate: true },
)

const yearOptions = [
  { label: '2021', value: '2021' },
  { label: '2020', value: '2020' },
  { label: '2019', value: '2019' },
]

const list = ref([
  { name: '住房', value: 0, rate: 0, color: '#ff9d26' },
  { name: '商办', value: 0, rate: 0, color: '#01bffe' },
])
const areas = ref([
  { name: '预销售面积', value: 0, unit: '㎡', decimal: 2 },
  { name: '预销售套数', value: 0, unit: '套', decimal: 0 },
])
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.bar
  display flex
  width 100%
  height .06rem
  margin .14rem 0
  >div
    position relative
    .count
      font-size .12rem
    >div
      height .15rem
      transform translateY(-100%)
      p
        min-width .5rem
      .name
        margin-top .05rem
    &:nth-of-type(1)
      >div
        border-left .01rem solid
      p
        width 100%
        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
    $box()
    color #ccc
    padding .05rem .08rem
    &+div
      flex 1
      margin-left .05rem
    .orange-count
      margin 0 .04rem .02rem 0.1rem
    span
      display flex
      align-items center
      font-size .09rem
      color #aaa
</style>
