<template>
  <div class="app-container training-page">
    <div v-if="!showForm" class="flex gap-4 h-full main-wrapper">
      <!-- 左侧分类侧边栏 -->
      <div class="category-sidebar bg-white rounded p-4 flex flex-col shrink-0">
        <div class="sidebar-header mb-4">
          <span class="font-bold text-base">培训分类</span>
        </div>
        <div class="category-list flex-1 overflow-y-auto">
          <div
            v-for="item in categories"
            :key="item.id"
            :class="['category-item', activeCategory === item.id ? 'active' : '']"
            @click="activeCategory = item.id"
          >
            <div class="flex items-center gap-2 overflow-hidden">
              <el-icon v-if="item.id === 'video'"><i-ep-video-play /></el-icon>
              <el-icon v-else-if="item.id === 'offline'"><i-ep-location /></el-icon>
              <el-icon v-else-if="item.id === 'live'"><i-ep-video-camera /></el-icon>
              <span class="truncate">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧列表内容 -->
      <div class="flex-1 bg-white rounded p-4 flex flex-col overflow-hidden content-area">
        <div class="header-bar flex justify-between items-center mb-4">
          <el-input
            v-model="queryParams.keyword"
            placeholder="请输入"
            style="width: 320px"
            clearable
            class="search-input"
            @keyup.enter="handleQuery"
          >
            <template #append>
              <el-button @click="handleQuery">
                <el-icon><i-ep-search /></el-icon>
              </el-button>
            </template>
          </el-input>

          <el-button type="primary" @click="handleAdd" class="create-btn">创建培训</el-button>
        </div>

        <!-- 视频培训表格 -->
        <el-table
          v-if="activeCategory === 'video'"
          v-loading="loading"
          :data="videoList"
          style="width: 100%"
          header-cell-class-name="custom-header"
          class="custom-table flex-1"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="ID" prop="id" width="80" />
          <el-table-column label="视频名称" min-width="220">
            <template #default="scope">
              <div class="flex items-center">
                <div class="video-thumb mr-3 shrink-0">
                  <img :src="scope.row.thumbnail" alt="" class="w-full h-full object-cover" />
                  <div class="play-overlay">
                    <el-icon><i-ep-video-play /></el-icon>
                  </div>
                </div>
                <el-link type="primary" :underline="false" class="truncate">{{ scope.row.name }}</el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="岗位类型" prop="jobType" width="100" />
          <el-table-column label="岗位等级" prop="jobLevel" width="100" />
          <el-table-column label="学习记录" width="100" align="center">
            <template #default="scope">
              <el-link type="primary" :underline="false" @click="handleData(scope.row)">{{ scope.row.learnCount }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="课程状态" width="100" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="时长" prop="duration" width="100" />
          <el-table-column label="上架时间" prop="publishTime" width="180" />
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="scope">
              <div class="operation-links">
                <el-link type="primary" :underline="false" @click="handleData(scope.row)">数据</el-link>
                <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                <el-link type="primary" :underline="false" @click="handleOffline(scope.row)">下架</el-link>
                <el-link type="primary" :underline="false" class="delete-link" @click="handleDelete(scope.row)">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 线下培训表格 -->
        <el-table
          v-if="activeCategory === 'offline'"
          v-loading="loading"
          :data="offlineList"
          style="width: 100%"
          header-cell-class-name="custom-header"
          class="custom-table flex-1"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="ID" prop="id" width="80" />
          <el-table-column label="培训名称" prop="name" min-width="180" />
          <el-table-column label="岗位类型" prop="jobType" width="120" />
          <el-table-column label="岗位等级" prop="jobLevel" width="100" />
          <el-table-column label="时间" prop="time" min-width="240" />
          <el-table-column label="地点" prop="location" min-width="150" />
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="参与人数" width="100" align="center">
            <template #default="scope">
              <el-link type="primary" :underline="false">{{ scope.row.participantCount }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <div class="operation-links">
                <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                <el-link type="primary" :underline="false" class="delete-link" @click="handleDelete(scope.row)">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 直播培训表格 -->
        <el-table
          v-if="activeCategory === 'live'"
          v-loading="loading"
          :data="liveList"
          style="width: 100%"
          header-cell-class-name="custom-header"
          class="custom-table flex-1"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="培训名称" prop="name" min-width="200" />
          <el-table-column label="岗位类型" prop="jobType" width="150" />
          <el-table-column label="岗位等级" prop="jobLevel" width="120" />
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="scope">
              <div class="operation-links">
                <el-link type="primary" :underline="false" @click="handleCopy(scope.row)">复制测评</el-link>
                <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                <el-link type="primary" :underline="false" class="delete-link" @click="handleDelete(scope.row)">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页栏 -->
        <div class="pagination-wrapper mt-4 flex justify-end items-center">
          <span class="total-text mr-4">共 {{ total }} 条</span>
          <span class="page-size-select mr-4">
            显示
            <el-select v-model="queryParams.pageSize" size="small" style="width: 70px">
              <el-option :label="10" :value="10" />
              <el-option :label="20" :value="20" />
              <el-option :label="50" :value="50" />
            </el-select>
            条
          </span>
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="total"
            background
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 创建/编辑培训表单 -->
    <TrainForm
      v-else-if="showForm"
      :initial-data="currentTrain"
      :type="activeCategory"
      @cancel="showForm = false"
      @submit="handleFormSubmit"
    />

    <!-- 学习数据详情 -->
    <learnData
      v-else-if="showLearnData"
      :train-id="currentTrain?.id"
      :train-name="currentTrain?.name"
      @back="showLearnData = false"
    />
  </div>
</template>

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

const loading = ref(false);
const total = ref(243);
const activeCategory = ref('video');
const showForm = ref(false);
const showLearnData = ref(false);
const currentTrain = ref(null);

const categories = [
  { id: 'video', name: '视频培训', icon: 'VideoPlay' },
  { id: 'offline', name: '线下培训', icon: 'Location' },
  { id: 'live', name: '直播培训', icon: 'VideoCamera' }
];

const queryParams = reactive({
  pageNum: 11,
  pageSize: 10,
  keyword: ''
});

// 视频培训模拟数据
const videoList = ref([
  {
    id: '34234',
    name: '西班牙语0-B2高级直达',
    thumbnail: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=100&h=60&fit=crop',
    jobType: '全职',
    jobLevel: 'A1',
    learnCount: 300,
    status: true,
    duration: '20.34',
    publishTime: '2020/09/08 10:45'
  },
  {
    id: '34234',
    name: '西班牙语0-B2高级直达',
    thumbnail: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=100&h=60&fit=crop',
    jobType: '全职',
    jobLevel: 'A1',
    learnCount: 300,
    status: true,
    duration: '20.34',
    publishTime: '2020/09/08 10:45'
  }
]);

// 线下培训模拟数据
const offlineList = ref([
  {
    id: '34234',
    name: '审计岗位A1',
    jobType: '全职',
    jobLevel: 'A1',
    time: '2025-03-21 10:00——2025-03-22 12:00',
    location: '上海市XXXXX',
    status: true,
    participantCount: 12
  }
]);

// 直播培训模拟数据
const liveList = ref([
  {
    name: '审计岗位A1',
    jobType: '全职',
    jobLevel: 'A1',
    status: true
  }
]);

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

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const handleSizeChange = () => getList();
const handleCurrentChange = () => getList();

const handleAdd = () => {
  currentTrain.value = null;
  showForm.value = true;
};

const handleEdit = (row: any) => {
  currentTrain.value = { ...row };
  showForm.value = true;
};

const handleFormSubmit = (formData: any) => {
  if (currentTrain.value) {
    ElMessage.success('修改成功');
  } else {
    ElMessage.success('创建成功');
  }
  showForm.value = false;
  getList();
};

const handleData = (row: any) => {
  showLearnData.value = true;
  currentTrain.value = row;
};

const handleOffline = (row: any) => {
  ElMessageBox.confirm('确定下架该课程吗？', '提示', { type: 'warning' }).then(() => {
    ElMessage.success('下架成功');
  });
};

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '删除后将无法恢复，确定删除吗？',
    '删除培训',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      buttonSize: 'default'
    }
  ).then(() => {
    ElMessage.success('删除成功');
    getList();
  }).catch(() => {});
};

