<template>
  <div>
    <!-- 页面标题 -->
    <div
        class="pt-32 pb-20 bg-gradient-to-r from-indigo-700 to-blue-900"
        data-aos="fade-down"
    >
      <div class="container mx-auto px-4">
        <div class="text-center">
          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">加入我们</h1>
          <p class="text-xl text-blue-300 max-w-2xl mx-auto">
            与优秀团队一起成长，创造改变世界的价值
          </p>
        </div>
      </div>
    </div>

    <!-- 职位列表 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div class="lg:col-span-1">
            <SectionTitle
                title="开放职位"
                subtitle="寻找卓越人才"
                data-aos="fade-right"
            />

            <div
                class="bg-gray-50 rounded-xl p-6 mt-10"
                data-aos="fade-right"
                data-aos-delay="100"
            >
              <h3 class="font-medium text-gray-900 mb-4">职位筛选</h3>
              <div class="space-y-3">
                <div class="flex items-center">
                  <input id="filter-all" type="radio" name="job-type" class="h-4 w-4 text-indigo-600" checked>
                  <label for="filter-all" class="ml-2 text-gray-700">所有职位</label>
                </div>
                <div class="flex items-center">
                  <input id="filter-tech" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
                  <label for="filter-tech" class="ml-2 text-gray-700">技术类</label>
                </div>
                <div class="flex items-center">
                  <input id="filter-product" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
                  <label for="filter-product" class="ml-2 text-gray-700">产品类</label>
                </div>
                <div class="flex items-center">
                  <input id="filter-design" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
                  <label for="filter-design" class="ml-2 text-gray-700">设计类</label>
                </div>
                <div class="flex items-center">
                  <input id="filter-business" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
                  <label for="filter-business" class="ml-2 text-gray-700">市场类</label>
                </div>
              </div>
            </div>

            <div
                class="bg-amber-50 rounded-xl p-6 mt-8"
                data-aos="fade-right"
                data-aos-delay="200"
            >
              <h3 class="font-medium text-gray-900 mb-4">加入我们的优势</h3>
              <ul class="space-y-3">
                <li v-for="(benefit, index) in benefits" :key="index" class="flex items-start">
                  <i class="fas fa-check-circle text-amber-600 mt-1 mr-2"></i>
                  <span class="text-gray-700">{{ benefit }}</span>
                </li>
              </ul>
            </div>

            <!-- 联系方式卡片 -->
            <div
                class="bg-blue-50 rounded-xl p-6 mt-8"
                data-aos="fade-right"
                data-aos-delay="300"
            >
              <h3 class="font-medium text-gray-900 mb-4">联系我们</h3>
              <div class="space-y-3 text-gray-700">
                <div class="flex items-start">
                  <i class="fas fa-phone-alt text-blue-600 mt-1 mr-3"></i>
                  <span>021-34161621</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-envelope text-blue-600 mt-1 mr-3"></i>
                  <span>youbaiwangluo@163.com</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-3"></i>
                  <span>上海市中山西路2020号华宜大厦2号楼1501室</span>
                </div>
              </div>
            </div>
          </div>

          <div class="lg:col-span-2">
            <div
                class="flex items-center justify-between mb-8"
                data-aos="fade-left"
            >
              <h2 class="text-2xl font-bold text-gray-900">
                <span class="text-amber-600">{{ jobs.length }}</span> 个开放职位
              </h2>
              <div class="relative w-64">
                <input
                    type="text"
                    placeholder="搜索职位..."
                    class="w-full pl-10 pr-4 py-2 bg-gray-50 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-transparent"
                >
                <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
              </div>
            </div>

            <div class="space-y-6">
              <div
                  v-for="(job, index) in jobs"
                  :key="index"
                  class="bg-white rounded-xl shadow-sm border border-gray-200 hover:border-indigo-200 hover:shadow-md transition-all duration-300"
                  :data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
                  :data-aos-delay="100 * index"
              >
                <div class="p-6">
                  <div class="flex flex-col md:flex-row justify-between md:items-center">
                    <div>
                      <h3 class="text-xl font-bold text-gray-900">{{ job.title }}</h3>
                      <div class="mt-1 flex flex-wrap gap-2">
                        <span class="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full">{{ job.department }}</span>
                        <span class="text-sm bg-amber-50 text-amber-700 px-3 py-1 rounded-full">{{ job.type }}</span>
                        <span class="text-sm bg-gray-50 text-gray-700 px-3 py-1 rounded-full">{{ job.location }}</span>
                      </div>
                    </div>
                    <button
                        class="mt-4 md:mt-0 px-5 py-2.5 text-white rounded-lg font-medium transition-colors duration-300"
                        :class="job.featured ? 'bg-amber-600 hover:bg-amber-700' : 'bg-indigo-600 hover:bg-indigo-700'"
                    >
                      立即申请
                    </button>
                  </div>

                  <div class="mt-6 flex items-center text-sm text-gray-500">
                    <span>发布日期: {{ job.date }}</span>
                    <span class="mx-2">•</span>
                    <span>{{ job.salary }}</span>
                  </div>
                </div>

                <div class="border-t border-gray-100 px-6 py-4 flex justify-between items-center">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-md bg-indigo-50 flex items-center justify-center text-indigo-600">
                      <i class="fas fa-briefcase"></i>
                    </div>
                    <span class="ml-2 text-sm text-gray-600">{{ job.experience }}经验</span>
                  </div>

                  <a
                      href="#"
                      class="text-indigo-600 hover:text-indigo-800 flex items-center text-sm"
                      @click.prevent="openModal(job)"
                  >
                    查看详情
                    <i class="fas fa-arrow-right ml-1 text-xs"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 招聘流程 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="招聘流程"
            subtitle="透明高效"
            description="我们简化招聘流程，让候选人拥有清晰明确的体验"
            align="center"
            data-aos="fade-up"
        />

        <div class="mt-16">
          <div class="flex justify-center">
            <div class="relative">
              <!-- 流程线 -->
              <div class="absolute top-14 left-0 right-0 h-1 bg-gray-200 mx-auto z-0 w-4/5" style="left: 10%;"></div>

              <div class="grid grid-cols-1 md:grid-cols-5 gap-8 relative z-10">
                <div
                    v-for="(step, index) in recruitmentSteps"
                    :key="index"
                    class="text-center"
                    data-aos="fade-up"
                    :data-aos-delay="index * 100"
                >
                  <div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto text-xl bg-white border-4 border-gray-50 shadow-md mb-4"
                       :class="index === 0 ? 'text-blue-500 border-blue-100' :
                              index === 1 ? 'text-amber-500 border-amber-100' :
                              index === 2 ? 'text-green-500 border-green-100' :
                              index === 3 ? 'text-purple-500 border-purple-100' :
                              'text-indigo-500 border-indigo-100'">
                    <i :class="step.icon"></i>
                  </div>
                  <h3 class="font-bold text-lg text-gray-900">{{ step.title }}</h3>
                  <p class="text-gray-600 text-sm mt-2">{{ step.description }}</p>
                  <div class="text-xs mt-2 font-medium text-gray-500">
                    {{ step.duration }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 员工福利 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="员工福利"
            subtitle="关怀每一位伙伴"
            description="我们为员工提供全方位的福利保障和贴心关怀"
            align="center"
            data-aos="fade-up"
        />

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
          <div
              v-for="(benefit, index) in employeeBenefits"
              :key="index"
              data-aos="fade-up"
              :data-aos-delay="index * 50"
          >
            <Card no-border hover-effect class="h-full">
              <template #icon>
                <div class="w-16 h-16 rounded-lg mx-auto mb-6 flex items-center justify-center text-2xl"
                     :class="benefit.iconBgClass">
                  <i :class="benefit.icon"></i>
                </div>
              </template>
              <h3 class="text-lg font-bold text-center text-gray-900">{{ benefit.title }}</h3>
              <p class="text-center text-gray-600 mt-2">
                {{ benefit.description }}
              </p>
            </Card>
          </div>
        </div>
      </div>
    </section>

    <!-- 校招计划 -->
    <section
        class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white"
        data-aos="fade-up"
    >
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <div class="flex flex-col md:flex-row items-center">
            <div
                class="md:w-2/5 mb-10 md:mb-0"
                data-aos="fade-right"
            >
              <div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-10 rounded-2xl flex items-center justify-center">
                <i class="fas fa-user-graduate text-6xl text-white opacity-40"></i>
              </div>
            </div>

            <div
                class="md:w-3/5 md:pl-12"
                data-aos="fade-left"
            >
              <SectionTitle
                  title="校园招聘计划"
                  subtitle="新生力量"
                  align="left"
                  class="text-white"
              />

              <p class="text-xl text-blue-200 mb-6">
                我们为应届毕业生和在校学生提供专属的职业发展计划
              </p>

              <ul class="space-y-4 mb-8">
                <li
                    v-for="(item, index) in campusPlan"
                    :key="index"
                    class="flex items-start"
                    data-aos="fade-left"
                    :data-aos-delay="index * 50"
                >
                  <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-3">
                    {{ index+1 }}
                  </div>
                  <span class="flex-1">{{ item }}</span>
                </li>
              </ul>

              <router-link
                  to="/campus"
                  class="inline-flex items-center px-6 py-3 bg-white text-indigo-900 rounded-lg font-medium hover:bg-gray-100 transition-colors"
                  data-aos="fade-up"
              >
                了解校招计划
                <i class="fas fa-arrow-right ml-2"></i>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 在模态框的地图部分替换为 -->
    <section
        class="py-16 md:py-24 bg-gray-50"
        data-aos="fade-up"
    >
      <div class="mt-8 container mx-auto px-4">
        <h3 class="text-lg font-bold text-gray-900 mb-3">公司位置</h3>
        <MapContainer
            :lng="121.424"
            :lat="31.197"
            :title="'上海酉佰佰网络信息科技有限公司'"
            :address="'上海市中山西路2020号华宜大厦2号楼1501室'"
        />
      </div>
    </section>


    <!-- 模态框组件 -->
    <transition name="modal-fade">
      <div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 bg-opacity-50 flex items-center justify-center p-4 backdrop-blur-lg ">
        <div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden transform transition-all">
          <!-- 模态框头部 -->
          <div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-6 text-white">
            <div class="flex justify-between items-center">
              <h2 class="text-2xl font-bold">{{ currentJob.title }}</h2>
              <button @click="closeModal" class="text-white hover:text-gray-200">
                <i class="fas fa-times text-xl"></i>
              </button>
            </div>
            <div class="mt-2 flex flex-wrap gap-2">
              <span class="text-sm bg-blue-500 text-white px-3 py-1 rounded-full">{{ currentJob.department }}</span>
              <span class="text-sm bg-amber-500 text-white px-3 py-1 rounded-full">{{ currentJob.type }}</span>
              <span class="text-sm bg-gray-700 text-white px-3 py-1 rounded-full">{{ currentJob.location }}</span>
            </div>
          </div>

          <!-- 模态框内容 -->
          <div class="p-6 max-h-[70vh] overflow-y-auto">
            <!-- 职位详情 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="md:col-span-2">
                <h3 class="text-lg font-bold text-gray-900 mb-3">职位描述</h3>
                <p class="text-gray-700 mb-4">{{ currentJob.description }}</p>

                <h3 class="text-lg font-bold text-gray-900 mb-3">岗位要求</h3>
                <ul class="list-disc pl-5 space-y-2 text-gray-700">
                  <li v-for="(requirement, idx) in currentJob.requirements" :key="idx">{{ requirement }}</li>
                </ul>
              </div>

              <div class="border-l border-gray-200 pl-6">
                <div class="mb-6">
                  <h3 class="text-lg font-bold text-gray-900 mb-3">负责人</h3>
                  <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                      <i class="fas fa-user"></i>
                    </div>
                    <div class="ml-3">
                      <p class="font-medium">{{ currentJob.manager }}</p>
                      <p class="text-sm text-gray-600">{{ currentJob.managerTitle }}</p>
                    </div>
                  </div>
                </div>

                <div class="mb-6">
                  <h3 class="text-lg font-bold text-gray-900 mb-3">联系方式</h3>
                  <div class="space-y-2">
                    <div class="flex items-center">
                      <i class="fas fa-envelope text-indigo-600 mr-2"></i>
                      <a :href="'mailto:' + currentJob.email" class="text-indigo-600 hover:underline">{{ currentJob.email }}</a>
                    </div>
                    <div class="flex items-center">
                      <i class="fas fa-phone-alt text-indigo-600 mr-2"></i>
                      <span>{{ currentJob.phone }}</span>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 class="text-lg font-bold text-gray-900 mb-3">照片要求</h3>
                  <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-700">{{ currentJob.photoRequirement }}</p>
                  </div>
                </div>
              </div>
            </div>

<!--            &lt;!&ndash; 地图容器 &ndash;&gt;-->
<!--            <div class="mt-8">-->
<!--              <h3 class="text-lg font-bold text-gray-900 mb-3">公司位置</h3>-->
<!--              <div id="job-map-container" class="h-64 rounded-xl overflow-hidden border border-gray-200"></div>-->
<!--            </div>-->
          </div>

          <!-- 模态框底部 -->
          <div class="bg-gray-50 px-6 py-4 flex justify-end">
            <button
                @click="closeModal"
                class="px-5 py-2 text-gray-700 rounded-lg font-medium border border-gray-300 mr-3 hover:bg-gray-100"
            >
              关闭
            </button>
            <button
                class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
            >
              立即申请
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import SectionTitle from '@/components/ui/SectionTitle.vue'
import Card from '@/components/ui/Card.vue'
import {nextTick, onMounted, ref} from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import MapContainer from "@/components/ui/MapContainer.vue";

// // 初始化AOS
// onMounted(() => {
//   AOS.init({
//     duration: 800,
//     offset: 100,
//     easing: 'ease-in-out',
//     once: true
//   })
//
// })

const position = {
  lng: 121.424,
  lat: 31.197,
  title: '上海酉佰佰网络信息科技有限公司',
  address: '上海市中山西路2020号华宜大厦2号楼1501室'
}

const benefits = [
  '富有竞争力的薪资待遇',
  '全面的福利保障体系',
  '灵活的工作时间和地点',
  '专业的职业发展支持',
  '多元包容的企业文化',
  '丰厚的绩效奖金和股票期权'
]

const recruitmentSteps = [
  {
    icon: 'fas fa-file-alt',
    title: '提交申请',
    description: '在线提交您的简历',
    duration: '1-3个工作日'
  },
  {
    icon: 'fas fa-phone-alt',
    title: '简历评估',
    description: 'HR电话初步沟通',
    duration: '2-4个工作日'
  },
  {
    icon: 'fas fa-laptop-code',
    title: '技术面试',
    description: '专业能力技术评估',
    duration: '1-2次面试'
  },
  {
    icon: 'fas fa-user-friends',
    title: '经理面试',
    description: '团队文化和价值观评估',
    duration: '1次面试'
  },
  {
    icon: 'fas fa-award',
    title: '录用通知',
    description: '发放正式录用offer',
    duration: '1-2个工作日'
  }
]

const employeeBenefits = [
  {
    title: '薪酬福利',
    icon: 'fas fa-money-bill-wave',
    description: '有竞争力的薪资及绩效奖金',
    iconBgClass: 'bg-green-100 text-green-600'
  },
  {
    title: '五险一金',
    icon: 'fas fa-shield-alt',
    description: '全面的社会保障和住房公积金',
    iconBgClass: 'bg-blue-100 text-blue-600'
  },
  {
    title: '带薪休假',
    icon: 'fas fa-umbrella-beach',
    description: '灵活的年假、病假及各类假期',
    iconBgClass: 'bg-amber-100 text-amber-600'
  },
  {
    title: '健康关怀',
    icon: 'fas fa-heartbeat',
    description: '年度体检及补充商业保险',
    iconBgClass: 'bg-red-100 text-red-600'
  },
  {
    title: '学习发展',
    icon: 'fas fa-graduation-cap',
    description: '专业培训与个人发展基金',
    iconBgClass: 'bg-purple-100 text-purple-600'
  },
  {
    title: '弹性工作',
    icon: 'fas fa-laptop-house',
    description: '灵活工作时间及远程办公选项',
    iconBgClass: 'bg-indigo-100 text-indigo-600'
  },
  {
    title: '团队活动',
    icon: 'fas fa-users',
    description: '丰富多彩的团队建设活动',
    iconBgClass: 'bg-pink-100 text-pink-600'
  },
  {
    title: '节日福利',
    icon: 'fas fa-gift',
    description: '节日礼品及员工关怀礼包',
    iconBgClass: 'bg-yellow-100 text-yellow-600'
  }
]

const campusPlan = [
  '面向应届毕业生的专项培养计划',
  '技术大牛导师一对一指导',
  '轮岗实践了解公司业务',
  '快速成长通道和晋升机会',
  '应届生专属落户支持',
  '人才公寓或住房补贴'
]

// 模态框控制
const showModal = ref(false)
const currentJob = ref({})

// 打开模态框
const openModal = (job) => {
  currentJob.value = job
  showModal.value = true
  // 初始化地图
  nextTick(() => {
    // initMap()
  })
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
  // 销毁地图实例
  if (window.mapInstance) {
    window.mapInstance.destroy()
    window.mapInstance = null
  }
}

// 初始化地图
function initMap() {
  // 确保地图容器存在
  const container = document.getElementById('job-map-container')
  if (!container) return

  // 检查是否已加载高德地图API
  if (!window.AMap) {
    console.error('高德地图API未加载')
    return
  }

  // 销毁旧地图实例
  if (window.mapInstance) {
    window.mapInstance.destroy()
  }

  // 创建新地图实例
  window.mapInstance = new AMap.Map('job-map-container', {
    zoom: 16,
    center: [121.424, 31.197], // 公司位置坐标
    viewMode: '3D'
  })

  // 添加标记
  new AMap.Marker({
    position: [121.424, 31.197],
    map: window.mapInstance,
    title: '上海酉佰佰网络信息科技有限公司'
  })

  // 添加信息窗口
  const infoWindow = new AMap.InfoWindow({
    content: `<div class="p-2">
      <h4 class="font-bold">上海酉佰佰</h4>
      <p class="text-sm">上海市中山西路2020号华宜大厦2号楼1501室</p>
    </div>`,
    offset: new AMap.Pixel(0, -30)
  })

  infoWindow.open(window.mapInstance, [121.424, 31.197])
}

// 更新职位数据，添加详细信息
const jobs = ref([
  {
    title: '高级前端开发工程师',
    department: '技术部',
    type: '全职',
    location: '上海',
    date: '2023-07-10',
    salary: '25K-45K',
    experience: '5年以上',
    featured: true,
    // 新增字段
    description: '负责公司核心产品的前端架构设计与开发，优化用户体验和前端性能，与产品、设计团队紧密合作实现产品需求。',
    requirements: [
      '精通Vue.js框架及其生态系统',
      '熟悉前端工程化、模块化开发',
      '有大型项目架构设计经验',
      '良好的团队协作和沟通能力',
      '计算机相关专业本科以上学历'
    ],
    manager: '张经理',
    managerTitle: '技术总监',
    email: 'tech@shyoubai.com',
    phone: '021-34161621',
    photoRequirement: '请提供近期免冠证件照（白底）和生活照各一张，尺寸为2寸，文件大小不超过5MB。'
  },
  {
    title: '行业研究员',
    department: '研究部',
    type: '全职',
    location: '上海',
    date: '2023-07-15',
    salary: '20K-35K',
    experience: '3年以上',
    featured: true,
    // 新增字段
    description: '负责行业研究分析，定期撰写研究报告，建立研究框架和数据库，进行模拟交易和投资策略研究。',
    requirements: [
      '硕士及以上学历，经济、金融、理工类专业',
      '具备证券/基金/期货从业资格优先',
      '熟悉资本市场和投资分析方法',
      '优秀的逻辑思维和分析能力',
      '良好的数据敏感度和研究能力'
    ],
    manager: '王总监',
    managerTitle: '研究部负责人',
    email: 'research@shyoubai.com',
    phone: '021-34161622',
    photoRequirement: '请提供近期免冠证件照（蓝底）和全身职业照各一张，尺寸为2寸，文件大小不超过5MB。'
  },
  // 其他职位类似添加...
])
</script>

<style scoped>
/* 校招计划中的SectionTitle需要调整文字颜色 */
.text-white ::v-deep .section-title {
  color: white;
}

.text-white ::v-deep .section-subtitle {
  color: #93c5fd;
}

.text-white ::v-deep .section-divider {
  background: rgba(255,255,255,0.3);
}

/* 地图容器样式 */
#map-container {
  min-height: 400px;
  background-color: #f0f4f8;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23e5e7eb"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23d1d5db" stroke-width="1"/></svg>');
  background-size: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-weight: 500;
}

/* 模态框动画 */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

/* 地图容器样式 */
#job-map-container {
  min-height: 256px;
}
</style>
