<template>
  <div class="table-container">
    <!-- 表格 -->
    <el-table
      :data="curTableShowData[0].tableBody"
      style="width: 100%;height: 100%;"
    >
        <template v-for="(items, index) in curTableShowData[0].tableHeader" :key="index">
          
          <el-table-column
              :label="items.label"
              align="center"
              header-align="center"
              :width="`&{items.label==='操作'?'140px':'10' }`"
          >
          <template #default="scope" >
        
            <div v-if="Array.isArray(scope.row[items.prop]) && scope.row[items.prop].length > 0">
              <div class="button-group">
                
                <el-button 
                  v-for="(value, idx) in scope.row[items.prop]" 
                  :key="idx" 
                  @click="handleButtonClick(value, scope.row)"
                >
                  {{ value.label }}
                </el-button>
              </div>
            </div>
            <!-- <div v-else-if=" scope.row[items.prop].length == 0">
          
            </div> -->
            <div v-else-if="items.prop == 'status'">
              <el-switch
                v-model="scope.row[items.prop]"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
              />
        
            </div>
            <div v-else-if="items.prop == 'role'">
              
              <el-button 
                type="primary" 
                round  
                :style="{
                  backgroundColor: scope.row[items.prop] ==='0' ? '#67C23A' : '#F56C6C'  // 0→绿色（管理员），1→红色（巡查人员）
                }"
              >
                {{ scope.row[items.prop] === "0" ? "管理员" : "巡查人员" }}  <!-- 文本逻辑不变 -->
              </el-button>
            </div>
          
            <div v-else>
              {{ scope.row[items.prop] }}
            </div>
          

          </template>
          </el-table-column>
        </template>
    </el-table>

    <!-- 分页区域（固定在右下角） -->
    <div class="card-tabs-footer" >
      <div class="pagination-block">
        <span class="page-text">每页显示</span>
        <el-pagination
          v-model:current-page="currentPage2"
          v-model:page-size="pageSize2"
          :page-sizes="[10, 50, 100]"
          size="small"
          background
          layout="sizes, prev, pager, next"
          :total="curTableShowData[0].total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRef } from 'vue';
import { staffGetPageInfoApi } from '../../../api/staff';
import { message } from 'ant-design-vue';
import { pa } from 'element-plus/es/locales.mjs';


const props = defineProps(["tableShowData",'Operation'])


const curTableShowData = ref(props.tableShowData)

console.log("11111111111111111111111props.tableShowData-----------------",props.Operation)
// 分页数据
const currentPage2 = ref(1)
const pageSize2 = ref(10)

// 处理按钮点击事件
const handleButtonClick = (value, row) => {
  // console.log('点击了按钮:', value)
  console.log('行数据:', row)
  value.click( row)
  // emit(value.click, value, row)
 
}



// 分页事件处理
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  getNewTableData()
};

const handleCurrentChange = (val) => {
  console.log(`当前页 ${val} 条`);
  getNewTableData()
};


const getNewTableData = () => { 
  staffGetPageInfoApi({
    "currentPageNum": currentPage2.value,
    "currentPageSize": pageSize2.value,

  }).then(res => { 
      if(res.code === 200){
        
        let tempData = res.data.list
        // console.log(props.Operation,"--11111111111111111111111---*****---999555555555555999999----")
        curTableShowData.value[0].tableBody = []
        //获取未逻辑删除的数据
        tempData = tempData.filter(element => {
          return element.isDeleted === 0;
        });
 
        tempData.forEach(element => { 
            element.Operation = [...props.Operation]
          
          });
        curTableShowData.value[0].tableBody = tempData
       
        curTableShowData.value[0].total = res.data.total
        curTableShowData.value[0].pageSize = res.data.pageSize
          console.log(curTableShowData.value, '展示数据');

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

    })

};
</script>

<style scoped>
/* 容器样式 */
.table-container {
  position: relative; /* 为分页定位提供基准 */
  width: 100%;
  height: 100%;
  /* padding-top: 60px; 预留操作栏空间 */
  padding-bottom: 60px; /* 预留分页区域空间 */
}



.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* 分页区域固定在右下角 */
.card-tabs-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 15px;
  width: auto; /* 自适应宽度 */
}

/* 分页内部 Flex 布局 */
.pagination-block {
  display: flex; /* 核心：启用 Flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 文本与分页间距 */
}

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

/* 穿透修改 Element Plus 分页样式 */
:deep(.el-pagination) {
  display: flex; /* 确保分页组件水平排列 */
  align-items: center;
  margin: 0; /* 清除默认外边距 */
}

/* 表格行样式（全局样式需放在 scoped 外或使用 ::v-deep） */
:deep(.el-table .warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

:deep(.el-table .success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>