<template>
  <div class="tab-content">
    <div class="info-section">
      <div class="section-title" style="display: flex; align-items: center; justify-content: space-between;">
        <span class="purchase-title">采购信息</span>
      </div>

      <el-row :gutter="40" class="form-row">
        <el-col :span="12">
          <div class="form-item">
            <span class="label">产品经理：</span>
            <span>{{ productManagerName }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span class="label">采购员：</span>
            <span>{{ buyerName }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

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

const productManagerName = computed(() => {
  const id = props.selectedProductManager;
  const item = props.staffOptions?.find((x: any) => x?.staffId === id);
  return item?.displayText || '';
});

const buyerName = computed(() => {
  const id = props.selectedBuyer;
  const item = props.staffOptions?.find((x: any) => x?.staffId === id);
  return item?.displayText || '';
});
</script>

<style scoped>
.purchase-title {
  color: #409eff;
}
</style>
