<template>
  <div class="report">
    <div>
      <div>
        <div class="reportCon">
          <div>
            <div class="reportConTlt">
              <img src="" alt="" />
              <div>
                <div>
                  <p>测试报告</p>
                  <p>意向岗位：运营总监</p>
                </div>
                <p></p>
                <div>
                  <p>
                    <img src="../assets/cename.png" alt="" /><span
                      >姓名：谭玹霖</span
                    >
                  </p>
                  <p>
                    <img src="../assets/cetel.png" alt="" /><span
                      >电话：+86 13600360000</span
                    >
                  </p>
                </div>
                <div>
                  <p>
                    <img src="../assets/ceage.png" alt="" /><span
                      >年龄：25</span
                    >
                  </p>
                  <p>
                    <img src="../assets/cedate.png" alt="" /><span
                      >测试时间：2022.01.09 13:08:34</span
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="titleA">人格类型测试</div>
            <div class="titleB">人格类型测试：<span>稳健型+影响型</span></div>
            <p class="dateLength">测试时长：<span>25min</span></p>
            <div class="echartsCss">
              <div
                id="myChart123"
                :style="{ width: '100%', height: '250px' }"
              ></div>
            </div>
            <div class="titleB">稳健型（支持型）人格解析</div>

            <div class="progressBar">
              <p class="progressBarTit">分数</p>
              <div class="progressBarCon">
                <div
                  :style="{ width: proportion(dataNum.num, dataNum.sum) }"
                  class="progressBarConList"
                >
                  <p class="mark">{{ dataNum.num }}</p>
                </div>
              </div>

              <div class="sumCss">
                <p>0</p>
                <p>{{ dataNum.sum }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="reportCon">
          <div>
            <div class="titleC">
              <p>测试报告</p>
              <p>火眼识才测评</p>
            </div>
            <p class="titleCH"></p>
            <div class="titleB">稳健型（支持型）人格解析</div>

            <div class="progressBar">
              <p class="progressBarTit">分数</p>
              <div class="progressBarCon">
                <div
                  :style="{ width: proportion(dataNum.num, dataNum.sum) }"
                  class="progressBarConList"
                >
                  <p class="mark">{{ dataNum.num }}</p>
                </div>
              </div>

              <div class="sumCss">
                <p>0</p>
                <p>{{ dataNum.sum }}</p>
              </div>
            </div>

            <p class="description">人格描述</p>
            <div class="topDescription">
              <p>· 正面</p>
              <p>
                喜欢做主、具有较强的行动力，且行动迅速；喜欢设定目标、
                并表现出不达目标不罢休、充满自信、意志坚定的状态，常常能表现
                出主动、活力的状态，遇到问题不会气馁，在组织中表现为推动别人
                行动的人。工作表现为粗线条。
              </p>
            </div>
            <div class="topDescription">
              <p>· 反面</p>
              <p>
                喜欢做主、具有较强的行动力，且行动迅速；喜欢设定目标、
                并表现出不达目标不罢休、充满自信、意志坚定的状态，常常能表现
                出主动、活力的状态，遇到问题不会气馁，在组织中表现为推动别人
                行动的人。工作表现为粗线条。
              </p>
            </div>
            <p class="description">人格特征</p>
             <div class="traits">
                <p>
              <span>希望：</span>
              <span>赢，达成目标</span>
            </p>
            <p>
              <span>驱动力：</span>
              <span>目标和结果</span>
            </p>
            <p>
              <span>面对压力：</span>
              <span>迅速完成任务，忽略细节和过程</span>
            </p>
            <p>
              <span>希望别人：</span>
              <span>做出改变</span>
            </p>
             </div>
         
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, getCurrentInstance } from "vue";
export default {
  setup() {
    const ins = getCurrentInstance();
    onMounted(() => {
      console.log(ins);
      // 需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("myChart123"));

      let option = {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "支配型7分", max: 6500 },
            { name: "谨慎型5分", max: 16000 },
            { name: "影响13分", max: 30000 },
            { name: "稳健型15分", max: 38000 },
          ],
        },
        // color: ["#000"],
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [5000, 14000, 28000, 26000, 42000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    });
  },

  props: {
    navIf: String,
  },
  data() {
    return {
      userData: {},
      dataNum: {
        sum: 40,
        num: 20,
      },
      stylecss: "35%",
    };
  },
  mounted() {
    this.userData = JSON.parse(localStorage.userData);
  },
  methods: {
    proportion(obj, max) {
      console.log((obj - 0) / (max - 0));
      return ((obj - 0) / (max - 0)) * 100 + "%";
    },
  },
};
</script>


