<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" @cliick="archiveInfoFn" >归档</el-button>
            </div>
          </div>
          <div class="card-table">
            <tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted } from 'vue';
import searchtop from '../../commentcomponents/searchtop/index.vue';
// import tabledata from '../../commentcomponents/tabledata/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { staffGetPageInfoApi } from "../../../api/staff.js";
import tableshow from './components/tableshow.vue';


const searchShowData = ref([
  { label: '火情描述', placeholder: "请输入", type: 'input', content: '' },
  { label: '上报人', placeholder: "请输入", type: 'input', content: '' },
  { label: '上报时间', placeholder: "请输入", type: 'input', content: '' },
  { label: '建筑名称', placeholder: "请选择", type: 'select', content: '', options: [{label: '启用', value: '启用'}, {label: '禁用', value: '禁用'}] },
  { label: '建筑楼层', placeholder: "请选择", type: 'select', content: '', options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]},
]);

const layoutConfig = reactive({
  containerMinHeight: '100vh',
  cardSpacing: '1rem',
  statsMinHeight: '300px'
});

const isAddDrawer = ref(false);
const isEditDrawer = ref(false);
const isUserInfoDialogVisible = ref(false);
const isResetPasswordDialogVisible = ref(false);
const rowData = ref([]);
const resetPasswordData = ref({});
const showuserinfodata = ref({});

const tableShowData = ref([
    {id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'},
    {id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'},
    {id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'},
    {id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'},
]);


const archiveInfoDate = ref(null)
const  archiveInfoDateBackcallFn = (row) => { 
    archiveInfoDate.value = null
    archiveInfoDate.value = row
    console.log('archiveInfoFn需要归档的数据',archiveInfoDate.value)
};
const  archiveInfoFn = () => {
    console.log('archiveInfoFn归档的数据',archiveInfoDate.value)
};


const handleAddInfoFn = () => {
  isAddDrawer.value = true;
}

const tableDataRefresh = () => {
  initTableData();
}

const editData = (data) => {
  isEditDrawer.value = true;
  rowData.value = data;
}

const deleteData = (data) => {
  ElMessageBox.confirm(
    '删除操作不可逆，是否继续?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  ).then(() => {
    try {
      const res = staffRemoveInfoApi({id: data.id}); 
      if (res.code === 200) {
        ElMessage({ type: 'success', message: '已删除' });
        tableDataRefresh();
      } else {
        ElMessage({ type: 'error', message: '删除失败：' + res.msg });
      }
    } catch (err) {
      ElMessage({ type: 'error', message: '删除失败（网络错误）' });
    }
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除' });
  });
}

const resetData = (data) => {
  isResetPasswordDialogVisible.value = true;
  resetPasswordData.value = data;
}

const userData = (data) => {
  isUserInfoDialogVisible.value = true;
  showuserinfodata.value = data;
}

const initTableData = () => { 
  // staffGetPageInfoApi({
  //   "currentPageNum": 1,
  //   "currentPageSize": 10,
  // }).then(res => { 
  //   if(res.code === 200) {
  //     let tempData = res.data.list
  //     tableShowData.value[0].tableBody = []
  //     tempData = tempData.filter(element => element.isDeleted === 0);
      
  //     // tempData.forEach(element => { 
  //     //   element.Operation = [...Operation.value];
  //     // });
      
  //     tableShowData.value[0].tableBody = tempData;
  //     tableShowData.value[0].total = res.data.total;
  //     tableShowData.value[0].pageSize = res.data.pageSize;
  //   }
  // }).catch(err => { 
  //   ElMessage.error(err.message);
  // });
}

onMounted(() => { 
  initTableData();
});

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: 90%;
}

.card-actions {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  /* height: %;   */
  padding: 1.5rem;
}

.operation-button {
 flex: 1;
 display: flex;
 justify-self: end;
}

.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>