<template>
  <div class="BuildingBox">
    <div class="buildingheader flex align-center justify-between">
      <div>楼栋</div>
      <div>
        <span class="pointer" @click="handleAddBuilding" v-hasPermi="['house:add:building']">+增加楼栋</span>
      </div>
    </div>
    <ul>
      <li
        v-for="(item, index) in currentBuildingInfoList"
        :class="{
          active: item.id === currentBuildingInfo.id
        }"
        :key="index"
      >
        <div class="buildingname" @click="switchBuilding(item.id ?? null)">{{ item.buildingName ?? '' }}</div>
        <div class="buildactions flex align-center justify-around">
          <el-icon class="pointer hover-color-blue" @click="editBuilding(item.id)" v-hasPermi="['house:edit:building']"><Setting /></el-icon>
          <el-icon class="pointer hover-color-red" @click="deleteBuilding(item.id)" v-hasPermi="['house:delete:building']"><Delete /></el-icon>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { deleteBuildingApi } from '@/api/system/house';
import { useHouseStore } from '@/store/modules/house';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const houseStore = useHouseStore();
const { switchBuilding } = houseStore; // 方法
const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
const router = useRouter();

const handleAddBuilding = () => {
  router.push({
    path: '/house/addbuilding'
  });
};
const editBuilding = (id: string) => {
  router.push({
    path: '/house/editbuilding',
    query: {
      buildingId: id
    }
  });
};
const deleteBuilding = (id: string) => {
  proxy?.$modal.confirm('该信息删除后无法恢复，确定要删除吗？').then(() => {
    deleteBuildingApi(id).then(() => {
      houseStore.deleteBuildingFun(id);
      proxy?.$modal.msgSuccess('删除成功');
    });
  });
};
</script>

<style scoped lang="scss">
$primary_color: #1978fe;
.BuildingBox {
  width: 220px;
  height: 100%;
  font-size: 14px;
  background-color: #fff;
  border-radius: 2px;
  color: rgba(0, 0, 0, 1);
  margin-right: 10px;
  .buildingheader {
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    border-bottom: 1px solid #f2f2f2;
    span {
      color: $primary_color;
    }
  }

  li {
    height: 45px;
    line-height: 45px;
    color: rgba(16, 16, 16, 1);
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    &:hover {
      background-color: #1978fe0c;
    }
    .buildingname {
      text-align: center;
      width: 100%;
      padding: 0 20px 0 0;
      cursor: pointer;
    }
    .buildactions {
      position: absolute;
      right: 0;
      top: 0;
      width: 75px;
      font-size: 15px;
      padding: 15px 0;
      padding-right: 10px;
      color: rgba(153, 153, 153, 1);
    }

    &.active {
      color: $primary_color;
      border-bottom: 1px solid $primary_color;
    }
  }
}
</style>
