<template>
  <div class="p-2 houselist">
    <PageHeader>
      <template #content>
        <div class="houseAdressBox">
          <span class="mr-50px">当前小区：{{ currentVilageInfo && currentVilageInfo.villageName }}</span>
          <span>小区地址：{{ currentVilageInfo && currentVilageInfo.city }} {{ currentVilageInfo && currentVilageInfo.address }}</span>
        </div>
        <div class="houseTypeBox flex">
          <div
            class="housetype"
            :class="{
              active: active === index
            }"
            @click="changeHouseType(index)"
            v-for="(house, index) in housetypelist"
            :key="index"
          >
            {{ house }}
          </div>
        </div>
      </template>
    </PageHeader>
    <div class="houseBody mt-10px w-full flex align-center justify-center">
      <building></building>
      <unit></unit>
    </div>
  </div>
</template>
<script setup name="Houselist" lang="ts">
import building from './components/building.vue';
import unit from './components/unit.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const { currentVilageInfo } = storeToRefs(houseStore);
console.log(currentVilageInfo);

const housetypelist = ['住宅', '办公', '商用', '公寓'];
const active = ref(0);
const changeHouseType = (index: number) => {
  active.value = index;
};

// 初始化数据
houseStore.initHouse(active.value);
</script>

<style lang="scss" scoped>
.houselist {
  flex: 1;
  box-sizing: border-box;
  height: calc(100vh - 84px);
  min-height: calc(100vh - 84px);
  .houseBody {
    height: calc(100% - 200px);
  }
}
.houseAdressBox {
  margin-top: 25px;
  height: 20px;
  line-height: 20px;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
}
.houseTypeBox {
  margin-top: 20px;
  .housetype {
    $activeColor: rgba(26, 117, 255, 1);
    cursor: pointer;
    width: 100px;
    height: 40px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    border: 1px solid transparent;
    margin-left: -1px;

    &:hover,
    &.active {
      color: $activeColor;
      border-bottom-color: $activeColor;
    }
  }
}
</style>
