<template>
  <div class="tab-content">
    <div class="info-section">
      <div class="section-title" style="display: flex; align-items: center; justify-content: space-between">
        <span>采购信息</span>
        <el-button v-if="!isViewMode" type="primary" icon="Document" @click="emit('save')">保存</el-button>
      </div>

      <el-row :gutter="40" class="form-row">
        <el-col :span="12">
          <div class="form-item">
            <span class="label">产品经理：</span>
            <el-select
              v-model="selectedProductManagerProxy"
              placeholder="请选择产品经理"
              filterable
              clearable
              style="width: 300px"
              :disabled="isViewMode"
            >
              <el-option v-for="item in staffOptions" :key="item.staffId" :label="item.displayText" :value="item.staffId" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span class="label">采购员：</span>
            <el-select v-model="selectedBuyerProxy" placeholder="请选择采购员" filterable clearable style="width: 300px" :disabled="isViewMode">
              <el-option v-for="item in staffOptions" :key="item.staffId" :label="item.displayText" :value="item.staffId" />
            </el-select>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  staffOptions: any[];
  selectedProductManager: number | null;
  selectedBuyer: number | null;
  isViewMode: boolean;
}>();

const emit = defineEmits<{
  (e: 'save'): void;
  (e: 'update:selectedProductManager', value: number | null): void;
  (e: 'update:selectedBuyer', value: number | null): void;
}>();

const selectedProductManagerProxy = computed({
  get: () => props.selectedProductManager,
  set: (value) => emit('update:selectedProductManager', value)
});

const selectedBuyerProxy = computed({
  get: () => props.selectedBuyer,
  set: (value) => emit('update:selectedBuyer', value)
});
</script>
