<template>
  <section class="extended-query-card">
    <div class="extended-query-header">
      <div class="extended-query-title">拓展查询</div>
      <div class="extended-query-subtitle">在专项核查同范围员工内联查采购、招聘和调动记录</div>
    </div>

    <el-tabs value="purchase" class="extended-query-tabs">
      <el-tab-pane label="采购记录" name="purchase">
        <div class="extended-query-placeholder">采购记录列表区域待接入</div>
      </el-tab-pane>
      <el-tab-pane label="招聘记录" name="recruitment">
        <div class="extended-query-placeholder">招聘记录列表区域待接入</div>
      </el-tab-pane>
      <el-tab-pane label="调动记录" name="transfer">
        <div class="extended-query-placeholder">调动记录列表区域待接入</div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
export default {
  name: "ExtendedQuerySection",
  props: {
    projectId: {
      type: [String, Number],
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.extended-query-card {
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.extended-query-header {
  margin-bottom: 16px;
}

.extended-query-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.extended-query-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.extended-query-placeholder {
  padding: 20px 0;
  color: #64748b;
}
</style>
