<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>
              <el-button class="operation-button" type="primary" @cliick="archiveInfoFn1">归档1</el-button>
            </div>
          </div>
          <div class="card-table">
            <tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
            </tableshow>
          </div>
        </div>
      </div>
    </main>
    <!-- 归档窗口 -->
    <el-drawer v-model="archiveInfoDrawer" direction="rtl" :before-close="handleClose">
      asdada
    </el-drawer>

  </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: '', isShow: true },

  { label: '建筑编号', placeholder: "请选择", type: 'autocomplete', cliick: '', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
  { label: '归档编号', placeholder: "请选择", type: 'autocomplete', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
  { label: '归档时间', placeholder: "请选择", type: 'datepicker', content: '', isShow: true, 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 archiveInfoDrawer = ref(false)
const archiveInfoFn = () => {
  if (archiveInfoDate === undefined || archiveInfoDate.value === null || archiveInfoDate.value.length <= 0) {
    ElMessage.warning("没有勾选数据")
  } else {
    console.log('archiveInfoFn归档的数据', archiveInfoDate.value)
    // archiveInfoDrawer.value = true
    fireInfoDataImport.value = null
  }

}


const archiveInfoFn1 = () => {
  ElMessage.warning("没有勾选数据")

}

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 0;
  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;
  flex: 1;
  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%;
  /* background-color: aqua; */
  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>