<template>
  <div class="occupation-content">
    <div class="mian-title">{{ $t('home.service.career') }}</div>
    <div class="mian">
      <tab :data="tabList" @tabChangeIndex="tabChangeIndex" />
      <div class="occupation-content-mian">
        <template v-if="showModule === 0">
          <div class="module-0 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_01.png'"
              class="banner" />
            <div class="content-mian" style="padding-bottom: 0">
              <img
                :src="
                  isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_02.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_02.png'
                " />
              <div class="module-title" style="margin-bottom: 15px">{{ isEn ? '招生对象' : '招生对象' }}</div>
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_03.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_03.png'"
                style="margin-bottom: 35px" />
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_04.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_04.png'"
                style="margin-bottom: 15px" />
              <div class="module-title" style="margin-bottom: 15px">{{ isEn ? '注册报名' : '注册报名' }}</div>
              <presence />
              <div class="module-title" style="margin-bottom: 15px">{{ isEn ? '项目收获' : '项目收获' }}</div>
              <div class="project-harvest">
                <div class="title">战胜三“难”：<span>找工作、评绩效、求升职</span></div>
                <div class="content">
                  <div class="m1">
                    <ul>
                      <li class="item1">
                        <p>老板与HR们的考量基石<br />——<span>能力素质模型</span></p>
                        <div>哈佛大学教授<br />David McClelland提出</div>
                      </li>
                      <li :class="{ item: true, active: count % 3 === 1 }">
                        <div class="top">
                          <p>专业能力</p>
                          <span>Profession Competencies</span>
                        </div>
                        <div class="bottom">
                          <p>特定角色和工作所需要的特<br />殊的技能，针对岗位设定<br />（如程序员的编程能力）</p>
                        </div>
                      </li>
                      <li :class="{ item: true, active: count % 3 === 2 }">
                        <div class="top">
                          <p>核心能力</p>
                          <span>Core Attributes</span>
                        </div>
                        <div class="bottom">
                          <p>每一位员工都必须具备的能力</p>
                          <div class="list">
                            <span>务实</span>
                            <span>创新</span>
                            <span>自律</span>
                          </div>
                        </div>
                      </li>
                      <li :class="{ item: true, active: count % 3 === 0 }">
                        <div class="top">
                          <p>通用能力</p>
                          <span>Shared Capabilities</span>
                        </div>
                        <div class="bottom">
                          <p>适用于多个角色的基本素质</p>
                          <div class="list">
                            <span>沟通交流</span>
                            <span>分析思维</span>
                            <span>人际关系</span>
                            <span>领导能力</span>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <p class="tips">——要<span>专业</span>，更要<span> “通用能力” </span>与<span> “核心能力” </span></p>
                  </div>
                  <img
                    :src="
                      isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_05.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_05.png'
                    "
                    style="margin-bottom: 35px" />
                  <img
                    :src="
                      isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_06.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_06.png'
                    "
                    style="margin-bottom: 35px" />
                  <img
                    :src="
                      isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_07.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_07.png'
                    "
                    style="margin-bottom: 35px" />
                </div>
              </div>
            </div>
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_08.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_08.png'"
              style="width: 100%" />
            <div class="content-mian">
              <div class="module-title">{{ isEn ? 'Course Settings' : '课程设置' }}</div>
              <div class="course-set">
                <div>
                  <h5>{{ isEn ? '商业基础补充' : '商业基础补充' }}</h5>
                  <p>{{ isEn ? '《经济学原理》' : '《经济学原理》' }}</p>
                  <p>{{ isEn ? '《金融市场学》' : '《金融市场学》' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '管理思维训练' : '管理思维训练' }}</h5>
                  <p>{{ isEn ? '《财务分析》' : '《财务分析》' }}</p>
                  <p>{{ isEn ? '《运营管理》' : '《运营管理》' }}</p>
                  <p>{{ isEn ? '《营销管理与数字化营销》' : '《营销管理与数字化营销》' }}</p>
                </div>
                <div>
                  <h5>{{ isEn ? '领导能力提升' : '领导能力提升' }}</h5>
                  <p>{{ isEn ? '《管理沟通》' : '《管理沟通》' }}</p>
                  <p>{{ isEn ? '《组织行为与领导力》' : '《组织行为与领导力》' }}</p>
                  <p>{{ isEn ? '《战略管理》' : '《战略管理》' }}</p>
                </div>
              </div>
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_10.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_10.png'"
                style="margin-bottom: 35px" />
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'"
                style="margin-bottom: 20px" />
              <div class="module-title" style="margin-bottom: 15px">{{ isEn ? '注册报名' : '注册报名' }}</div>
              <presence />
            </div>
          </div>
        </template>
        <template v-if="showModule === 1">
          <div class="module-1 module-content-box">
            <img
              :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_01.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_01.png'"
              class="banner" />
            <div class="content-mian">
              <img
                :src="
                  isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_02.png?v=111' : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_02.png?v=111'
                "
                class="img1" />
              <img v-if="isEn" src="https://webapp-pub.ezijing.com/www/pc/occupation/occupation3.png" />
              <div class="module-title">{{ isEn ? '新职业标准研发' : '新职业标准研发' }}</div>
              <div class="module-sub-title">
                <span>{{ isEn ? '关注领域' : '关注领域' }}</span>
              </div>
              <swiper-com />
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_03.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_03.png'"
                class="img3" />
              <div class="module-sub-title">
                <span>{{ isEn ? '合作领域' : '合作领域' }}</span>
              </div>
              <div class="card-list">
                <div :class="{ item: true, active: count % 6 === 1 }">
                  <img v-show="count % 6 !== 1" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_01.png" />
                  <img v-show="count % 6 === 1" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_01_on.png" />
                  <p>新职业标准研究</p>
                </div>
                <div :class="{ item: true, active: count % 6 === 2 }">
                  <img v-show="count % 6 !== 2" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_02.png" />
                  <img v-show="count % 6 === 2" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_02_on.png" />
                  <p>新职业培训课程体系研究</p>
                </div>
                <div :class="{ item: true, active: count % 6 === 3 }">
                  <img v-show="count % 6 !== 3" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_03.png" />
                  <img v-show="count % 6 === 3" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_03_on.png" />
                  <p>新职业培训教材编写</p>
                </div>
                <div :class="{ item: true, active: count % 6 === 4 }">
                  <img v-show="count % 6 !== 4" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_04.png" />
                  <img v-show="count % 6 === 4" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_04_on.png" />
                  <p>职业鉴定质量管理体系研究</p>
                </div>
                <div :class="{ item: true, active: count % 6 === 5 }">
                  <img v-show="count % 6 !== 5" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_05.png" />
                  <img v-show="count % 6 === 5" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_05_on.png" />
                  <p>职业考评系统研究</p>
                </div>
                <div :class="{ item: true, active: count % 6 === 0 }">
                  <img v-show="count % 6 !== 0" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_06.png" />
                  <img v-show="count % 6 === 0" src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_06_on.png" />
                  <p>新职业培训课程体系研究</p>
                </div>
              </div>
              <div class="module-title">{{ isEn ? '社会考核评价组织' : '社会考核评价组织' }}</div>
              <div class="module-sub-title">
                <span>{{ isEn ? '职业技能鉴定' : '职业技能鉴定' }}</span>
              </div>
              <ul class="img-text">
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_01.png" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Digital Marketing of Financial Products' : '金融产品数字化营销' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_02.png" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Internet-based Marketing Operator' : '互联网营销师' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_03.png" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Digital Marketing Specialist' : '数字化营销师' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_04.png" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Omni-media Operation Staff' : '全媒体运营师' }}
                    </div>
                  </div>
                </li>
              </ul>
              <!-- <img src="https://webapp-pub.ezijing.com/www/pc/occ-i5.png"  class="img5" /> -->
              <img
                :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_04.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_04.png'"
                class="img3" />
              <div style="position: relative">
                <img
                  :src="isEn ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_05.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_05.png'"
                  class="img3" />
                <p style="position: absolute; left: 50px; bottom: 60px; color: #fff">“金融行业推荐信” 与 “实习推荐”</p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import tab from '../../components/services/tab'