<style scoped>
.report {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0px;
  z-index: 30;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  padding: 0 90px;
  top: 0px;
  overflow: hidden;
}
.report > div > div {
  width: 100%;
  overflow-y: auto;
  display: flex;
  align-items: center;
}
.report > div {
  width: 100%;
  overflow: hidden;
}
.reportCon {
  width: 595px;
  min-width: 595px;
  height: 842px;
  margin-right: 50px;
  background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
  padding: 16px;
  width: 1;
}
.reportCon > div {
  background: #ffffff;
  box-shadow: 2px 3px 4px 0px rgba(15, 55, 142, 0.2);
  border-radius: 70px 0px 70px 0px;
  width: 100%;
  padding: 0 34px;
  height: 100%;
  padding-top: 64px;
  box-sizing: border-box;
}
.reportConTlt {
  display: flex;
}
.reportConTlt > img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 25px;
}
.reportConTlt > div {
  flex: 1;
}
.reportConTlt > div > :nth-child(1) > :nth-child(1) {
  font-size: 28px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  margin-right: 25px;
  line-height: 28px;
}
.reportConTlt > div > :nth-child(1) > :nth-child(2) {
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
}
.reportConTlt > div > :nth-child(1) {
  padding-top: 6px;
  padding-bottom: 5px;
  display: flex;
  align-items: flex-end;
}
.reportConTlt > div > :nth-child(2) {
  width: 100%;
  height: 2px;
  background: linear-gradient(138deg, #2884d3 0%, #0d338a 100%, #0d338a 100%);
}
.reportConTlt > div > :nth-child(3) {
  display: flex;
}
.reportConTlt > div > :nth-child(3) > :nth-child(1) {
  width: 154px;
}
.reportConTlt > div > :nth-child(3) > p {
  display: flex;
  align-items: center;
  margin-top: 11px;
}
.reportConTlt > div > :nth-child(3) > p > img {
  width: 18px;
  height: 18px;
  margin-right: 9px;
}
.reportConTlt > div > :nth-child(3) > p > span {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  line-height: 14px;
}

.reportConTlt > div > :nth-child(4) {
  display: flex;
}
.reportConTlt > div > :nth-child(4) > :nth-child(1) {
  width: 154px;
}
.reportConTlt > div > :nth-child(4) > p {
  display: flex;
  align-items: center;
  margin-top: 11px;
}
.reportConTlt > div > :nth-child(4) > p > img {
  width: 18px;
  height: 18px;
  margin-right: 9px;
}
.reportConTlt > div > :nth-child(4) > p > span {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  line-height: 21px;
}
.titleA {
  width: 160px;
  text-align: center;
  height: 34px;
  background: linear-gradient(138deg, #2884d3 0%, #0d338a 100%, #0d338a 100%);
  margin: auto;
  margin-top: 27px;
  border-radius: 16px;
  font-size: 18px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  margin-bottom: 27px;
  color: #ffffff;
  line-height: 34px;
}
.titleB {
  position: relative;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #515151;
  line-height: 21px;
  padding-left: 11px;
}
.titleB::after {
  content: "";
  width: 5px;
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -7px;
  height: 14px;
  background: linear-gradient(138deg, #2884d3 0%, #0d338a 100%, #0d338a 100%);
  border-radius: 9px;
}
.echartsCss {
  margin-top: -35px;
  margin-bottom: 37px;
}

.dateLength {
  display: flex;
  font-size: 13px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  margin-top: 29px;
  padding-left: 11px;
}
.dateLength > span {
  font-size: 13px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #0544a4;
  line-height: 20px;
}
.progressBar {
  margin-top: 23px;
  width: 495px;
  height: 113px;
  background: #f8f8f8;
  padding: 24px 21px 18px;
  border-radius: 10px;
}
.progressBarTit {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #454d67;
  line-height: 21px;
  margin-bottom: 19px;
  padding-left: 9px;
}
.progressBarCon {
  width: 100%;
  height: 12px;
  background: #ffffff;
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}
.progressBarConList {
  height: 12px;
  background: linear-gradient(135deg, #ffdf73 0%, #febb3f 100%);
  border-radius: 16px;
  position: relative;
}
.mark {
  position: absolute;
  right: -10px;
  width: 42px;
  height: 46px;
  bottom: 0px;
  background-image: url("../assets/szbj.png");
  background-size: 100%;
  font-size: 17px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  text-align: center;

  line-height: 36px;
}
.sumCss {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.sumCss > p {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #1b1e20;
}
.titleC {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
}
.titleCH {
  width: 100%;
  height: 1px;
  background: linear-gradient(138deg, #2884d3 0%, #0d338a 100%, #0d338a 100%);
  margin-bottom: 19px;
}
.description {
  width: 100px;
  height: 30px;
  background: linear-gradient(138deg, #2884d3 0%, #0d338a 100%, #0d338a 100%);
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0px 40px 40px 0px;
  margin-top: 23px;
  font-size: 16px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  padding-left: 12px;
  color: #ffffff;
  line-height: 30px;
}
.topDescription {
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  margin-top: 16px;
  line-height: 18px;
}
.topDescription > :nth-child(1) {
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #0544a4;
  line-height: 21px;
}
.topDescription > :nth-child(2) {
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
  margin-top: 10px;
}
.traits{
padding-top: 16px;
}
.traits>p{
font-size: 12px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #0544A4;
line-height: 18px;
margin-bottom: 16px
;
}
.traits>p>:nth-child(2){

color: #666666;
}
</style>
