<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="tab-btn">历史火情统计</span>
          </div>
            <div class="content" >
                <Uavcard :drone="drones"></Uavcard>
            </div>
            

          </div>
        </div>

       
      </div>
    </main>

    
  </div>
</template>

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


import { ElMessage, ElMessageBox } from 'element-plus'
import Uavcard from './components/uavcard.vue';


const drones = ref([
  {
    id: 1,
    model: 'DJI Mavic 3',
    image: new URL('../../static/image/huo.png', import.meta.url).href,
    availableChannels: 4,
    actualChannels: 3,
    status: '正常运行中',
    battery: 78,
    height: 120,
    speed: 12,
    distance: 450,
    indicators: {
      live: true,
      flying: true,
      mission: false,
      warning: false
    }
  },
  {
    id: 2,
    model: 'DJI Phantom 4',
    image: new URL('../../static/image/huo.png', import.meta.url).href,
    availableChannels: 6,
    actualChannels: 0,
    status: '飞行中',
    battery: 92,
    height: 0,
    speed: 0,
    distance: 0,
    indicators: {
      live: true,
      flying: true,
      mission: false,
      warning: false
    }
  },
  {
    id: 3,
    model: 'DJI Mini 2',
    image: new URL('../../static/image/huo.png', import.meta.url).href,
    availableChannels: 2,
    actualChannels: 1,
    status: '正常运行中',
    battery: 45,
    height: 85,
    speed: 5,
    distance: 320,
    indicators: {
      live: true,
      flying: true,
      mission: true,
      warning: false
    }
  }
]);



// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
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:'烟雾', value:'火灾'}] },
  { label: '建筑名称', placeholder: "请选择", type: 'select', content:'' ,options: [{label:'火灾1', value:'烟雾1'}, {label:'烟雾1', value:'火灾1'}, {label:'烟雾1', value:'火灾1'}] },
])
// 响应式布局配置
const layoutConfig = reactive({
  containerMinHeight: '100vh',
  cardSpacing: '1rem',
  statsMinHeight: '300px'
});



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

/**
 * 控制添加抽屉的显示状态
 * @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
 */
const isAddDrawer= ref(false)
const closeAddDrawer = () => {
  console.log("000000-------3-----0000000000")
  // 关闭添加抽屉
  isAddDrawer.value = false
}
const handleAddInfoFn = () => {
  isAddDrawer.value = true
}
const beforCloseAddDrawer = () => {

}
/**
 * 刷新表格数据的方法
 * 当调用此方法时，会触发表格数据的重新加载
 */
const tableDataRefresh = () => {
  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)
}
/**
 * 关闭编辑抽屉的方法
 * 调用后将关闭编辑抽屉并重置相关状态
 */
const closeEditDrawer = () => {
  console.log("000000-------23-----0000000000")
  // 关闭编辑抽屉
  isEditDrawer.value = false
}
/**
 * 删除数据的方法
 * @param {Object} data - 要删除的数据对象
 * 显示确认对话框，用户确认后执行删除操作
 */
const deleteData = (data) => {
  console.log("000000---2---------0000000000",data)
  ElMessageBox.confirm(
    '是否删除该用户？此操作将无法撤销',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '已删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
const isResetPasswordDialogVisible = ref(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 = ref([{
  tableHeader:[
  {label: '姓名', prop: 'userName'},
  {label: '电话', prop: 'phone'},
  {label: '是否可用', prop: 'isUse'},
  {label: '用户权限', prop: 'userPermission'},
  {label: '创建时间', prop: 'createTime'},
  {label: '更新时间', prop: 'updataTime'},
  {label: '操作', prop: 'Operation'}
],
  tableBody:[
    {userName: '张三',password:"123456", phone: "15736985235",gender:'man' , isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(),remarks:"",Operation:[ {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}]},
    {userName: '李四',password:"123456", phone: "15736985235",gender:'man', isUse: false, userPermission: false, createTime: Date.now(), updataTime: Date.now(), remarks:"",Operation:[ {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}]},
    {userName: '王五',password:"123456", phone: "15736985235",gender:'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(),  remarks:"" ,Operation:[]},
    {userName: '赵六',password:"123456", phone: "15736985235",gender:'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '钱七',password:"123456", phone: "15736985235", gender:'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '孙八',password:"123456", phone: "15736985235", gender:'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '周九',password:"123456", phone: "15736985235", gender:'female' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '张三', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '李四', phone: "15736985235", gender:'male'  ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '王五', phone: "15736985235", gender:'male' ,  isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '赵六', phone: "15736985235", gender:'male' , isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '钱七', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '孙八', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
    {userName: '周九', phone: "15736985235", gender:'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]},
  ]
}
])



// 计算容器样式
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: 100%;
}

/* 通用卡片样式 */
.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 {
    height: 79%;
    /* background-color: #000000; */
    min-width: 200px;
   
}
.card-title{
    height: 5%;
    background-color:#0b07ff;
    border-radius: 8px 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: #606266 1px solid;
}
.content{
    height: 95%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
    overflow: auto;
}

/* 统计卡片样式 */
.stats-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 统计卡片样式 */
.stats-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

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

.card-tabs {
  display: flex;
  border-bottom: 1px solid #292828;
  /* margin-bottom: 1rem; */
  font-size: 1.2rem;
  color: #ffffff;
  background-color: #061872;
  height: 8%;
  border-radius: 8px 8px 0 0;
  align-items: center;
  width: 100%;
  padding: 10px;

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

}
.operation-button {
  width: 15%;

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