<template>
  <div class="app-container learn-data-page bg-white p-6 rounded">
    <div class="header-bar flex justify-between items-center mb-6">
      <div class="flex items-center">
        <el-button link @click="handleBack" class="mr-4">
          <el-icon><i-ep-arrow-left /></el-icon>
          返回
        </el-button>
        <span class="font-bold text-lg">学习数据</span>
      </div>
      <el-button type="primary" plain @click="handleExport">批量导出</el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      header-cell-class-name="custom-header"
      class="custom-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="用户信息" min-width="200">
        <template #default="scope">
          <div class="flex items-center">
            <el-avatar :size="32" :src="scope.row.avatar" class="mr-3" />
            <div class="user-info">
              <div class="name font-medium text-blue-500 cursor-pointer">{{ scope.row.name }}</div>
              <div class="mobile text-gray-400 text-xs">{{ scope.row.mobile }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="已学习时长 (h)" prop="learnedTime" width="150" align="center" />
      <el-table-column label="剩余时长 (h)" prop="remainingTime" width="150" align="center" />
      <el-table-column label="学习进度" min-width="200">
        <template #default="scope">
          <div class="flex items-center gap-3">
            <el-progress :percentage="scope.row.progress" :stroke-width="8" color="#67c23a" class="flex-1" />
            <span class="text-xs text-gray-400">{{ scope.row.progress }}%</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" prop="finishTime" width="180" align="center" />
      <el-table-column label="上次学习时间" prop="lastLearnTime" width="180" align="center" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper mt-6 flex justify-between items-center text-gray-500 text-sm">
      <div class="flex-1">共 {{ total }} 条记录 第 {{ queryParams.pageNum }} / {{ Math.ceil(total / queryParams.pageSize) }} 页</div>
      <div class="flex items-center">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          background
          layout="prev, pager, next, sizes"
          :page-sizes="[10, 20, 50, 100]"
          class="mr-4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div class="flex items-center gap-2">
          <span>跳至</span>
          <el-input v-model="jumpPage" size="small" style="width: 50px" @keyup.enter="handleJump" />
          <span>页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps<{
  trainId?: string | number;
  trainName?: string;
}>();

const emit = defineEmits(['back']);

const loading = ref(false);
const total = ref(400);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
});

const jumpPage = ref(1);

const tableData = ref([
  {
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    name: '王冕',
    mobile: '18854789000',
    learnedTime: '400h',
    remainingTime: '400h',
    progress: 50,
    finishTime: '2020/09/08 10:45',
    lastLearnTime: '2020/09/08 10:45'
  },
  {
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    name: '王冕',
    mobile: '18854789000',
    learnedTime: '400h',
    remainingTime: '400h',
    progress: 50,
    finishTime: '2020/09/08 10:45',
    lastLearnTime: '2020/09/08 10:45'
  },
  {
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    name: '王冕',
    mobile: '18854789000',
    learnedTime: '400h',
    remainingTime: '400h',
    progress: 50,
    finishTime: '2020/09/08 10:45',
    lastLearnTime: '2020/09/08 10:45'
  }
]);

const handleBack = () => {
  emit('back');
};

const handleJump = () => {
  queryParams.pageNum = Number(jumpPage.value);
  getList();
};

const handleExport = () => {
  ElMessage.success('导出成功');
};

const handleSelectionChange = (selection: any) => {
  console.log(selection);
};

const handleSizeChange = () => {
  getList();
};

const handleCurrentChange = () => {
  getList();
};

const getList = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 300);
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.learn-data-page {
  min-height: calc(100vh - 84px);
  
  :deep(.custom-header th) {
    background-color: #f7f8fa !important;
    color: #4e5969;
    font-weight: 500;
    padding: 12px 0;
  }

  .custom-table {
    :deep(.el-table__inner-wrapper::before) {
      display: none;
    }
  }

  :deep(.el-progress-bar__outer) {
    background-color: #f2f3f5;
  }

  .pagination-wrapper {
    :deep(.el-pagination) {
      .el-select .el-input {
        width: 100px;
      }
    }
  }
}
</style>
