<template>
  <div v-if="org" style="max-width:900px;margin:0 auto">
    <el-card>
      <template #header><h2>{{ org.name }}</h2></template>
      <p>{{ org.description }}</p>
      <div class="company-photo">
        <img src="/images/company-building.png" alt="公司大楼" />
      </div>
      <p>联系邮箱：{{ org.email }}</p>
    </el-card>
    <h3 style="margin-top:24px">在招职位</h3>
    <JobCard v-for="job in jobs" :key="job.id" :job="job" />
    <el-empty v-if="jobs.length === 0" description="暂无在招职位" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getOrganization } from '@/api/organizations'
import { getJobs } from '@/api/jobs'
import JobCard from '@/components/JobCard.vue'

const route = useRoute()
const org = ref(null)
const jobs = ref([])
onMounted(async () => {
  try {
    const [orgRes, jobRes] = await Promise.all([
      getOrganization(route.params.id),
      getJobs({ organization: route.params.id })
    ])
    org.value = orgRes.data
    jobs.value = jobRes.data.results ?? []
  } catch (e) {
    console.error('加载公司详情失败', e)
  }
})
</script>
<style scoped>
.company-photo {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
}
.company-photo img {
  width: 100%;
  display: block;
  border-radius: 8px;
}
</style>
