<template>
  <!-- style="padding:24px 12%;background-color:#f7f7f7;" -->
  <div>
    <div style="background-color:#fff;">
      <el-image style="width:100%;" :src="require('@/assets/images/career/career_banner.png')"></el-image>
      <div v-if="flag===false" style="padding:10px 72px;">
        <!-- 迈尔斯布里格斯类型指标（MBTI）测试前 -->
        <h2 v-if="cereerType === 'HOLLAND'">职业性格测评（MBTI）测试前须知</h2>
        <h2 v-else>迈尔斯布里格斯类型指标（MBTI）测试前须知</h2>
        <el-row style="font-size: 14px;">
          <ul>
            <li>
              <div class="number">1</div>
              <div>参加测试的人员请务必诚实、独立地回答问题,只有如此，才能得到有效的效果。</div>
            </li>
            <li>
              <div class="number">2</div>
              <div></div>《性格分析报告》展示的你的性格倾向，而不是你的知识，技能，经验。
            </li>
            <li>
            <div class="number">3</div>
            <div style="width:100%">
              MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。
            </div>
            </li>
            <li>
              <div class="number">4</div>
              <div>本测试分为四部分，共{{cereerType === 'HOLLAND'?'60题':'93题'}}。需时约18分钟，所有题目没有对错之分，请根据自己的时间情况填写</div>
            </li>
          </ul>
        </el-row>
        <div style="position: relative;">
          <el-image style="width:100%;margin-top: 20px;" :src="require('@/assets/images/career/bg_xuzhi.png')"></el-image>
        <div style="width: 60%;position: absolute;top:40%;right:15%;color:#47C6A2;font-size: 14px;">只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。 希望你能从中或多或少地获得一些有益的信息。</div>
        </div>
      <el-row style="margin-top: 56px;margin-bottom: 60px;">
        <el-button style="background-color: #47C6A2;color: #ffffff;" @click="flag=true">开始测试</el-button>
        <el-button style="color: #979797;">查询记录</el-button>
      </el-row>
      </div>
      <div v-if="cereerType === 'HOLLAND' && flag===true ">
        <career-holland />
      </div>
      <div v-if="cereerType === 'BMTI' && flag===true ">
        <career-mbti></career-mbti>
      </div>
     </div>
  </div>
</template>

<script>
import CareerHolland from "@/views/career/components/CareerHolland";
import CareerMbti from "@/views/career/components/CareerMbti";
export default {
  name: "CareerEvaDetail",
  components: { CareerHolland,CareerMbti },
  data() {
    return {
      cereerType: "", //标识是从哪里进来的
      flag:false
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        this.cereerType = val.params.type;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  ul{
    padding: 0;
  }
  li{
    list-style: none;
    display: flex;
    align-items: center;
    margin: 15px 0;
    div{
      font-size: 14px;
      color: #414141;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }
  }
  .number{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color:#D2F1E8;
    color:#000000;
    text-align: center;
    line-height: 24px;
    margin-right: 10px;
  }
</style>
