<template>
    <div class="join">
        <default-navbar :navbarList="navbarList">
            <template slot="bg-content">
                <div class="bg-content">
                    <h3>加入我们 <span>JOIN US</span></h3>
                </div>
            </template>
        </default-navbar>
        <div class="join-content">
            <div class="join-content-wrapper">
                <div class="join-top-wrapper">
                    <div class="title-icon-wrapper">
                        <div class="title-icon" v-for="item in iconList">
                            <i class="iconfont"
                               :class="item.icon"
                               style="font-size: 50px; color: #e4004f;
                           display: block; text-align: center;
                           height: 60px; margin: 0 auto;">
                            </i>
                            <span class="title-span">{{item.text}}</span>
                        </div>
                    </div>
                    <div class="activity_wrap">
                        <div class="activity-item">
                            <div class="item long image">
                                <img src="https://file.funcheergame.com/office/image/pic_01.png" alt="" width="480px" height="240px">
                                <div class="triangle-left"></div>
                            </div>
                            <div class="item short text">
                                <h1>户外活动</h1>
                                <h2>OUTDOOR ACTIVITIES</h2>
                            </div>
                            <div class="item short image">
                                <img src="https://file.funcheergame.com/office/image/pic_02.png" alt="" width="240px" height="240px">
                                <div class="triangle-left"></div>
                            </div>
                            <div class="item short text red">
                                <h1>员工生日</h1>
                                <h2>EMPLOYEE BIRTHDAY</h2>
                            </div>

                        </div>
                        <div class="activity-item">
                            <div class="item short image">
                                <img src="https://file.funcheergame.com/office/image/pic_03.png" alt="" width="240px" height="240px">
                                <div class="triangle-left"></div>
                            </div>
                            <div class="item short text red">
                                <h1>节日礼金</h1>
                                <h2>HOLIDAY GIFT</h2>
                            </div>
                            <div class="item long image">
                                <img src="https://file.funcheergame.com/office/image/pic_04.png" alt="" width="480px" height="240px">
                                <div class="triangle-left"></div>
                            </div>
                            <div class="item short text">
                                <h1>部门聚餐</h1>
                                <h2>DEPARTMENT DINNER</h2>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="recruitment-content-wrapper">
                <div class="recruitment-content">
                    <h1 class="recruitment-title">
                        在线招聘
                    </h1>
                    <h2 class="recruitment-title-second">
                        ONLINE RECRUITMENT
                    </h2>
                    <div class="recruitment-content-list">
                        <el-popover
                                style="background-color: #eee;"
                                v-for="item in recruitmentList"
                                placement="top"
                                width="248"
                                :trigger="item.url ? 'manual' : 'click'"
                                v-model="item.visible">
                            <div class="message-content">
                                <div class="contact-way" >
                                    <h2>{{hr.message}}</h2>
                                    <div class="contact-way-wrapper first" v-if="hr.email && hr.email!==''">
                                        <div class="icon">
                                            <i class="iconfont iconyoujian" style="font-size: 12px"></i>
                                        </div>
                                        <div class="contact-way-content">
                                            <a :href="'mailto:'+hr.email"
                                               class="email">{{hr.email}}</a>
                                        </div>
                                    </div>
                                    <div class="contact-way-wrapper second" v-if="hr.phone && hr.phone!==''">
                                        <div class="icon">
                                            <i class="iconfont iconzuoji" style="font-size: 12px"></i>
                                        </div>
                                        <div class="contact-way-content">
                                            {{hr.phone}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="recruitment-item"
                                 slot="reference"
                                 @click="handleRecruitmentClick(item)"
                            >
                                <div class="title-wrapper">
                                    <div class="title">{{item.post}}</div>
                                    <div class="expedited"></div>
                                </div>
                                <div class="bottom">
                                    <div class="desc">
                                        {{item.desc}}
                                    </div>
                                    <div class="location">
                                        {{item.location}}
                                    </div>
                                </div>
                            </div>
                        </el-popover>

                    </div>
                </div>

            </div>

        </div>
        <page-footer></page-footer>
    </div>
</template>

<script>
  import PageFooter from '@/components/footer/pageFooter'
  import DefaultNavbar from '@/components/navbar/navbar'
  import { asyncRouterMap } from '@/config/router.config'

  export default {
    name: 'join',
    data() {
      return {
        navbarList: [],
        hr:{
          email:'hr@funcheergame.com',phone:'0755-23590084',message:'请联系HR'
        },
        iconList: [
          { icon: { 'icontianqiyusanfanghuxianxing': true }, text: '五险一金' },
          { icon: { 'iconjiankang': true }, text: '健康体检' },
          { icon: { 'icon0045': true }, text: '户外活动' },
          { icon: { 'iconzhongcanting': true }, text: '部门聚餐' },
          { icon: { 'iconbirthday': true }, text: '员工生日' },
          { icon: { 'iconhongbao2': true }, text: '节日礼金' },
        ],
        recruitmentList: [
          {
            visible: false,
            url: 'https://www.zhipin.com/job_detail/6aae8a5f99c0dde003d40tm7E1Y~.html',
            post: '小游戏研发工程师',
            desc: '研发技术部',
            location: '深圳宝安中心'
          },
          {
            visible: false,
            url: 'https://www.zhipin.com/job_detail/64165d8efb29ec6d0nd429m7EVc~.html?ka=search_list_5',
            post: 'UI设计师',
            desc: '设计部',
            location: '深圳宝安中心'
          },
          {
            visible: false,
            url: 'https://www.zhipin.com/job_detail/1fd76ededbe239d31n162d28E1I~.html?ka=search_list_6',
            post: '手游产品引入',
            desc: '市场部',
            location: '深圳宝安中心'
          },
          {
            visible: false,
            url: 'https://www.zhipin.com/job_detail/a2a797879071ed410ndz3N26E1o~.html?ka=search_list_13',
            post: '新媒体运营',
            desc: '运营部',
            location: '深圳宝安中心'
          },
          {
            visible: false,
            url: 'https://www.zhipin.com/job_detail/9beba3e2d2df5c9b0nd92Ny8FFU~.html?ka=search_list_8',
            post: '游戏客服',
            desc: '运营部',
            location: '深圳宝安中心'
          },
          { visible: false,url: '', post: '3D建模设计师', desc: '设计部', location: '深圳宝安中心' },
          { visible: false,url: '', post: '2D动效师', desc: '设计部', location: '深圳宝安中心' },
          { visible: false,url: '', post: '广告优化师', desc: '市场部', location: '深圳宝安中心' },
          { visible: false,url: '', post: '广告投放专员', desc: '市场部', location: '深圳宝安中心' },
        ],
      }
    },
    components: {
      DefaultNavbar,
      PageFooter
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.navbarList.push(...asyncRouterMap.filter(f => !f.meta.hidden))
      },
      handleRecruitmentClick(item) {
        if (item.url) {
          window.open(item.url)
        }
      },
    }
  }
</script>

<style lang="less" scoped>
    @import url('./join.less');
</style>
