<template>
  <div class="homework-review-detail">
    <!-- 顶部区域 -->
    <div class="top-section">
      <!-- 左侧标签页 - 使用 Naive UI Tabs -->
      <div class="tabs-container">
        <n-tabs v-model:value="activeTab" type="line" animated>
          <n-tab-pane name="all" tab="全部" />
          <n-tab-pane name="submitted" tab="已提交" />
          <n-tab-pane name="unsubmitted" tab="未提交" />
        </n-tabs>
      </div>

      <!-- 右侧按钮和搜索 -->
      <div class="actions-container">
                 <n-button class="action-btn export-btn" ghost type="primary" size="small">导出</n-button>
         <n-button class="action-btn remove-btn" ghost type="error" size="small">移除</n-button>
                 <div class="search-container">
           <n-input-group>
             <n-input 
               v-model:value="searchText" 
               placeholder="请输入学生姓名" 
               :style="{ width: '200px' }"
               size="medium"
             />
             <n-button type="primary" size="medium">
               搜索
             </n-button>
           </n-input-group>
         </div>
      </div>
    </div>

    <!-- 数据表格 - 使用 Naive UI Table -->
    <div class="table-container">
      <n-data-table
        :columns="activeTab === 'unsubmitted' ? unsubmittedColumns : columns"
        :data="filteredData"
        :pagination="false"
        :bordered="false"
        :single-line="false"
        size="medium"
        :row-key="(row) => row.id"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  NTabs, 
  NTabPane, 
  NDataTable, 
  NButton, 
  NInput, 
  NInputGroup,
  type DataTableColumns 
} from 'naive-ui'

interface HomeworkSubmission {
  id: number
  name: string
  studentId: string
  submitTime: string
  status: '已批阅' | '待批阅'
  reviewer: string
  reviewTime: string
  selected: boolean
}

const router = useRouter()
const route = useRoute()
const activeTab = ref<'all' | 'submitted' | 'unsubmitted'>('all')
const searchText = ref('')
// const selectAll = ref(false)

// 查看作业详情
const viewHomework = (row: HomeworkSubmission) => {
  router.push(`/teacher/course-editor/${route.params.id}/homework/review/${route.params.homeworkId}/view/${row.studentId}`)
}

// 模拟数据 - 包含已批阅和待批阅的数据
const homeworkData = ref<HomeworkSubmission[]>([
  {
    id: 1,
    name: '陈成',
    studentId: '1826685554',
    submitTime: '2025.07.25 09:20',
    status: '已批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.25 09:20',
    selected: false
  },
  {
    id: 2,
    name: '李华',
    studentId: '1826685555',
    submitTime: '2025.07.25 10:15',
    status: '待批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.25 10:15',
    selected: false
  },
  {
    id: 3,
    name: '张伟',
    studentId: '1826685556',
    submitTime: '2025.07.25 11:30',
    status: '已批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.25 11:30',
    selected: false
  },
  {
    id: 4,
    name: '王芳',
    studentId: '1826685557',
    submitTime: '2025.07.25 14:20',
    status: '待批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.25 14:20',
    selected: false
  },
  {
    id: 5,
    name: '刘强',
    studentId: '1826685558',
    submitTime: '2025.07.25 16:45',
    status: '已批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.25 16:45',
    selected: false
  },
  {
    id: 6,
    name: '赵敏',
    studentId: '1826685559',
    submitTime: '2025.07.26 08:30',
    status: '待批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.26 08:30',
    selected: false
  },
  {
    id: 7,
    name: '孙丽',
    studentId: '1826685560',
    submitTime: '2025.07.26 09:15',
    status: '已批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.26 09:15',
    selected: false
  },
  {
    id: 8,
    name: '周杰',
    studentId: '1826685561',
    submitTime: '2025.07.26 10:45',
    status: '待批阅',
    reviewer: '王建国',
    reviewTime: '2025.07.26 10:45',
    selected: false
  }
])

// 根据标签页和搜索过滤数据
const filteredData = computed(() => {
  let filtered = homeworkData.value

  // 根据标签页过滤
  if (activeTab.value === 'submitted') {
    filtered = filtered.filter((item: HomeworkSubmission) => item.status === '已批阅')
  } else if (activeTab.value === 'unsubmitted') {
    filtered = filtered.filter((item: HomeworkSubmission) => item.status === '待批阅')
  }

  // 根据搜索文本过滤
  if (searchText.value.trim()) {
    filtered = filtered.filter((item: HomeworkSubmission) => 
      item.name.includes(searchText.value.trim())
    )
  }

  return filtered
})

// 定义表格列
const columns: DataTableColumns<HomeworkSubmission> = [
  {
    type: 'selection',
    width: 50,
    fixed: 'left'
  },
  {
    title: '序号',
    key: 'serial',
    width: 60,
    render: (_row: HomeworkSubmission, index: number) => index + 1
  },
  {
    title: '姓名',
    key: 'name',
    width: 100
  },
  {
    title: '学号',
    key: 'studentId',
    width: 120
  },
  {
    title: '提交时间',
    key: 'submitTime',
    width: 150
  },
  {
    title: () => h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4px'
      }
    }, [
      h('span', '状态'),
      h('img', {
        src: '/images/teacher/箭头-黑.png',
        style: {
          width: '10px',
          height: '6px'
        }
      })
    ]),
    key: 'status',
    width: 100,
    render: (_row: HomeworkSubmission) => {
      return h('span', {
        style: {
          color: '#062333',
          fontSize: '14px'
        }
      }, _row.status)
    }
  },
  {
    title: '批阅人',
    key: 'reviewer',
    width: 100
  },
  {
    title: '批阅时间',
    key: 'reviewTime',
    width: 150
  },
  {
    title: '操作',
    key: 'operations',
    width: 200,
    render: (row: HomeworkSubmission) => {
      return h('div', { class: 'operations-container' }, [
        h(NButton, {
          type: 'primary',
          size: 'small',
          ghost: true,
          class: 'operation-btn',
          onClick: () => viewHomework(row)
        }, { default: () => '查看' }),
        row.status === '待批阅' ? h(NButton, {
          type: 'primary',
          size: 'small',
          ghost: true,
          class: 'operation-btn'
        }, { default: () => '批阅' }) : null,
        h(NButton, {
          type: 'error',
          size: 'small',
          ghost: true,
          class: 'operation-btn'
        }, { default: () => '移除' })
      ].filter(Boolean))
    }
  }
]

