<template>
  <div class="table-container">
    <!-- 表格 -->
    <el-table
      :data="curTableShowData[0].tableBody"
      style="width: 100%;height: 100%;"
      fixed
      @load="handleTableLoad"
    >
        <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]"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
              @change="changeStatusFn(scope.row)"
            />
            </div>
            <div v-else-if="items.prop == 'role'">
              <span class="role-tag"  :class="scope.row[items.prop]==='0'|| scope.row[items.prop] ==='10' ? 'admin' : 'inspector'" >
                <span >{{ useAppStoreInstance.position[scope.row[items.prop]]  }}</span>
              </span>
              
            </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 ,staffSetAbleApi} from '../../../api/staff';
import { message } from 'ant-design-vue';
import { pa } from 'element-plus/es/locales.mjs';
import { color } from 'echarts';
import { Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import useAppStore from '../../../store/module/app';


const useAppStoreInstance = useAppStore();
// const value = ref(true);
const props = defineProps(["tableShowData",'Operation'])

const emits = defineEmits(["tableDataRefresh",'getPageCommonAPI'])
const curTableShowData = ref(props.tableShowData)

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

const changeStatusFn = (info) => {
  console.log("changeStatusFn-----------------",info) 
  const submitDate = { 
    "id":info.id,
    "status": info.status?0:1
  }
  console.log("submitDate-----------------",submitDate)
  if (submitDate.id ==='' || submitDate.status ==='') {
    ElMessage.warning('缺少操作的行数据！')
  }else { 
    (staffSetAbleApi(submitDate)) .then(res => { 
      emits('tableDataRefresh')
      ElMessage.success(`${submitDate.status===1?'禁用':'启用'}   操作成功！`)
    }).catch(err => { 
      ElMessage.error("changeStatusFn err",err.message)
    })
  }

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



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

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


const getNewTableData = () => { 
  emits('getPageCommonAPI',{ 
      currentPageNum: currentPage2.value,
      currentPageSize: pageSize2.value,}
  )
  
  // .then(res => { 
  //     if(res.code === 200){
  //       console.log(res.data, '展示数据');
  //       // 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)

  //   })
  // 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>

.role-tag {

  font-weight: 500;
}
.admin {
  background-color: #ecf5ff;
  color: #409eff;
}

/* 巡查员标签 */
.inspector {
  background-color: #f0f9eb;
  color: #67c23a;
}
 .gradient-text {
    background: linear-gradient(90deg, #ff3366, #ffcc00, #33cc33, #3399ff, #cc33ff);
    -webkit-background-clip: text; /* 关键属性 */
    background-clip: text;
    color: transparent; /* 文字透明显露出背景 */
    font-size: 1em;
    font-weight: bold;
  }
/* 容器样式 */
.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>