<template>
  <div>
    <el-card shadow="hover" class="home-card-one mb10">
      <div class="ctitle">
        <div class="title">商品房总量统计</div>
      </div>
      <div class="totalcon">
        <div class="totaltop">
          <div class="totaltopitem" v-for="(item, idx) in state.list">
            <div class="totaltopitemtitle">{{ item.name }}</div>
            <div class="tx"></div>
            <div class="totaltopitemcon">
              <p class="ptxt">
                套数；<span>{{ proxy?.$method.numFormat(item.num) }}</span> 套
              </p>
              <p class="ptxt">
                面积；<span>{{ proxy?.$method.numFormat(item.area, 1) }}</span> 万m²
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="enterIndex">
import { reactive, onMounted, defineProps, watch } from "vue";
import { housApi } from "/@/api/hous/index";
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();
const props = defineProps({
  radio: {
    type: String,
    default: "",
  },
});

watch(
  () => [props.radio],
  () => {
    loadData();
  },
  { deep: true }
);
const state = reactive({
  id: 1,
  list: [
    { name: "商品房总量", area: 0, num: 0, id: 1 },
    { name: "商品房住宅总量", area: 0, num: 0, id: 5 },
    { name: "批售总量", area: 0, num: 0, id: 2 },
    { name: "销售总量", area: 0, num: 0, id: 3 },
    { name: "库存总量", area: 0, num: 0, id: 4 },
    { name: "住宅批售总量", area: 0, num: 0, id: 6 },
    { name: "住宅销售总量", area: 0, num: 0, id: 7 },
    { name: "住宅库存总量", area: 0, num: 0, id: 8 },
  ],
  data: {} as any,
});
onMounted(() => {
  loadData();
});
async function loadNum() {
  let item = state.data;
  let list = state.list;
  list[0].num = item.totalNum;
  list[0].area = item.totalArea;

  list[1].num = item.resTotalNum;
  list[1].area = item.resTotalArea;

  list[2].num = item.approveTotalNum;
  list[2].area = item.approveTotalArea;

  list[3].num = item.saleTotalNum;
  list[3].area = item.saleTotalArea;

  list[4].num = item.inventoryTotalNum;
  list[4].area = item.inventoryTotalArea;

  list[5].num = item.resApproveTotalNum;
  list[5].area = item.resApproveTotalArea;

  list[6].num = item.resSaleTotalNum;
  list[6].area = item.resSaleTotalArea;

  list[7].num = item.resInventoryTotalNum;
  list[7].area = item.resInventoryTotalArea;
}

async function loadData() {
  let item = await housApi().houseApi({
    district: props.radio
  });
  state.data = item.data.data;
  loadNum();
}
</script>

<style scoped lang="scss">
.totalcon {
  padding-top: 10px;
  .totaltop {
    padding: 10px;
    display: flex;
    align-items: center;
    .totaltopitem {
      position: relative;
      flex: 1;
      margin: 0 5px;
      padding: 20px;
      border-radius: 5px;
      background-color: #ececfc;
      box-shadow: 0 0 14px #ececfc;
      transition: 0.3s;
      &:last-child {
        .ptxt {
          margin-bottom: 0;
        }
      }
      .totaltopitemcon {
        .ptxt {
          font-size: 13px;
          color: #666;
          margin-bottom: 6px;
          span {
            font-weight: bold;
            color: #000;
          }
        }
      }
      .totaltopitemtitle {
        font-size: 14px;
        font-weight: bold;
      }
      .tx {
        width: 100%;
        height: 2px;
        background-color: #f7f7f7;
        margin: 10px 0;
      }
    }
  }
}
</style>
