<template>
  <!-- Agent会话岗位列表组件 — 聊天区域中显示推荐岗位卡片 -->
  <div class="agent-chat-job-list">
    <!-- 推荐说明文字 -->
    <div class="agent-chat-job-list__summary">{{ summary }}</div>

    <!-- 岗位列表（只显示前3个） -->
    <div
      v-for="job in displayJobs"
      :key="job.id"
      class="agent-chat-job-list__item"
      v-if="displayJobs.length>0"
    >
      <!-- 左侧：公司图标 + 岗位信息 -->
      <div class="agent-chat-job-list__info">
        <!-- 公司 Logo -->
        <div class="agent-chat-job-list__logo">
          <img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" :alt="job.companyShortName" />
          <svg v-else viewBox="0 0 24 24" fill="none">
            <path d="M3 21V7l9-4 9 4v14H3z" stroke="currentColor" stroke-width="1.5" />
            <path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="1.5" />
          </svg>
        </div>
        <!-- 岗位详情 -->
        <div class="agent-chat-job-list__detail">
          <div class="agent-chat-job-list__company">{{ job.companyShortName || job.companyName }}</div>
          <div class="agent-chat-job-list__title">{{ job.title }}</div>
          <!-- 标签 -->
          <div class="agent-chat-job-list__tags">
            <span v-if="job.regionName" class="agent-chat-job-list__tag">{{ job.regionName }}</span>
            <span v-if="job.categoryName" class="agent-chat-job-list__tag">{{ job.categoryName }}</span>
            <span v-for="tag in job.tags?.slice(0, 2)" :key="tag" class="agent-chat-job-list__tag">{{ tag }}</span>
          </div>
        </div>
      </div>

      <!-- 右侧：匹配度环形 -->
      <div class="agent-chat-job-list__score">
        <svg class="agent-chat-job-list__ring" viewBox="0 0 44 44">
          <!-- 背景圆环 -->
          <circle cx="22" cy="22" r="18" fill="none" stroke="#E8E8E8" stroke-width="3" />
          <!-- 进度圆环 -->
          <circle
            cx="22" cy="22" r="18" fill="none"
            stroke="#4FC2C9" stroke-width="3"
            stroke-linecap="round"
            :stroke-dasharray="2 * Math.PI * 18"
            :stroke-dashoffset="2 * Math.PI * 18 * (1 - (job.matchScore || 0) / 100)"
            transform="rotate(-90 22 22)"
          />
        </svg>
        <span class="agent-chat-job-list__score-text">{{ job.matchScore || 0 }}%</span>
      </div>
    </div>
    <div class="color-9" v-if="displayJobs.length==0">
      暂无相关职位推荐
    </div>

    <!-- 查看全部岗位按钮 -->
    <div  v-if="displayJobs.length>0" class="agent-chat-job-list__footer">
      <button class="agent-chat-job-list__view-all-btn" @click="handleViewAll">查看全部岗位</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { AgentRecommendJob } from '@/api/agent'

/** 组件 Props */
const props = defineProps<{
  /** 推荐说明文字 */
  summary: string
  /** 完整岗位列表数据 */
  jobs: AgentRecommendJob[]
}>()

/** 事件 */
const emit = defineEmits<{
  /** 点击查看全部岗位 */
  (e: 'viewAll'): void
}>()

/** 只显示前3个岗位 */
const displayJobs = computed(() => props.jobs.slice(0, 3))

/** 点击查看全部岗位 */
function handleViewAll() {
  emit('viewAll')
}
</script>

<style scoped lang="scss">
@use '../assets/styles/components/agent-chat-job-list';
</style>
