<template>
  <div class="backcheck-container">
    <el-container class="h-full">
      <!-- 左侧分类侧边栏 -->
      <el-aside width="200px" class="bg-white mr-4 h-full sidebar">
        <div class="sidebar-title">背调分类</div>
        <el-menu :default-active="activeMenu" class="border-none mt-2" @select="handleMenuSelect">
          <el-menu-item v-for="c in categories" :key="c.id" :index="c.id" :class="{ 'menu-item-active': c.id === activeMenu }">
            <template #title>
              <el-icon>
                <component :is="c.icon" />
              </el-icon>
              <span>{{ c.name }} ({{ c.count }})</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧主体内容 -->
      <el-main class="bg-white h-full main-content p-0 flex flex-col">
        <!-- 搜索与头部区域 -->
        <div class="header-section flex justify-between items-center px-4 py-4 shrink-0">
          <div class="flex items-center">
             <el-input v-model="queryParams.keyword" placeholder="请输入单位名称" style="width: 300px" clearable @keyup.enter="handleQuery">
                <template #append>
                   <el-button type="primary" :icon="Search" class="bg-blue-500 text-white search-btn" @click="handleQuery"></el-button>
                </template>
             </el-input>
          </div>
          
          <div>
            <el-button type="primary" class="create-btn" @click="handleCreate">创建条款</el-button>
          </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-section flex-1 overflow-auto px-4">
          <el-table :data="filteredTableData" style="width: 100%" @selection-change="handleSelectionChange" header-cell-class-name="custom-header">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="companyName" label="下单企业" min-width="150" align="center" />
            <el-table-column label="候选人" min-width="120" align="center">
              <template #default="scope">
                <el-link type="primary" :underline="false" class="font-bold" @click="goCandidateList(scope.row)">
                  {{ scope.row.candidateCount }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="120" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已完成' ? 'success' : scope.row.status === '未完成' ? 'warning' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
        <el-table-column label="下单金额" min-width="150" align="center">
          <template #default="scope">
            <span class="amount-text">￥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
            <el-table-column label="操作" width="160" align="center" fixed="right">
              <template #default="scope">
                <el-link type="primary" :underline="false" style="font-size: 13px" class="mx-2" @click="handleAction(scope.row, 'view')">
                  {{ scope.row.status === '未完成' ? '起做' : '查看' }}
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-wrapper flex justify-end px-4 py-4 shrink-0">
           <el-pagination background layout="total, sizes, prev, pager, next" :total="243" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';

const router = useRouter();
const queryParams = reactive({ keyword: '' });
const activeMenu = ref('1');

const categories = ref([
  { id: '1', name: '新人职场版', count: 123, icon: 'i-ep-operation' },
  { id: '2', name: '基层员工版', count: 33, icon: 'i-ep-document' },
  { id: '3', name: '中层员工版', count: 33, icon: 'i-ep-document' },
  { id: '4', name: '自定义条款', count: 33, icon: 'i-ep-document' }
]);

const tableData = ref([
  {
    id: 1,
    categoryId: '1',
    companyName: 'XXXX公司',
    candidateCount: 5,
    status: '已完成',
    amount: '11'
  },
  {
    id: 2,
    categoryId: '2',
    companyName: 'XXXX公司',
    candidateCount: 5,
    status: '未完成',
    amount: '22'
  },
  {
    id: 3,
    categoryId: '3',
    companyName: 'XXXX公司',
    candidateCount: 5,
    status: '失败',
    amount: '33'
  }
]);

const filteredTableData = computed(() => {
  const kw = queryParams.keyword?.trim();
  return tableData.value.filter((r: any) => {
    const okCategory = r.categoryId === activeMenu.value;
    if (!kw) return okCategory;
    return okCategory && String(r.companyName || '').includes(kw);
  });
});

const handleSelectionChange = () => {};

const handleMenuSelect = (key: string) => {
  activeMenu.value = key;
};

// 点击“候选人”数字，前往候选人详情列表
const goCandidateList = (row: any) => {
  router.push({ path: '/system/backcheck/candidate-list', query: { id: row.id } });
};

// 搜索
const handleQuery = () => {
  console.log('搜索单位:', queryParams.keyword);
};

// 创建条款
const handleCreate = () => {
  router.push('/system/backclause/index');
};

// 点击操作列（起做、查看）
const handleAction = (row: any, type: string) => {
  goCandidateList(row);
};
</script>

<style scoped lang="scss">
.backcheck-container {
  padding: 20px;
  background-color: #f0f2f5;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}

.sidebar {
  height: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  .sidebar-title {
    padding: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .el-menu {
    flex: 1;
    overflow-y: auto;
  }
  .menu-item-active {
    background-color: #ecf5ff;
    color: #409eff;
    border-right: 2px solid #409eff;
  }
}

.main-content {
  border-radius: 4px;
  height: 100%;
  overflow: hidden;
}

.header-section {
  background-color: #fff;
  border-bottom: 1px solid #f2f3f5;
  .search-btn {
    border-radius: 0 4px 4px 0;
  }
  .create-btn {
    background-color: #409eff;
  }
}

.table-section {
  background-color: #fff;
  padding: 0 16px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  :deep(.el-table) {
    flex: 1;
    .el-table__inner-wrapper {
      height: 100% !important;
    }
  }
}

.amount-text {
  font-weight: 600;
  color: #ff4d4f;
}

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

.pagination-wrapper {
  background-color: #fff;
  border-top: 1px solid #f2f3f5;
  padding: 12px 16px;
}
</style>
