<template>
  <div class="dashboard-container" :style="containerStyle">
    <main class="main-content">
      <!-- 左侧区域 -->
      <div class="left-section">
        <!-- 左侧上部分 -->
        <div class="left-top">
          <!-- 区域信息概览 -->
          <div class="info-card region-overview">
            <searchtop :searchShowData="searchShowData" @commentGetList="getFloorGetFloorNoListFn"></searchtop>
          </div>
        </div>

        <!-- 左侧下部分：统计区域 -->
        <div class="info-card stats-alerts">
          <div class="card-tabs">
            <span class="title">楼建筑列表</span>
            <div class="card-actions">
              <el-button class="operation-button" type="primary" size="small">导入</el-button>
              <el-button class="operation-button" type="primary" size="small">导出</el-button>
              <el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增建筑</el-button>
              <el-button class="operation-button" type="primary" size="small" @click="handleRefreshInfoFn"><el-icon>
                  <RefreshRight />
                </el-icon></el-button>
              <el-button class="operation-button" type="primary" size="small"><el-icon>
                  <FullScreen />
                </el-icon></el-button>
            </div>
          </div>
          <div class="card-table">
            <tabledata :tableShowData="tableShowData" @getPageCommonAPI="initTableDateFn"></tabledata>
          </div>
        </div>
      </div>
    </main>

    <!-- 新增建筑抽屉 -->
    <el-drawer v-model="isAddDrawer" title="添加建筑信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer">
      <Flooraddbuilding @closeAddDrawer="closeAddDrawer" @tableDataRefresh="handleRefreshInfoFn"></Flooraddbuilding>
    </el-drawer>

    <!-- 修改建筑抽屉 -->
    <el-drawer v-model="isBuildingEditDrawer" title="修改建筑信息" :with-header="false"
      :before-close="beforeCloseAddBuildDrawer">

      <Flooraddbuilding :rowData="rowData" :isBuildingEditDrawer="isBuildingEditDrawer"
        @closeAddDrawer="closeBuildingEditDrawer" @tableDataRefresh="handleRefreshInfoFn"></Flooraddbuilding>

    </el-drawer>
    <!-- 图片预览组件 -->
    <el-image-viewer v-if="previewVisible && previewVisibledialogDate.length > 0" :url-list="previewVisibledialogDate"
      @close="previewVisible = false" />


  </div>
</template>

