<template>
  <div>
    <div class="ors">
      <div class="orstitle">
        <SvgIcon name="ele-Notification" class="font15 color" />
        <p>说明</p>
      </div>
      <div class="orsitem">“90㎡以下”是指小于等于90㎡，“90-144㎡”是指大于90㎡小于等于144㎡，“144㎡以上”是指大于144㎡。</div>
    </div>
    <div class="utable" v-if="props.uitem.regular != undefined || props.uitem.escalation != undefined">
      <div class="utabletitle" v-if="props.uitem.regular.total != null">{{ props.uitem.regular.total.areaName
      }}“城房指数”情况表
      </div>
      <div class="utabletitle" v-else>{{ props.uitem.escalation.total.areaName }}“城房指数”情况表</div>
      <div class="utabletop">
        <div>单位名称：{{ props.uitem.regular.total != null ? props.uitem.regular.total.areaName :
          props.uitem.escalation.total.areaName
        }}
        </div>
        <div>{{ props.uitem.regular.total != null ? props.uitem.regular.total.date : props.uitem.escalation.total.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/seventable/auto.vue")
);

// 手动
const handTemple = defineAsyncComponent(
  () => import("/@/views/report/construct/components/tablecomponents/seventable/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.total;
    let _escalation = newVal.escalation.total;
    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>

