<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">
            <div class="card-tabs">
              <span class="title">历史火情详情</span>
            </div>
            <div class="first-card-content">
              <img src="https://picsum.photos/300/200" alt="">
            </div>
          </div>
        </div>

        <!-- 左侧下部分：统计区域 -->
        <div class="info-card stats-alerts">
          <div class="card-tabs">
            <span class="title">火情汇报列表</span>
            <div class="card-actions">
              <!-- <el-button type="danger" plain>Danger</el-button> -->
              <el-button class="operation-button" type="danger" plain @click="fireInfoDataDeleteFn">撤销归档</el-button>
              <el-button class="operation-button" type="danger" plain @click="fireInfoDataDeleteFn">删除</el-button>
              <el-button class="operation-button" type="primary" @click="addFireInfoDataImportFn">新增</el-button>
            </div>
          </div>
          <div class="card-table">
            <!-- 表格 -->
            <Tableshowdetail :tableShowData="tableShowData"
              @fireInfoDataImportBackcallFn="fireInfoDataImportBackcallFn"></Tableshowdetail>
          </div>

        </div>
      </div>
    </main>
    <!-- 新增添加框 -->
    <el-drawer v-model="addFireInfoDataImportFndrawer" :with-header="false">
      <addFireInfo></addFireInfo>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted } from 'vue';



import { ElMessage, ElMessageBox } from 'element-plus'

import addFireInfo from './addFireInfo.vue';

import Tableshowdetail from './tableshowdetail.vue';
const addFireInfoDataImportFndrawer = ref(false);
const addFireInfoDataImportFn = () => {
  addFireInfoDataImportFndrawer.value = true
}
const fireInfoDataImport = ref(null);
const fireInfoDataImportBackcallFn = (info) => {
  fireInfoDataImport.value = info
}

const fireInfoDataDeleteFn = () => {
  if (fireInfoDataImport === undefined || fireInfoDataImport.value === null || fireInfoDataImport.value.length <= 0) {
    ElMessage.warning("没有勾选数据")
  } else {
    console.log("删除数据", fireInfoDataImport.value)
    fireInfoDataImport.value = null
  }

}
const fireInfoDataImportFn = () => {
  if (fireInfoDataImport === undefined || fireInfoDataImport.value === null || fireInfoDataImport.value.length <= 0) {
    ElMessage.warning("没有勾选数据")
  } else {
    console.log("导入数据", fireInfoDataImport.value)
    fireInfoDataImport.value = null
  }

}

// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([
  { label: '用户姓名', placeholder: "请输入", type: 'input', content: '', isShow: true },
  { label: '用户状态', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
  { label: '用户角色', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
])
// 响应式布局配置
const layoutConfig = reactive({
  containerMinHeight: '100vh',
  cardSpacing: '1rem',
  statsMinHeight: '300px'
});



const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示状态



/**
 * 刷新表格数据的方法
 * 当调用此方法时，会触发表格数据的重新加载
 */
const tableDataRefresh = () => {
  initTableData()
  console.log("000000-------2-----0000000000,这里获取到最新的数据")

}
/**
 * 控制编辑抽屉的显示状态
 * @type {Ref<boolean>} - 响应式布尔值，用于控制编辑抽屉的显示
 */
const isEditDrawer = ref(false)
/**
 * 存储行数据
 * @type {Ref<Array>} - 响应式数组，用于存储当前选中的行数据
 */
const rowData = ref([])
/**
 * 编辑数据的方法
 * @param {Object} data - 要编辑的数据对象
 */
const editData = (data) => {
  // 打开编辑抽屉
  isEditDrawer.value = true
  // 设置要编辑的数据
  rowData.value = data

  console.log("000000-------1-----0000000000", data)
}

/**
 * 删除数据的方法
 * @param {Object} data - 要删除的数据对象
 * 显示确认对话框，用户确认后执行删除操作
 */
