<template>
  <div class="mt10 pb40">
    <el-card shadow="never">
      <el-row :gutter="40">
        <el-col :span="5">
          <el-image style="width:100%;height:100%;" :src="require('@/assets/images/career/img_holland.png')"></el-image>
        </el-col>
        <el-col :span="19" style="padding-right:80px">
          <div>
            <h3 style="margin-bottom:16px;">职业兴趣测评（HOLLAND）</h3>
            <div class="text" style="display:flex;align-items: center;">
              <div>
                <span style="width:200px;display:inline-block">测评方向：专业倾向</span>
                <span>测评题目：60题</span>
              </div>
              <div>
                <el-button size="mini" round style="background:#47C6A2;color:#ffffff" @click="goCareer('HOLLAND')">进入评测</el-button>
                <el-button size="mini" round style="color:#47C6A2" @click="goReportList('HOLLAND')">查看记录</el-button>
              </div>
            </div>
            <div class="text">
              <span style="width:200px;display:inline-block">测评时间：18分钟</span>
              <span>测评次数：剩余2次</span>
            </div>
          </div>
          <div class="tabBox">
            <template>
              <el-tabs v-model="activeName">
                <el-tab-pane label="测前说明" name="first">
                  <ul class="cp-rule">
                    <li>1、请确保在一个独立、安静的环境下一次性完成，勿受他人干扰。</li>
                    <li>2、请依次作答，不漏答。</li>
                    <li>3、参加测试的人员请务必诚实、独立的回答问题，只有如此，才能得到有效的结果。</li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="测评介绍" name="second">
                  <ul class="cp-rule">
                    <li>本测试以霍兰德职业兴趣（Holland Vocational Interest
                      Theory）理论为基础，它不仅能够测出你对什么类型的事情和工作感兴趣，而且还反映出你做事心态、以及你的部分性格特点。从你喜欢做什么（兴趣）、你擅长做什么（能力）、你适合做什么（人格）三个方面分别对测评者进行测评，同时在题目内容设计方面结合了当代中国学生的实际情况。通过对测评结果的综合分析，可以帮助测评者发现和确定自己的职业兴趣和能力特长，使我们对与自身性格匹配的职业类别、岗位特质有更为明晰的认识，从而在我们就业、升学、进修或职业转向时，做出最佳的选择。
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="测评目的" name="third">
                  <ul class="cp-rule">
                    <li>1、只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。</li>
                    <li>2、希望你能从中或多或少地获得一些有益的信息。</li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 2. -->
    <el-card shadow="never" style="margin-top:24px;">
      <el-row :gutter="40">
        <el-col :span="5">
          <el-image style="width:100%;height:100%;" :src="require('@/assets/images/career/img_MBTI.png')"></el-image>
        </el-col>
        <el-col :span="19" style="padding-right:80px">
          <div>
            <h3 style="margin-bottom:16px;">迈尔斯布里格斯类型指标（MBTI）</h3>
            <div class="text" style="display:flex;align-items: center;">
              <div>
                <span style="width:200px;display:inline-block">测评方向：性格倾向</span>
                <span>测评题目：93题</span>
              </div>
              <div>
                <el-button size="mini" round style="background:#47C6A2;color:#ffffff" @click="goCareer('BMTI')">进入评测</el-button>
                <el-button size="mini" round style="color:#47C6A2" @click="goReportList('MBTI')">查看记录</el-button>
              </div>
            </div>
            <div class="text">
              <span style="width:200px;display:inline-block">测评时间：18分钟</span>
              <span>测评次数：剩余2次</span>
            </div>
          </div>
          <div class="tabBox">
            <template>
              <el-tabs v-model="activeName02">
                <el-tab-pane label="测前说明" name="first02">
                  <ul class="cp-rule">
                    <li>1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</li>
                    <li>2、《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。</li>
                    <li>3、本测试分为四部分，共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。</li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="测评介绍" name="second02">
                  <ul class="cp-rule">
                    <li>
                      MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，
                      而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="测评目的" name="third02">
                  <ul class="cp-rule">
                    <li>1、只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。</li>
                    <li>2、希望你能从中或多或少地获得一些有益的信息。</li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CareerEva',
  data () {
    return {
      activeName: 'first',
      activeName02: 'first02'
    }
  },
  methods: {
    goCareer (type) {
      if (type === 'HOLLAND') {
        this.$router.push({ name: 'CareerEvaDetail', params: { type: 'HOLLAND' } })
      }else if(type === 'BMTI'){
        this.$router.push({ name: 'CareerEvaDetail', params: { type: 'BMTI' } })
      }
    },
    goReportList(type){
      if(type==='HOLLAND'){
        this.$router.push({name:'CareerHollandReportList'})
      }else if(type==='MBTI'){
        this.$router.push({name:'CareerMbtiReportList'})
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.cp-rule {
  font-size: 14px;
  color: #414141;
  font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
  font-weight: 400;
  padding: 0px;
  width: 100%;
  li {
    width: 100%;
    list-style: none;
    padding: 8px 0;
    line-height: 1.75;
    word-wrap: normal;
    white-space: wrap;
  }
}
.text {
  margin-bottom: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
  font-weight: 400;
  justify-content: space-between;
}
</style>
<style lang="scss" scoped>
.tabBox {
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .el-tabs__active-bar {
              background-color: #47C6A2 !important;
            }
            .el-tabs__item.is-active {
              color: #47C6A2 !important;
            }
          }
        }
      }
    }
  }
}
</style>
