<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"></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"></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" @closeEditDrawer="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 } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import searchtop from '../../commentcomponents/searchtop/index.vue';
import tabledata from '../../commentcomponents/tabledata/index.vue';

import router from '../../../router';
import Flooraddbuilding from './flooraddbuilding.vue';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
// 搜索栏配置
const searchShowData = ref([
  { label: '楼层描述', placeholder: "请输入", type: 'input', content: '' },
  { label: '楼层号', placeholder: "请选择", type: 'select', content: '', options: [
    {label:'火灾', value:'烟雾'}, 
    {label:'烟雾', value:'火灾'}
  ] },
  
]);

// 布局配置
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("刷新数据");
}
const closeAddDrawer = () => {
  console.log("000000-------1-----0000000000",isAddDrawer.value)
  isAddDrawer.value = false;

}

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



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

const oneBuildingDdeleteData = (data) => {
  ElMessageBox.confirm('是否删除该建筑？此操作将无法撤销', '删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    handleRefreshInfoFn()
    ElMessage.success('已删除');
  }).catch(() => {
    ElMessage.info('取消删除');
  });
}

const oneResetBuildingShowInfo = (data) => {
    
  isBuildingEditDrawer.value = true;
  rowData.value = data;

}

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

const previewVisibledialogDate = ref([]);
const seeBuildingFloorPlan = (data) => {
  console.log("查看楼层平面图", data);
  previewVisible.value = true;
  if(data.buildingFloorPlan.length > 0) {
    previewVisibledialogDate.value = ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',]
    return;
  }else {
    ElMessage.warning({
      message: '该层暂无楼层平面图',
      duration: 2000
    })
  }
  

}
// 表格数据
const tableShowData = ref([{
  tableHeader: [
    {label: '建筑编号', prop: 'buildingNo'},
    {label: '建筑名称', prop: 'buildingName'},
    {label: '建筑层数', prop: 'buildingFloorCount'},
    {label: '楼层平面图', prop: 'buildingFloorPlan'},
    {label: '更新时间', prop: 'buildingUpdataTime'},
    {label: '楼层描述', prop: 'buildingDescription'},
    {label: '操作', prop: 'buildingOperation'}
  ],
  tableBody: [
    {buildingNo: '张三', buildingName:"123456", buildingFloorCount: 11, buildingFloorPlan:
        [
           {label:'查看', type:'primary', icon:'EditPen', click: seeBuildingFloorPlan}, 
        ], 
        buildingUpdataTime: Date.now(),buildingDescription:' TEST ',
        buildingOperation: [
            {label:'查看详情', type:'primary', icon:'EditPen', click: oneBuildingSeeDetails}, 
            {label:'删除', type:'danger', icon:'Delete', click: oneBuildingDdeleteData}, 
            {label:'修改', type:'primary', icon:'EditPen', click: oneResetBuildingShowInfo}
    ]},
    {buildingNo: '张89三', buildingName:"123456", buildingFloorCount: 11, buildingFloorPlan:
        [
           {label:'查看', type:'primary', icon:'EditPen', click: seeBuildingFloorPlan}, 
        ], 
        buildingUpdataTime: Date.now(),buildingDescription:' TEST ',
        buildingOperation: [
            {label:'查看详情', type:'primary', icon:'EditPen', click: oneBuildingSeeDetails}, 
            {label:'删除', type:'danger', icon:'Delete', click: oneBuildingDdeleteData}, 
            {label:'修改', type:'primary', icon:'EditPen', click: oneResetBuildingShowInfo}
    ]},
    {buildingNo: '张45三', buildingName:"123456", buildingFloorCount: 11, buildingFloorPlan:
        [
           {label:'查看', type:'primary', icon:'EditPen', click: seeBuildingFloorPlan}, 
        ], 
        buildingUpdataTime: Date.now(),buildingDescription:' TEST ',
        buildingOperation: [
            {label:'查看详情', type:'primary', icon:'EditPen', click: oneBuildingSeeDetails}, 
            {label:'删除', type:'danger', icon:'Delete', click: oneBuildingDdeleteData}, 
            {label:'修改', type:'primary', icon:'EditPen', click: oneResetBuildingShowInfo}
    ]},
    
  ]
}]);
// 计算属性
const containerStyle = computed(() => ({
  minHeight: layoutConfig.containerMinHeight,
  '--card-spacing': layoutConfig.cardSpacing,
}));
</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>