<template>
  <div class="job-card-wrapper">
    <el-card class="job-card" shadow="hover" @click="$router.push(`/jobs/${job.id}`)">
      <el-button
        class="share-btn"
        type="primary"
        text
        @click.stop="shareJob"
        :icon="Share"
      />
      <div class="job-title">{{ job.title }}</div>
      <div class="job-meta">
        <span>{{ job.company_name || job.organization_name }}</span>
        <el-divider direction="vertical" />
        <span>{{ job.location }}</span>
        <el-divider direction="vertical" />
        <span class="salary">{{ job.salary }}</span>
      </div>
      <div class="job-footer">
        <el-tag size="small">{{ job.category }}</el-tag>
        <span class="publish-time">{{ formatDate(job.created_at) }}</span>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { Share } from '@element-plus/icons-vue'

const props = defineProps({ job: Object })

function formatDate(dateStr) {
  if (!dateStr) return ''
  return dateStr.slice(0, 10)
}

function shareJob() {
  // 生成职位详情页链接
  const jobUrl = `${window.location.origin}/jobs/${props.job.id}`

  // 复制到剪贴板
  navigator.clipboard.writeText(jobUrl).then(() => {
    ElMessage.success('已复制职位链接')
  }).catch(() => {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = jobUrl
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('已复制职位链接')
  })
}
</script>
<style scoped>
.job-card-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.job-card {
  cursor: pointer;
  position: relative;
}

.job-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.job-meta {
  color: #666;
  font-size: 13px;
  margin-bottom: 12px;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.publish-time {
  color: #999;
  font-size: 12px;
}

.salary {
  color: #f56c6c;
  font-weight: 500;
}

.share-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}
</style>
