<template>
  <div>
    <div class="ors">
      <div class="orstitle">
        <SvgIcon name="ele-Notification" class="font15 color" />
        <p>说明</p>
      </div>
      <div class="orsitem">1、现售备案面积：指在报告期内未经预售，已竣工且具备交付使用条件，并已办理现售备案手续的商品房面积。此项指标不包括办理预售许可后竣工的商品房面积。</div>
      <div class="orsitem">2、可现售面积：指至统计月末时点已办理现售备案手续的商品房项目中尚未销售的房屋建筑面积。此项指标不包括办理预可后的商品房面积。</div>
      <div class="orsitem">3、按指标解释，以上两组数据应从已现售备案手续数据中采集，但我市未开展现售备案业务，因此，这部分数据无法采集。</div>
    </div>

    <div class="utable" v-if="props.uitem.regular != undefined || props.uitem.escalation != undefined">
      <div class="utabletitle" v-if="props.uitem.regular.use != null">{{ props.uitem.regular.use.areaName }}商品房上市供应情况表</div>
      <div class="utabletitle" v-else>{{ props.uitem.escalation.use.areaName }}商品房上市供应情况表</div>
      <div class="utabletop">
        <div>单位名称：{{ props.uitem.regular.use != null ? props.uitem.regular.use.areaName : props.uitem.escalation.use.areaName
        }}
        </div>
        <div>{{ props.uitem.regular.use != null ? props.uitem.regular.use.date : props.uitem.escalation.use.date }}</div>
      </div>
      <el-card shadow="hover" class="layout-padding-auto mb10">
        <div class="ctitle">
          <div class="title">手动上传</div>
        </div>
        <div v-if="state.handitem != null">
          <handTemple :udata="state.handitem"></handTemple>
        </div>
        <div v-else class="errornone">
          <el-empty description="暂无手动上传数据"></el-empty>
        </div>
      </el-card>
      <el-card shadow="hover" class="layout-padding-auto mb10">
        <div class="ctitle">
          <div class="title">自动上传</div>
        </div>
        <div v-if="state.autoitem != null">
          <autoTemple :udata="state.autoitem"></autoTemple>
        </div>
        <div v-else class="errornone">
          <el-empty description="暂无自动上传数据"></el-empty>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  defineAsyncComponent,
  reactive,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import { getCons } from "/@/api/report/construct";

// 自动
const autoTemple = defineAsyncComponent(
  () => import("/@/views/report/construct/components/tablecomponents/onetable/auto.vue")
);

// 手动
const handTemple = defineAsyncComponent(
  () => import("/@/views/report/construct/components/tablecomponents/onetable/hand.vue")
);

const state = reactive({
  autoitem: {} as any,
  handitem: {} as any
})


const props = defineProps({
  uitem: {
    type: Object,
    default: {},
  }
});
watch(
  () => props.uitem,
  (newVal) => {
    let _regular = newVal.regular.use;
    let _escalation = newVal.escalation.use;
    if (_regular != null && _escalation != null) {
      for (const [key, value] of Object.entries(_regular)) {
        if (_escalation != null) {
          for (const [keys, values] of Object.entries(_escalation)) {
            if (keys == key) {
              !Object.is(value, values) ? _escalation[`${keys}tag`] = 1 : _escalation[`${keys}tag`] = 0
            }
          }
        }
      }
    }
    state.autoitem = _regular
    state.handitem = _escalation
  },
)
</script>
<style lang="scss"></style>
