<template>
  <div class="UnitBox">
    <div class="Unit_top flex align-center justify-between">
      <div>
        <span class="text-size-16px text-color-black text-widget-bold mr-30px">
          <strong>{{ houseStore.currentBuildingInfo.buildingName }}</strong>
        </span>
        <span class="mr-30px">楼栋朝向:{{ houseStore.currentBuildingInfo.buildToward }}</span>
        <span class="mr-30px">楼高：{{ houseStore.currentBuildingInfo.buildTall }}</span>
        <span class="mr-30px">楼栋结构：{{ houseStore.currentBuildingInfo.buildStructure }} </span>
      </div>
      <div class="rightActions">
        <span class="mr-20px" @click="handleAddHouse">+增加房屋</span>
        <span class="mr-20px">收费标准设置</span>
        <span>删除</span>
      </div>
    </div>
    <div class="UnitBody">
      <TableUnit></TableUnit>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TableUnit from './components/table.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const router = useRouter();
function handleAddHouse() {
  router.push({
    path: '/house/addHouse'
  });
}
</script>

<style scoped lang="scss">
$primary_color: #1978fe;
.UnitBox {
  flex: 1;
  height: 100%;
  max-width: 100%;
  border-radius: 2px;
  font-size: 14px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .Unit_top {
    padding: 20px;
    height: 60px;
    color: rgba(102, 102, 102, 1);
    .rightActions {
      color: $primary_color;
      span {
        cursor: pointer;
      }
    }
  }
  .UnitBody {
    flex: 1;
  }
}
</style>