import presence from '../../components/services/presence'
import swiperCom from '../../components/services/swiperCom'
export default {
  components: { tab, presence, swiperCom },
  data() {
    const _this = this
    return {
      module2: {
        list: [
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb1.jpg', text: '数字化营销' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb2.jpg', text: '数字化运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb3.jpg', text: '智能投顾' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb4.jpg', text: '风险管理' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb5.jpg', text: '金融数据分析' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb6.jpg', text: '财务会计' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb7.jpg', text: '金融建模' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb8.jpg', text: '投资分析' }
        ]
      },
      module3: {
        list: [
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb1.jpg', text: '数字化运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2.jpg', text: '广告策划' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb3.jpg', text: '媒体公共' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb4.jpg', text: '营销策划' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb5.jpg', text: '渠道管理' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb6.jpg', text: '品牌管理运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb7.jpg', text: '产品设计' }
        ],
        list2: [
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-1.jpg', text: '互联网运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-2.jpg', text: '新媒体运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-3.jpg', text: '网站运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-4.jpg', text: '电商运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-5.jpg', text: '活动策划运营' }
        ]
      },
      tabList: [
        {
          // 未来管理者项目
          name: this.isEn ? 'FUTURE MANAGES PROJECT' : '未来管理者项目'
        },
        {
          // 未来管理者项目
          name: this.isEn ? '新职业' : '新职业'
        }
      ],
      showModule: 0,
      isEn: false,
      listData: [],
      cardListActive: 1,
      count: 1
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
    const timer1 = setInterval(() => {
      this.count++
    }, 3000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer1)
    })
  },
  methods: {
    tabChangeIndex(n) {
      this.showModule = n
    }
  },
  computed: {
    m1SetStyle() {
      return url => {
        return `background: url(${url});background-size: 100% 100%`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.occupation-content {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;
  .mian {
    display: flex;
    justify-content: space-between;
  }
  .mian-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 100%;
    color: #aa1941;
    padding: 48px 0 31px;
  }
  .occupation-content-mian {
    width: 1000px;
    .module-content-box {
      background: #fff;
      .banner {
        width: 100%;
        height: 320px;
        display: block;
      }
      .module-title {
        font-size: 22px;
        font-weight: 500;
        line-height: 34px;
        color: #424242;
      }
      .module-sub-title {
        span {
          display: inline-block;
          font-size: 20px;
          line-height: 36px;
          color: #424242;
          border-bottom: 1px solid #aa1941;
          margin-top: 20px;
        }
      }
      .content-mian {
        padding: 60px 50px 65px;
        .card-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          margin-top: 20px;
          .item {
            width: 280px;
            height: 130px;
            background: #f4f4f4;
            opacity: 1;
            border-radius: 5px;
            text-align: center;
            padding: 27px 0 0;
            border-bottom: #f4f4f4 5px solid;
            margin-bottom: 20px;
            cursor: pointer;
            img {
              width: 40px;
              height: 43px;
              display: inline-block;
            }
            p {
              line-height: 60px;
            }
          }
          .item.active {
            border-color: #aa1941;
          }
        }
        img {
          width: 100%;
          display: block;
        }
        .module-title {
          font-size: 22px;
          font-weight: 500;
          line-height: 34px;
          color: #424242;
        }
        .course-set {
          display: flex;
          justify-content: space-between;
          margin: 36px 0 40px;
          div {
            width: 31%;
            border-top: 8px solid #f9f8f8;
            background: #f9f8f8;
            text-align: center;
            height: 220px;
            box-sizing: border-box;
            cursor: pointer;
            h5 {
              line-height: 60px;
              font-size: 18px;
              color: #aa1941;
            }
            p {
              line-height: 34px;
              color: #424242;
            }
          }
          div:hover {
            border-color: #aa1941;
            background: #fff;
            box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
          }
        }
      }
    }
    .module-0 {
      .content-mian {
        .project-harvest {
          .title {
            font-size: 20px;
            span {
              color: #aa1941;
            }
          }
          .content {
            background: #f7f7f7;
            padding: 20px 0 20px;
            margin-top: 20px;
            .m1 {
              margin: 0 35px 20px 20px;
              ul {
                display: flex;
                justify-content: space-between;
                padding-bottom: 30px;
                li {
                  width: 210px;
                  height: 268px;
                }
                li.item {
                  background: #fff;
                  border-radius: 10px;
                  transition: 0.5s;
                  .top {
                    border-bottom: 1px solid #e5e5e5;
                    padding: 16px 10px;
                    p {
                      font-size: 14px;
                    }
                    span {
                      color: #777;
                    }
                  }
                  .bottom {
                    padding: 40px 10px 0;
                    color: #666;
                    .list {
                      display: flex;
                      flex-wrap: wrap;
                      margin-top: 20px;
                      span {
                        width: 70px;
                        padding-left: 10px;
                        position: relative;
                        margin-right: 10px;
                      }
                      span:after {
                        position: absolute;
                        left: 2px;
                        top: 8px;
                        content: '';
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #aa1941;
                      }
                    }
                  }
                }
                li.item.active {
                  background: #a81840;
                  color: #fff;
                  .top {
                    border-color: #fff;
                    span {
                      color: #fff;
                    }
                  }
                  .bottom {
                    color: #fff;
                    .list {
                      span:after {
                        background: #fff;
                      }
                    }
                  }
                }
                .item1 {
                  width: 180px;
                  p {
                    margin: 50px 10px;
                    line-height: 32px;
                    span {
                      color: #aa1941;
                      margin-left: 6px;
                    }
                  }
                  div {
                    text-align: right;
                    color: #777;
                    font-size: 12px;
                    line-height: 20px;
                  }
                }
              }
              .tips {
                text-align: right;
                line-height: 20px;
                span {
                  color: #aa1941;
                }
              }
            }
            img {
              margin: 0 35px;
              width: 830px;
            }
          }
        }
      }
    }
    .module-1 {
      .content-mian {
        padding: 60px 50px 65px;
        .img1 {
          width: 100%;
          display: block;
          margin-bottom: 49px;
        }
        .img2 {
          width: 154px;
          display: block;
        }

        .img3 {
          width: 100%;
          display: block;
          margin-top: 27px;
        }
        .img4 {
          width: 176px;
          display: block;
          margin-top: 27px;
        }
        .img5 {
          width: 342px;
          display: block;
          margin-top: 32px;
        }
        .img-text {
          display: flex;
          justify-content: space-around;
          margin: 0 15px;
          padding-top: 14px;
          li {
            width: 200px;
            height: 258px;
            position: relative;
            overflow: hidden;
            &:hover {
              img {
                transform: scale(1.06);
              }
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
              transition: all 0.3s;
            }
            .pop {
              width: 100%;
              height: 100%;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.3);
              .name {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 0;
                font-size: 20px;
                transform: translateY(-50%);
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
