<!--
 * @Date: 2024-10-18 13:45:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-12-09 13:41:12
 * @FilePath: /hager/src/views/recruit.vue
 * @Description: 招聘信息
-->
<template>
  <div class="hager-recruit-page">
    <div :class="['top-img', is_xs ? 'xs' : '']"></div>
    <hager-box v-if="!is_xs">
      <div class="select-btn-box">
        <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
        <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
        <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
      </div>
    </hager-box>
    <div v-else class="select-btn-box xs" style="padding: 1rem;">
      <el-row :gutter="10">
        <el-col :span="8">
          <div @click="onClickBtn(0)" :class="['btn xs', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
        </el-col>
        <el-col :span="8">
          <div @click="onClickBtn(1)" :class="['btn xs', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
        </el-col>
        <el-col :span="8">
          <div @click="onClickBtn(2)" :class="['btn xs', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
        </el-col>
      </el-row>
    </div>
    <div v-if="active_idx === 0">
      <hager-box v-if="!is_xs">
        <el-row>
          <el-col :span="8">
            <div class="recruit-box-wrapper">
              <div class="recruit-box">
                <div class="title">
                  <p class="c">热招岗位</p>
                  <p class="e">Hot Job</p>
                </div>
                <div class="introduce" v-clamp="7">在海格工作，意味着通过让人们的生活更安全、更清洁、更愉快来塑造明天的电气世界。海格善于寻找激发创造力的人，了解能源管理一切的人，确切知道如何让智能家居真正智能的人......所有人齐心协力解决未来的挑战。也许你就是我们其中一员！</div>
                </div>
                <div @click="goToJob" class="goto-btn">点击查看热门岗位</div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="recruit-img"></div>
          </el-col>
        </el-row>
      </hager-box>
      <div v-else>
        <div class="recruit-img xs"></div>
        <div class="recruit-box-wrapper">
          <div class="recruit-box">
            <div class="title">
              <p class="c">热招岗位</p>
              <p class="e">Hot Job</p>
            </div>
            <div class="introduce" v-clamp="7">在海格工作，意味着通过让人们的生活更安全、更清洁、更愉快来塑造明天的电气世界。海格善于寻找激发创造力的人，了解能源管理一切的人，确切知道如何让智能家居真正智能的人......所有人齐心协力解决未来的挑战。也许你就是我们其中一员！</div>
            </div>
            <div @click="goToJob" class="goto-btn">点击查看热门岗位</div>
        </div>
      </div>
      <hager-box class="box-n">
        <div style="margin-top: 2rem;">
          <swiper ref="mySwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
            <swiper-slide v-for="(item, index) in recruit_list" :key="index">
              <div class="recruit-wrapper">
                <div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
                <div class="text-box">
                  <div class="title">{{ item.title }}</div>
                  <div class="sub">{{ item.sub }}</div>
                  <div class="content" v-clamp="3">{{ item.content }}</div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div v-if="recruit_list.length > designSlidesPerView || (is_xs && recruit_list.length > 2)" class="xs-control">
            <div>
              <i :class="['el-icon-arrow-left', activeDesignIndex === 0 ? 'disabled' : '']"@click="prevDesignBtn()"></i>&nbsp;
              <i :class="['el-icon-arrow-right', reach_design_end ? 'disabled' : '']" @click="nextDesignBtn()"></i>
            </div>
          </div>
        </div>
      </hager-box>
      <hager-box class="job-img-wrapper">
        <div :class="['job-text', is_xs ? 'xs' : '']">
          <p style="margin-bottom: 0.5rem;">全国多地热招同步开启</p>
          <p>转发给身边小伙伴，快来投递简历吧!</p>
        </div>
        <div :class="['job-img-box', 'email', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
          <div>简历投递邮箱:hr.communication@hager.com</div>
        </div>
        <div :class="['job-img-box', 'job', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)', height: recruit_box_height }">
          <p>经理职位 8000元</p>
          <p>高级工程师/主管 6000元</p>
          <p>工程师/专员 5000元</p>
        </div>
      </hager-box>
    </div>
    <div v-if="active_idx === 1">
      <hager-box>
        <div v-for="(item, index) in awards_list" :key="index">
          <hager-h1 :title="item.zh" :sub="item.en" style="margin: 0 0 1rem;"></hager-h1>
          <el-row :gutter="30" style="margin-bottom: 2rem;" v-for="(row, idx) in item.rows" :key="idx">
            <el-col :span="is_xs ? 24 : 8" v-for="(x, i) in row" :key="i">
              <div :class="['employer-award', is_xs ? 'xs' : '']">
                <div class="award-box">
                  <div class="award-img" :style="{backgroundImage: 'url('+ x.img +')'}"></div>
                </div>
                <div class="award-title">{{ x.title }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </hager-box>
    </div>
    <div v-if="active_idx === 2">
      <hager-box v-if="!is_xs">
        <el-row v-for="(item, index) in culture_list" :key="index" style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 10px; margin-bottom: 3rem;">
          <el-col :span="12">
            <div v-if="index % 2 === 0" class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
            <div v-else class="corporate-culture-box">
              <div class="title" style="margin-top: 2rem;">
                <p class="c">{{ item.zh }}</p>
                <p class="e">{{ item.en }}</p>
              </div>
              <div class="introduce" style="line-height: 2;">
                <p style="margin-bottom: 1rem;" v-html="item.text"></p>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div v-if="index % 2 === 0" class="corporate-culture-box">
              <div class="title" style="margin-top: 2rem;">
                <p class="c">{{ item.zh }}</p>
                <p class="e">{{ item.en }}</p>
              </div>
              <div class="introduce" style="line-height: 2;">
                <p style="margin-bottom: 1rem;" v-html="item.text"></p>
              </div>
            </div>
            <div v-else class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
          </el-col>
        </el-row>
      </hager-box>
      <div v-if="is_xs" v-for="(item, index) in culture_list" :key="index" style="padding: 1rem;">
        <div class="corporate-culture-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
        <div class="corporate-culture-box xs">
          <div class="title" style="margin-top: 2rem;">
            <p class="c">{{ item.zh }}</p>
            <p class="e">{{ item.en }}</p>
          </div>
          <div class="introduce" style="line-height: 2;">
            <p style="margin-bottom: 1rem;" v-html="item.text"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerLoadMore from '@/components/hagerLoadMore.vue';
import $ from 'jquery';

export default {
  components: { hagerH1, hagerBox, hagerLoadMore },
  mixins: [mixin.init],
  data () {
    return {
      active_idx: 0,
      awards_list: [{
        id: '1',
        zh: '海格集团雇主奖项',
        en: 'Hager Group Employer Awards',
        rows: [
          [{
            title: 'Kununu最受推荐雇主',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z03.png'
          }, {
            title: 'glassdoor最佳雇主',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z04.png'
          }, {
            title: 'Capital法国最佳雇主',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z05.png'
          }],
          [{
            title: 'Stern最佳雇主 电子电气工程类别',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z06.png'
          }, {
            title: 'Focus最佳雇主 电气技术类别',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z07.png'
          }, {
            title: 'Happyindex最受实习生喜爱雇主',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z08.png'
          }]
        ]
      }, {
        id: '2',
        zh: 'Hi!海格大学所获奖项',
        en: 'Hi！Hager University Award',
        rows: [
          [{
            title: '最佳新型企业大学 金奖',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z09.png'
          }, {
            title: 'U-Spring 金奖',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z10.png'
          }, {
            title: '布兰登霍尔HCM卓越奖 金奖',
            img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z11.png'
          }],
        ]
      }],
      culture_list: [{
        id: '1',
        img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z12@2x.png',
        zh: '以人为本的企业',
        en: 'People-Oriented',
        text: '海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。'
      }, {
        id: '2',
        img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z13@2x.png',
        zh: '构建未来电气世界',
        en: 'Vision',
        text: '作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。'
      }, {
        id: '3',
        img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z14.png',
        zh: '人与企业共同成长',
        en: 'Grow Together',
        text: '海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/> <span>HI！海格大学</span>帮助员工学习职业技能，让员工获得职场成长。'
      }],
      recruit_list: [{
        cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r02@2x.png',
        title: '灵活性',
        sub: 'Flexibility',
        content: '我们的员工拥有专业的的技能和特长，可以高质量地完成工作；我们的员工具备卓越的专业度和灵活性，能为特殊的需求寻找解决方案。'
      }, {
        cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r03@2x.png',
        title: '健康与福祉',
        sub: 'Health and Wellbeing',
        content: '我们不断制定措施，以满足团队在安全领域的需求，并符合当地规范。海格集团有许多培训和锻炼的机会，让员工与海格共同成长。'
      }, {
        cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r04@2x.png',
        title: '工作与生活平衡',
        sub: 'Work-Life Balance',
        content: '工作之余我们拥有美好的生活，在海格集团，我们致力于让员工实现工作与生活之间的平衡。'
      }],
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 20,
        preventClicks : true,
        slideToClickedSlide: false,
        touchRatio: 0,
        breakpoints: {
          1480: {
            slidesPerView: 3,
            spaceBetween: 30
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 20
          },
          320: {
            slidesPerView: 1,
            spaceBetween: 10
          },
          160: {
            slidesPerView: 1,
            spaceBetween: 0
          }
        }
      },
      activeDesignIndex: 0,
      reach_design_end: false,
      designSlidesPerView: 3,
      recruit_box_height: '10rem'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.mySwiper.$swiper?.on('breakpoint', (swiper) => {
        // breakpoint时 显示的条数
        this.designSlidesPerView = swiper.slidesPerView
      });
      // 高度监听
      if (!this.is_xs) {
        this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.1 + 'px';
      } else {
        this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.15 + 'px';
      }
      // 动态计算图片高度
      let img_box_width = $('.img-box').outerWidth();
      $('.img-box').css('height', img_box_width * 0.56 + 'px');
    });
    window.addEventListener('resize', this.handleHeightResize);
  },
  beforeDestroy() {
    // 在组件销毁前移除监听器，防止内存泄漏
    window.removeEventListener('resize', this.handleHeightResize);
  },
  methods: {
    handleHeightResize () {
      // 高度监听
      if (!this.is_xs) {
        this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.1 + 'px';
      } else {
        this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.15 + 'px';
      }
      // 动态计算图片高度
      let img_box_width = $('.img-box').outerWidth();
      $('.img-box').css('height', img_box_width * 0.56 + 'px')
    },
    onClickBtn (idx) {
      this.active_idx = idx;
    },
    prevDesignBtn () {
      this.$refs.mySwiper.$swiper.slidePrev();
    },
    nextDesignBtn () {
      this.$refs.mySwiper.$swiper.slideNext();
    },
    onSlideChange () {
      this.activeDesignIndex = this.$refs.mySwiper.$swiper.activeIndex;
      const isEnd = this.$refs.mySwiper.$swiper.isEnd;

      if (isEnd) {
        this.reach_design_end = true;
      } else {
        this.reach_design_end = false;
      }
    },
    goToJob () {
      // 跳转链接
      window.open('https://jobs.51job.com/huizhou-zkq/co175578.html?timestamp__1258=eqmxg70QG%3Di%3DqBKD%3DD%2FD0iw5EROoei4D&alichlgref=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D9qYmYUHyj8fMunFcJyYJ1dfi7')
      return;
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-recruit-page {
    .top-img {
      height: 25rem;
      background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner07.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      &.xs {
        height: 12rem;
      }
    }

    .select-btn-box {
      margin: 2rem 0;
      &.xs {
        margin-top: 0;
        margin-bottom: 0;
      }
      .btn {
        width: 8rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        display: inline-block;
        padding: 0.5rem 0;
        margin-right: 1rem;
        &.xs {
          width: 100%;
        }
        &.active {
          background-color: @primary-color;
          color: #fff;
          font-weight: bold;
        }
        &.normal {
          background-color: #F3F3F3;
          color: @text-color;
          font-weight: none;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }

    .job-img-wrapper {
      margin: 1rem 0 3rem;
      .job-text {
        font-size: 1.15rem;
        text-align: center;
        margin: 1rem 0;
        &.xs {
          font-size: 1rem;
          margin-top: 0;
        }
      }
    }

    .job-box {
      background: #FFFFFF;
      box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09);
      border-radius: 5px;
      margin-bottom: 2rem;
      transition: transform 0.3s ease-in-out;
      &:hover {
        cursor: pointer;
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }
      .job-title {
        color: @secondary-color;
        font-weight: bold;
      }

      .job-location-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .job-location {
          margin-right: 1rem;
        }
      }

    }

    .job-img-box {
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
      font-size: 0.95rem;
      font-weight: bold;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      &.email {
        padding: 1rem 2rem;
        height: 3rem;
        margin: 2rem 3rem;
        font-size: 1.25rem;
        &.xs {
          height: 2rem;
          font-size: 0.9rem;
          padding: 1rem 0;
          margin: 1rem 0;
          text-shadow: 0px 1px 6px #D25F10;
        }
      }
      &.job {
        padding: 1rem 2rem;
        height: auto;
        flex-direction: column;
        font-size: 1.25rem;
        p {
          line-height: 1.75;
        }
        &.xs {
          height: 4rem;
          font-size: 0.9rem;
          padding: 1rem 0;
          margin-top: 2rem;
        }
      }
    }

    .employer-award {
      // height: 20rem;
      border: 1px solid #D6D6D6;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      &.xs {
        margin-bottom: 1rem;
      }
      .award-box {
        // padding: 1rem;
        // border-bottom: 0;
        .award-img {
          width: 100%;
          height: 13rem;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
      .award-title {
        background-color: #E3F1F7;
        color: @secondary-color;
        font-weight: bold;
        text-align: center;
        padding: 1rem;
      }
    }

    .corporate-culture-img {
      width: 100%;
      height: 23rem;
      background-repeat: no-repeat;
      background-size: cover;
      // background-position: center;
      border-radius: 8px;
      &.xs {
        height: 15rem;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }
    .corporate-culture-box {
      background-color: #FFF;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 22rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      border-radius: 10px;
      &.xs {
        background-color: #F7F7F7;
      }
      .title {
        font-weight: bold;
        .c {
          font-size: 2rem;
          color: @secondary-color;
        }
        .e {
          font-size: 1.5rem;
          color: @primary-color;
        }
      }
      .introduce {
        line-height: 1.75;
        margin-top: 1rem;
        span {
          color: @primary-color;
        }
      }
    }

    .recruit-img {
      width: 100%;
      height: 30rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('https://cdn.ipadbiz.cn/hager/img/tiny/r01@2x.png');
      &.xs {
        height: 15rem;
        margin-top: 1rem;
      }
    }
    .recruit-box-wrapper {
      background-color: #F7F7F7;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 30rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      &.xs {
        height: auto;
        padding: 2rem;
        background-color: #FFF;
      }
      .recruit-box {
        // top: 30%;
        // transform: translateY(30%);
        margin-top: 2rem;
        &.xs {
          transform: none;
        }
      }
      .title {
        font-weight: bold;
        .c {
          font-size: 2rem;
          color: @secondary-color;
          &.xs {
            font-size: 1.5rem;
          }
        }
        .e {
          font-size: 1.5rem;
          color: @primary-color;
          &.xs {
            font-size: 1.1rem;
          }
        }
      }
      .introduce {
        line-height: 1.75;
        margin-top: 1rem;
      }
      .goto-btn {
        background-color: #F56400;
        color: #fff;
        text-align: center;
        padding: 1.25rem 0;
        font-weight: bold;
        margin-top: 1rem;
        transition: background-color .25s ease-in-out;
        &:hover {
          background-color: #ff8f33;
          cursor: pointer;
        }
      }
    }

    .recruit-wrapper {
      // border: 1px solid #eee;
      .img-box {
        width: 100%;
        height: 15rem; /* 根据需要设置高度 */
        background-size: 100% 100%; /* 强制背景图填满整个容器 */
        background-position: center;
        background-repeat: no-repeat; /* 防止图片重复 */
      }
      .text-box {
        padding: 1rem;
        height: 10rem;
        background-color: #F7F7F7;
        .title {
          color: @secondary-color;
          font-weight: bold;
          font-size: 1.25rem;
        }
        .sub {
          color: @primary-color;
          font-weight: bold;
          margin: 0.5rem 0;
        }
        .content {
          line-height: 1.7;
        }
      }
    }

    .xs-control {
      display: flex;
      justify-content: flex-end;
      margin-top: 1rem;
      i {
        font-size: 1.35rem;
        color: #EE6D10;
        &:hover {
          cursor: pointer;
        }
        &.disabled {
          color: #ccc;
        }
      }
    }
  }
</style>