// 定义未提交标签页的列
const unsubmittedColumns: DataTableColumns<HomeworkSubmission> = [
  {
    type: 'selection',
    width: 50,
    fixed: 'left'
  },
  {
    title: '序号',
    key: 'serial',
    width: 80,
    render: (_row: HomeworkSubmission, index: number) => index + 1
  },
  {
    title: '姓名',
    key: 'name',
    width: 120
  },
  {
    title: '学号',
    key: 'studentId',
    width: 200
  },
  {
    title: '领取时间',
    key: 'reviewTime',
    width: 180
  },
  {
    title: () => h('div', {
      style: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4px'
      }
    }, [
      h('span', '状态'),
      h('img', {
        src: '/images/teacher/箭头-黑.png',
        style: {
          width: '10px',
          height: '6px'
        }
      })
    ]),
    key: 'status',
    width: 120,
    render: (row: HomeworkSubmission) => {
      return h('span', {
        style: {
          color: '#062333',
          fontSize: '14px'
        }
      }, row.status)
    }
  },
  {
    title: '操作',
    key: 'operations',
    width: 140,
    render: (_row: HomeworkSubmission) => {
      return h('div', { class: 'operations-container' }, [
        h(NButton, {
          type: 'primary',
          size: 'small',
          ghost: true,
          class: 'operation-btn'
        }, { default: () => '提醒' }),
        h(NButton, {
          type: 'error',
          size: 'small',
          ghost: true,
          class: 'operation-btn'
        }, { default: () => '移除' })
      ])
    }
  }
 ]


</script>

<style scoped>
.homework-review-detail {
  width: 100%;
  background: #fff;
  min-height: 100vh;
  padding-left: 20px;
}

/* 顶部区域 */
.top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左侧标签页 */
.tabs-container {
  flex: 1;
}

/* 右侧按钮和搜索 */
.actions-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 20px 0 0;
  margin-bottom: 10px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid #E6E6E6;
}

.search-container {
  display: flex;
  align-items: center;
}

/* 表格容器 */
.table-container {
  padding: 20px 30px 30px 10px;
  width: 100%;
}


:deep(.operations-container) {
  display: flex;
  justify-content: center;
  gap: 12px !important;
}

.operation-btn {
  min-width: 60px;
}

/* 自定义 Naive UI 组件样式 */
:deep(.n-tabs-tab) {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  padding: 10px 0 20px 0;
}

/* 搜索按钮样式 */
:deep(.search-container .n-button--primary-type) {
  background: #0288D1 !important;
  border-color: #0288D1 !important;
  color: white !important;
}

:deep(.search-container .n-button--primary-type:hover) {
  background: #0277bd !important;
  border-color: #0277bd !important;
  color: white !important;
}

/* 操作按钮样式 */
:deep(.action-btn) {
  height: 32px !important;
  border-radius: 2px !important;
  padding: 0 14px !important;
}

:deep(.n-tabs-tab--active) {
  color: #5BADD9;
}

:deep(.n-tabs-nav-scroll-content) {
  padding: 20px 0 0 0;
  border-bottom: 1.5px solid #E6E6E6 !important;
}

:deep(.n-tabs-tab--active .n-tabs-tab-pad) {
  border-bottom: 4px solid #0288D1;
}

:deep(.n-data-table) {
  border: 1px solid #e5e5e5;
  border-radius: 2px !important;
}

:deep(.n-data-table .n-data-table-thead th) {
  background: #f8f9fa;
  font-weight: 500;
  color: #062333;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
  padding: 8px 12px !important;
}

:deep(.n-data-table .n-data-table-tbody td) {
  font-size: 14px;
  color: #062333;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
  padding: 8px 12px !important;
}

:deep(.n-data-table .n-data-table-tbody tr:hover) {
  background: #f5f5f5;
}

:deep(.n-tag) {
  font-size: 12px;
  font-weight: 500;
}

:deep(.n-tag--success) {
  background: #5BADD9;
  color: white;
  border: none;
}

:deep(.n-tag--warning) {
  background: #FF9800;
  color: white;
  border: none;
}

:deep(.n-button--primary-type) {
  border-color: #0288D1;
  color: #0288D1;
}

:deep(.n-button--primary-type:hover) {
  background: #0288D1;
  color: white;
}

:deep(.n-button--error-type) {
  border-color: #f44336;
  color: #f44336;
}

:deep(.n-button--error-type:hover) {
  background: #f44336;
  color: white;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .top-section {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  
  .actions-container {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  
  .actions-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .search-container {
    width: 100%;
  }
  
  .search-input {
    width: 100%;
  }
  
  .operations-container {
    flex-direction: column;
    gap: 4px;
  }
  
  .operation-btn {
    width: 100%;
    text-align: center;
  }
}
</style>