const handleCopy = (row: any) => {
  ElMessage.success('测评链接已复制');
};

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

<style scoped lang="scss">
.training-page {
  height: calc(100vh - 84px);
  padding: 20px;
  background-color: #f0f2f5;

  .main-wrapper {
    @media (max-width: 992px) {
      flex-direction: column;
      height: auto;
    }
  }

  .category-sidebar {
    width: 240px;
    height: 100%;
    @media (max-width: 992px) {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
    }

    .category-list {
      .category-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        border-radius: 4px;
        margin-bottom: 4px;
        transition: all 0.3s;
        color: #606266;

        &:hover {
          background-color: #f5f7fa;
        }

        &.active {
          background-color: #ecf5ff;
          color: #409eff;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 16px;
            background-color: #409eff;
            border-radius: 0 2px 2px 0;
          }
        }
      }
    }
  }

  .content-area {
    min-width: 0;
  }

  .search-input {
    :deep(.el-input-group__append) {
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
      padding: 0;
      .el-button {
        border: none;
        margin: 0;
        padding: 0 15px;
        color: #fff;
        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }

  .create-btn {
    background-color: #4079ff;
    border-color: #4079ff;
  }

  .video-thumb {
    width: 60px;
    height: 36px;
    background-color: #000;
    border-radius: 2px;
    overflow: hidden;
    position: relative;

    .play-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      color: #fff;
      font-size: 16px;
    }
  }

  :deep(.custom-header th) {
    background-color: #f7f8fa !important;
    color: #4e5969;
    font-weight: 500;
    padding: 12px 0;
    border-bottom: none !important;
  }

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

  .operation-links {
    display: flex;
    gap: 12px;
    
    .delete-link {
      color: #409eff;
      &:hover {
        color: #f56c6c;
      }
    }
  }

  .pagination-wrapper {
    color: #606266;
    font-size: 14px;
    
    .total-text, .page-size-select {
      color: #606266;
    }

    :deep(.el-pagination) {
      --el-pagination-button-bg-color: #fff;
      --el-pagination-hover-color: #409eff;
      
      .el-pager li {
        &.is-active {
          background-color: #ecf5ff !important;
          color: #409eff !important;
          font-weight: bold;
        }
      }
    }
  }
}
</style>