<script setup>
import { reactive, computed, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import searchtop from '../../commentcomponents/searchtop/index.vue';
import tabledata from '../../commentcomponents/tabledata/index.vue';
import useAppStore from '../../../store/module/app';
import router from '../../../router';
import Flooraddbuilding from './flooraddbuilding.vue';
import { useRoute, useRouter } from 'vue-router';
import { floorPageAPI, floorRemoveAPI, floorGetFloorNoListAPI } from '../../../api/floor';

const route = useRoute();
const useAppStoreInstance = useAppStore();
// 搜索栏配置
const searchShowData = ref([
  { label: '楼层描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
  { label: '楼层号', placeholder: "请选择", type: 'autocomplete', click: "floorGetFloorNoListFn", content: '', options: [], isShow: true }

]);

const getFloorGetFloorNoListFn = () => {
  floorGetFloorNoListAPI().then(res => {

  });

};

// 布局配置
const layoutConfig = reactive({
  containerMinHeight: '100vh',
  cardSpacing: '1rem'
});

// 抽屉控制
const isAddDrawer = ref(false);
const isBuildingEditDrawer = ref(false);
const rowData = ref([]);



// 方法定义
const handleAddInfoFn = () => {
  console.log("打开新增信息");
  isAddDrawer.value = true;

}

const handleRefreshInfoFn = () => {
  console.log("刷新数据");
  initTableDateFn({ currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum, currentPageSize: useAppStoreInstance.pageCountInfo.currentPageSize })
}
const closeAddDrawer = () => {
  console.log("000000-------1-----0000000000", isAddDrawer.value)
  isAddDrawer.value = false;

}

const beforeCloseAddBuildDrawer = () => {
  // 关闭前的处理逻辑
}



const oneBuildingSeeDetails = (data) => {
  console.log("查看详情", data);
  router.push({
    path: '/areabuildmanage/onefloor',
    // params: { data: JSON.stringify(data) } 
  });
}

const oneBuildingDdeleteData = (data) => {
  ElMessageBox.confirm('是否删除该建筑？此操作将无法撤销', '删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    console.log("删除", data.floorId, useAppStoreInstance.pageCountInfo.currentPageNum);
    floorRemoveAPI({ floorId: data.floorId }).then(res => {
      console.log("删除成功", res);
    })
    initTableDateFn({ currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum, currentPageSize: useAppStoreInstance.pageCountInfo.currentPageSize })
    ElMessage.success('已删除');
  }).catch((err) => {
    ElMessage.info('取消删除', err);
  });
}

const oneResetBuildingShowInfo = (data) => {
  console.log("000000----我执行了oneResetBuildingShowInfo", data)
  isBuildingEditDrawer.value = true;
  rowData.value = data;
  rowData.value.isEdit = true;

}

const closeBuildingEditDrawer = () => {
  isBuildingEditDrawer.value = false;
  console.log("000000----我执行了closeBuildingEditDrawer--------0000000000")
}
// 图片预览状态
const previewVisible = ref(false);

const previewVisibledialogDate = ref([]);
const seeBuildingFloorPlan = (data) => {
  console.log("查看楼层平面图", data);
  previewVisible.value = true;
  if (data.floorPlan) {
    previewVisibledialogDate.value = [data.floorPlan]
    return;
  } else {
    previewVisibledialogDate.value = []
    ElMessage.warning({
      message: '该层暂无楼层平面图',
      duration: 2000
    })
  }


}
// 表格数据
const tableShowData = ref([{
  tableHeader: [
    { label: '建筑编号', prop: 'buildCode' },
    { label: '建筑名称', prop: 'buildName' },
    { label: '建筑层数', prop: 'floorNo' },
    { label: '楼层平面图', prop: 'floorPlanSee' },
    { label: '更新时间', prop: 'updateTime' },
    { label: '楼层描述', prop: 'description' },
    { label: '操作', prop: 'Operation' }
  ],
  tableBody: []
}]);
// 计算属性
const containerStyle = computed(() => ({
  minHeight: layoutConfig.containerMinHeight,
  '--card-spacing': layoutConfig.cardSpacing,
}));
const Operation = ref([
  { label: '查看详情', type: 'primary', icon: 'Add', click: oneBuildingSeeDetails },
  { label: '删除', type: 'danger', icon: 'Delete', click: oneBuildingDdeleteData },
  { label: '修改', type: 'primary', icon: 'EditPen', click: oneResetBuildingShowInfo }
]);
const floorPlanSee = ref([{ label: '查看', type: 'primary', icon: 'EditPen', click: seeBuildingFloorPlan },]);

const initTableDateFn = (parameter) => {
  let submitData = { currentPageNum: parameter.currentPageNum, currentPageSize: parameter.currentPageSize, ...useAppStoreInstance.PUSHPARAMETER };
  floorPageAPI(submitData).then(res => {
    console.log('获取建筑列表数据返回结果:', res);
    if (res.code === 200) {
      tableShowData.value[0].tableBody = []
      let { list, total } = res.data;
      list = list.filter(element => {
        return element.isDeleted === 0;
      });
      list.forEach(element => {
        element.Operation = [...Operation.value]
        element.floorPlanSee = [...floorPlanSee.value]
      });

      tableShowData.value[0].tableBody = list
      tableShowData.value[0].total = total
      console.log(tableShowData.value, '展示数据');
    }
  })
}
// 监听路由变化
watch(route, () => {
  initTableDateFn({ currentPageNum: 1, currentPageSize: 10 })
  console.log('新增组件已挂载', useAppStoreInstance.setParameter)
}, { immediate: true });

</script>

<style scoped>
.dashboard-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
  overflow: hidden;
}

.main-content {
  display: flex;
  gap: var(--card-spacing);
  padding: 0.4rem;
  height: 100vh;
  box-sizing: border-box;
}

.left-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  height: 100%;
}

.left-top {
  height: auto;
}

.info-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

.region-overview {
  flex: 1;
  min-width: 200px;
}

.stats-alerts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 67%;
}

.card-tabs {
  display: flex;
  border-bottom: 1px solid #292828;
  font-size: 1.2rem;
  color: #000000;
  height: 8%;
  align-items: center;
  width: 100%;
  padding: 10px;
}

.title {
  width: 70%;
}

.card-actions {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 8%;
}

.operation-button {
  width: 15%;
}

.card-table {
  width: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .left-top {
    flex-direction: column;
  }

  .region-overview {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 768px) {
  .stats-alerts {
    flex-direction: column;
  }
}
</style>