<template>
  <div class="h-full box">
    <div class="header">
      <span class="">智慧物业后台管理系统</span>
      <navbar :Showhamburger="false" ref="navbarRef" />
    </div>
    <div class="containerbox">
      <div class="community_nav_box">
        <div class="currentbox">当前小区:{{ currentViliageInfo && currentViliageInfo.villageName }}</div>
        <div class="subtitle flex align-center">
          <div class="changecommunity">切换小区</div>
        </div>
      </div>
      <div class="communityBody">
        <div class="coummunity_card" v-for="(item, index) in list" :key="index">
          <el-image
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="item.villageImageUrl ? item.villageImageUrl.split(',') : [defaultVilageinfoImage]"
            show-progress
            :initial-index="4"
            fit="cover"
            :src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : defaultVilageinfoImage"
          >
            <template #error>
              <div class="image-viewer-slot image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
          <div class="coummunityaction_box">
            <div class="coummunityname">{{ item.villageName }}</div>
            <div class="counmmunityaddress">{{ item.address }}</div>
          </div>
          <div class="actions flex">
            <div @click="handleclick(item)">管理</div>
            <div @click="handleEdit(item)" v-hasPermi="['system:village:edit']">编辑</div>
            <div @click="handleDelete(item)" v-hasPermi="['system:village:remove']">删除</div>
          </div>
        </div>
        <div v-hasPermi="['system:village:add']" @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
          <div class="addCoummunity">
            <el-icon>
              <AddLocation></AddLocation>
            </el-icon>
            <div>添加小区</div>
          </div>
        </div>
      </div>
    </div>
    <i class="bgcolor"></i>
  </div>
</template>
<script lang="ts" setup>
import defaultVilageinfoImage from '@/assets/images/villageimage.png';
import Navbar from '@/layout/components/Navbar.vue';
import { deleteVillageByIdAPI, switchVillageAPI, getCommunitylistAPI } from '@/api/system/community/index';
import type { communitylist_rows_type } from '@/api/system/community/type';
import { Picture } from '@element-plus/icons-vue';
import { useHouseStore } from '@/store/modules/house';

const houseStore = useHouseStore();
const router = useRouter();
const list = ref<communitylist_rows_type[]>([]);
const currentViliageInfo = ref<communitylist_rows_type>();
/** 获取小区列表 */
function getlist() {
  getCommunitylistAPI().then((res) => {
    list.value = res.rows;
    const villageid = localStorage.getItem('villageid');
    const find = list.value.find((item) => item.villageId === villageid);
    if (find) {
      currentViliageInfo.value = find;
    }
  });
}
getlist();
/** 新增小区 */
function handleAdd() {
  router.push({
    path: '/community/AddCommunity'
  });
}

/** 删除小区 */
function handleDelete(item: communitylist_rows_type) {
  deleteVillageByIdAPI(item.villageId).then(() => {
    const newlist = list.value.filter((listitem) => listitem.villageId !== item.villageId);
    list.value = newlist;
  });
}

/** 编辑小区 */
function handleEdit(item: communitylist_rows_type) {
  router.push({
    path: '/community/AddCommunity',
    query: {
      id: item.villageId
    }
  });
}

/** 管理小区 */
function handleclick(item: communitylist_rows_type) {
  switchVillageAPI(item.villageId).then(() => {
    localStorage.setItem('villageInfo', JSON.stringify(item));
    localStorage.setItem('villageid', item.villageId);
    houseStore.getviliageinfo(item.villageId);
    router.push({
      path: '/'
    });
  });
}
</script>
<style scoped lang="scss">
.box {
  background: linear-gradient(180deg, #deedff 0%, #f8f9fe 50%);

  .header {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    background: transparent;
    & > div {
      flex: 1;
    }
    & > span {
      padding-left: 20px;
      font-size: 20px;
      color: white;
      color: #000;
    }
  }

  .bgcolor {
    width: 1085px;
    height: 571px;
    background: #fdf1ee;
    filter: blur(400px);
    display: block;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    right: 0;
    pointer-events: none; /* 🔥 让它不拦截鼠标点击，穿透到下面 */
    @media (max-width: 1540px) {
      width: 800px;
      height: 400px;
    }
    @media (max-width: 1280px) {
      width: 600px;
      height: 300px;
    }
    @media (max-width: 1030px) {
      width: 400px;
      height: 200px;
    }
  }
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 30px;
  height: 200px;
  background: #fff;
}
.containerbox {
  width: 85%;
  margin: 0 auto;
  padding: 20px;
  background: transparent;
  .community_nav_box {
    height: 98px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    .currentbox {
      height: 20px;
      line-height: 20px;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
      margin-bottom: 20px;
    }
    .subtitle {
      .line {
        margin-top: 4px;
        width: 5px;
        height: 19px;
        border-radius: 5px;
        background-color: rgba(26, 117, 255, 1);
        margin-right: 5px;
      }
      .changecommunity {
        height: 25px;
        line-height: 25px;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
      }
    }
  }
  .communityBody {
    padding: 20px;
    color: #000;
    display: flex;
    flex-wrap: wrap;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    @media (max-width: 2350px) {
      grid-template-columns: repeat(4, 1fr);
    }
    @media (max-width: 1900px) {
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 1450px) {
      grid-template-columns: repeat(2, 1fr);
    }
    .coummunity_card {
      min-width: 369px;
      max-width: 369px;
      min-height: 358px;
      border: 2px solid #ffffff;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
      box-shadow: 0px 4px 8px 0px rgba(0, 104, 255, 0.06);
      border-radius: 16px 16px 16px 16px;
      margin-right: 20px;
      margin-bottom: 15px;

      overflow: hidden;
      display: flex;
      flex-direction: column;

      &:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      .el-image {
        height: 179px;
        width: 100%;
        object-fit: cover;
      }
      .coummunityaction_box {
        flex: 1;
        padding: 30px;
        font-weight: 500;
        font-size: 20px;
        color: #303133;
        line-height: 25px;
        .counmmunityaddress {
          margin-top: 10px;
          font-weight: 400;
          font-size: 16px;
          color: #666666;
          line-height: 20px;
        }
      }
      .actions {
        height: 60px;
        div {
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          flex: 1;
          text-align: center;
          color: #4791ff;
          cursor: pointer;
          line-height: 60px;
          font-weight: 500;
          font-size: 18px;
          color: #036aff;
          &:hover {
            background-color: #f5f7fb;
          }
        }
        & > div:last-child {
          color: red;
          border-right: none;
        }
      }

      .addCoummunity {
        height: 40px;
        text-align: center;
      }

      &.addActions {
        cursor: pointer;
        &:hover {
          background-color: #f5f7fb;
        }
      }
    }
  }
}
</style>