const deleteData = (data) => {
  console.log("000000---2---------0000000000", data)
  ElMessageBox.confirm(
    '删除操作不可逆，是否继续?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  )
    .then(() => {
      console.log("000000---1-456464564------0000000000", "我是确认")
      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) {
        // API 请求失败时在此捕获，不向上冒泡
        ElMessage({ type: 'error', message: '删除失败（网络错误）' });
        // console.error('删除接口失败：', err);
      }

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}

// const deleteUserDate = (data) => { 
//   staffRemoveInfoApi(data).then((res) => { 
//     console.log(res,'--------------8--');
//     if(res.code==200){
//       ElMessage({
//         type: 'success',
//         message: '已删除',
//       })
//       tableDataRefresh()
//     }
//   }).catch(() => { 
//     ElMessage({
//       type: 'info',
//       message: '删除shibai',
//     })
//   })
// }
const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的显示状态
const closeResetPasswordDialogFn = () => {
  isResetPasswordDialogVisible.value = false
}
const resetPasswordData = ref({});
const resetData = (data) => {
  console.log("000000-----3-------0000000000", data)
  isResetPasswordDialogVisible.value = true;
  resetPasswordData.value = data;
}

const showuserinfodata = ref({})
const userData = (data) => {
  console.log("000000------4------0000000000", data)
  isUserInfoDialogVisible.value = true
  showuserinfodata.value = data
}
const tableShowData = [{
  id: 1,
  fireNo: 12,
  updataTime: '2016-05-04',
  name: 'Aleyna Kutzner',
  floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  reporter: "张三",
  discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis',
  fireLevel: '1级',
  firePoint: '厨房',

},
{
  id: 1,
  fireNo: 12,
  updataTime: '2016-05-04',
  name: 'Aleyna Kutzner',
  floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  reporter: "张三",
  discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis',
  fireLevel: '1级',
  firePoint: '厨房',

}]

const Operation = ref([{ label: '编辑', type: 'primary', icon: 'EditPen', click: editData },
{ label: '删除', type: 'danger', icon: 'Delete', click: deleteData },
{ label: '用户信息', type: 'primary', icon: 'EditPen', click: userData },
{ label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }]

)
const initTableData = () => {
  // staffGetPageInfoApi({
  //   "currentPageNum": 1,
  //   "currentPageSize": 10,

  // }).then(res => { 
  //     if(res.code === 200){
  //       let tempData = res.data.list
  //       tableShowData.value[0].tableBody = []
  //       //获取未逻辑删除的数据
  //       console.log(res.data,"--------999999999----")
  //       tempData = tempData.filter(element => {
  //         return 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
  //       console.log(tableShowData.value, '展示数据');

  //     }

  //   }).catch(err => { 
  //     message.error(err.message)

  //   })
}

onMounted(() => {
  // console.log(tableShowData.value, '错误');
  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: 1;
  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 {
  /* background-color: #ce1f1f; */
  /* flex: 1; */
  height: 290px;
}

/* 统计区域 */
.stats-alerts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 47%;
}

.card-tabs {
  display: flex;
  /* border-bottom: 1px solid #8a8787; */
  justify-content: space-between;
  font-size: 1.2rem;
  color: #000000;
  padding: 1.3rem;
  height: 8%;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;

}

.first-card-content {

  width: 100%;
  height: 100%;
  padding-top: 1rem;
}

.title {
  /* width: 100%; */
  /* background-color: #000000; */
}

.card-actions {
  display: flex;
  /* flex: 1; */
  justify-content: end;
  align-items: center;
  background-color: aqua;
  height: 8%;

  padding: 1.5rem;

}

.operation-button {
  /* width: 15%; */
  width: 100%;

}

.card-tabs-footer {
  display: flex;

  /* margin-bottom: 1rem; */
  font-size: 1.2rem;
  color: #000000;
  /* background-color: #002aff; */
  height: 8%;

  align-items: center;
  width: 100%;
  padding: 10px 0;

  justify-content: flex-end;
  align-items: center;

}

/* 文本样式 */
.page-text {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
  /* 防止文本换行 */
}

/* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep(.el-pagination) {
  display: flex;
  align-items: center;
  margin: 0;
  /* 清除默认外边距 */
}

.pagination-block {

  height: 8%;
}

.card-table {
  width: 100%;

  /* display: flex; */
  /* background-color: #000000; */
  /* flex:1; */
  height: 80%;
  overflow: auto;
  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>