<template>
  <PageShell>
    <div class="page-two">
      <div class="toolbar">
        <div class="search-box">
          <el-input v-model="keyword" placeholder="请输入" clearable @keyup.enter="handleQuery" />
          <el-button type="primary" class="search-button" @click="handleQuery">
            <el-icon><Search /></el-icon>
          </el-button>
        </div>
      </div>

      <el-table :data="pagedList" class="result-table" header-row-class-name="result-table-header">
        <el-table-column label="测评名称" prop="name" min-width="160" />
        <el-table-column label="岗位类型" prop="postType" min-width="120" align="center" />
        <el-table-column label="岗位等级" prop="postLevel" min-width="120" align="center" />
        <el-table-column label="状态" min-width="140" align="center">
          <template #default="{ row }">
            <span class="status-text">
              <span class="status-dot" :class="`is-${row.statusType}`"></span>
              {{ row.statusText }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center">
          <template #default="{ row }">
            <el-button v-if="row.actionText" link type="primary">{{ row.actionText }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-footer">
        <div class="table-total">共 243 条</div>
        <pagination v-model:page="pageNum" v-model:limit="pageSize" :total="243" />
      </div>
    </div>
  </PageShell>
</template>

<script setup name="TestPageTwo" lang="ts">
import { computed, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import PageShell from '@/components/PageShell/index.vue';

type ResultRow = {
  id: number;
  name: string;
  postType: string;
  postLevel: string;
  statusText: string;
  statusType: 'success' | 'danger' | 'warning' | 'info';
  actionText: string;
};

const keyword = ref('');
const pageNum = ref(11);
const pageSize = ref(10);
const sourceList = ref<ResultRow[]>([
  { id: 1, name: '审计岗位A1', postType: '全职', postLevel: 'A1', statusText: '通过', statusType: 'success', actionText: '' },
  { id: 2, name: '审计岗位A1', postType: '兼职', postLevel: 'A1', statusText: '未通过', statusType: 'danger', actionText: '' },
  { id: 3, name: '审计岗位A1', postType: '实习', postLevel: 'A1', statusText: '待评分', statusType: 'warning', actionText: '' },
  { id: 4, name: '审计岗位A1', postType: '', postLevel: '', statusText: '待测评', statusType: 'info', actionText: '开始测评' }
]);

const filteredList = computed(() => {
  const value = keyword.value.trim();
  if (!value) {
    return sourceList.value;
  }
  return sourceList.value.filter((item) => [item.name, item.postType, item.postLevel, item.statusText].some((field) => field.includes(value)));
});

const pagedList = computed(() => filteredList.value.slice(0, pageSize.value));

const handleQuery = () => {
  pageNum.value = 1;
};
</script>

<style scoped lang="scss">
.page-two {
  min-height: calc(100vh - 150px);
  background: #fff;
  border-radius: 6px;
  padding: 14px 18px 18px;
}

.toolbar {
  margin-bottom: 14px;
}

.search-box {
  display: flex;
  align-items: stretch;
  width: 248px;
}

.search-box :deep(.el-input__wrapper) {
  border-radius: 4px 0 0 4px;
}

.search-button {
  width: 32px;
  padding: 0;
  border-radius: 0 4px 4px 0;
}

.result-table :deep(.result-table-header th) {
  background: #f7f8fa;
  color: #606266;
  font-weight: 500;
}

.status-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c0c4cc;
}

.status-dot.is-success {
  background: #67c23a;
}

.status-dot.is-danger {
  background: #f56c6c;
}

.status-dot.is-warning {
  background: #e6a23c;
}

.status-dot.is-info {
  background: #909399;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 18px;
}

.table-total {
  color: #606266;
  font-size: 13px;
}
</style>
