<template>
  <div class="aside-table-container">
    <div class="aside-header">
      <h3>{{ currentPosition ? currentPosition.title + ' - 问题列表' : '请选择职位' }}</h3>
    </div>
    <fs-crud ref="asideCrudRef" v-bind="crudBinding"></fs-crud>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createAsideCrudOptions } from './crud';
import { ElMessage } from 'element-plus';

const props = defineProps({
  positionId: {
    type: [String, Number],
    default: ''
  },
  currentPosition: {
    type: Object,
    default: () => null
  }
});

const emit = defineEmits(['refresh']);

const { crudBinding, crudRef: asideCrudRef, crudExpose } = useFs({ createCrudOptions: createAsideCrudOptions });

// 监听职位ID变化，刷新问题列表
watch(() => props.positionId, (newVal) => {
  if (newVal) {
    loadQuestions(newVal);
  }
}, { immediate: true });

// 加载问题列表
const loadQuestions = (positionId) => {
  if (!positionId) return;
  
  crudExpose.doSearch({
    form: {
      job_id: positionId
    }
  });
};

// 暴露方法给父组件
defineExpose({
  refresh: () => crudExpose.doRefresh(),
  asideCrudRef
});
</script>

<style lang="scss" scoped>
.aside-table-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aside-header {
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 10px;
}
</style> 