<template>
  <div class="evalute_one">
    <div class="evalute_main">
      <!-- 标题 -->
      <div class="title">
        评测结果
        <!-- Evaluation results -->
        </div>
      <!-- 测试结果 -->
      <div class="test_content">
        <!-- 测试信息 -->
        <div class="test_question_wrap">
          <!-- 移民申请人信息 -->
          <div class="msg_applicant layout justify flex_row">
            <!-- 姓名 -->
            <div class="apply_single">
              <!-- 标题 -->
              <div class="title_apply">
                申请人
                <!-- Applicant -->
                </div>
              <!-- 信息 -->
              <div class="detail_apply">{{evaluteResult.name}}</div>
            </div>
            <!-- 移民地 -->
            <div class="apply_single">
              <!-- 标题 -->
              <div class="title_apply">
                申请国家
                <!-- United States -->
                </div>
              <!-- 信息 -->
              <div class="detail_apply">{{evaluteResult.country_name}}</div>
            </div>
            <!-- 预测分数 -->
            <div class="apply_single">
              <!-- 标题 -->
              <div class="title_apply">
                预测分值
                <!-- Forecast scores -->
                </div>
              <!-- 信息 -->
              <div class="detail_apply score_apply">{{evaluteResult.score}}</div>
            </div>
            <!-- 办理时长 -->
            <div class="apply_single">
              <!-- 标题 -->
              <div class="title_apply">
                预测办理时长
                <!-- Forecast processing time -->
                </div>
              <!-- 信息 -->
              <div class="detail_apply time_apply">
                <div>
                  <span
                    class="month_apply"
                    :class="{pass_color:evaluteResult.is_pass==2}"
                  >{{evaluteResult.month}}</span>
                  <span class="month_position">
                    个月
                    <!-- Months -->
                    </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 评测建议 -->
          <div class="apply_suggest">
            <div class="sugges_title">
              测评建议
              <!-- Evaluation recommendations -->
              </div>
            <div class="suggest_detail" v-html="evaluteResult.content"></div>
          </div>
          <!-- 上一页 提交 撤销 -->
          <div class="btn_group">
            <div class="layout align_center justify_center flex_row">
              <div class="btn_l" @click="revalute()">
                重新测评
                <!-- Revaluation -->
                </div>
              <div class="btn_l btn_c" @click="submitNow()">
                提交审核
                <!-- Submit -->
                </div>
              <div class="btn_l" @click="cancelSubmit()">
                关闭
                <!-- Cancel -->
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { post } from "../../../api/http";
export default {
  data() {
    return {
      // 测评结果
      evaluteResult: "",
      // 国家id
      countryId: "",
      // 第二步答案
      choiceAns: "",
      // 个人信息
      formLabelChinese: "",
      // 上传的文件
      uploadAns: ""
    };
  },
  methods: {
    // 重新审核
    revalute() {
      this.$router.push({ path: "/evaluteOne" });
    },
    // 提交审核
    submitNow() {
      let url = "/api/template/submit";
      let params = {
        id: this.evaluteResult.id,
        country_id: this.countryId,
        name: this.formLabelChinese.name,
        gender: this.formLabelChinese.gender,
        card_number: this.formLabelChinese.card_number,
        passport_number: this.formLabelChinese.passport_number,
        country: this.formLabelChinese.nation,
        mobile: this.formLabelChinese.phone,
        first_name: this.formLabelChinese.first_name,
        middle_name: this.formLabelChinese.middle_name,
        last_name: this.formLabelChinese.last_name,
        postcode: this.formLabelChinese.postCode,
        address1:this.formLabelChinese.add1,
        address2:this.formLabelChinese.add2,
        address3:this.formLabelChinese.add3,
        content1: this.choiceAns,
        content2: this.uploadAns
      };
      post(url, params).then(res => {
        localStorage.removeItem("uploadAnswer");
        localStorage.removeItem("choicedAnswer");
        localStorage.removeItem("countryId");
        localStorage.removeItem("formMsg");
        localStorage.removeItem("evalute_result");
        this.$router.push({ path: "/myClient" });
      })
      .catch(err=>{
        localStorage.removeItem("uploadAnswer");
        localStorage.removeItem("choicedAnswer");
        localStorage.removeItem("countryId");
        localStorage.removeItem("formMsg");
        localStorage.removeItem("evalute_result");
      });
    },
    // 关闭
    cancelSubmit() {
      this.$router.push({ path: "/indexMid" });
    }
  },
  mounted() {
    this.countryId = localStorage.getItem("countryId");
    this.choiceAns = JSON.parse(localStorage.getItem("choicedAnswer"));
    this.uploadAns = JSON.parse(localStorage.getItem("uploadAnswer"));
    this.formLabelChinese = JSON.parse(localStorage.getItem("formMsg"));
    this.evaluteResult = JSON.parse(localStorage.getItem("evalute_result"));
  }
};
</script>
<style scoped>
@import "../../../style/evalute.css";

/* 标题 */
.title {
  color: #526aa6;
  font-size: 30px;
  width: 100%;
  height: 94px;
  border-bottom: 2px solid #526aa6;
  text-align: center;
  font-weight: bold;
  line-height: 94px;
}
.test_question_wrap {
  margin: 0 20px;
}
/* 移民申请人信息 */
.msg_applicant {
  margin-top: 36px;
}
.apply_single {
  width: 264px;
  border: 1px solid #526aa6;
  border-radius: 3px;
}
/* 申请信息类目 */
.title_apply {
  width: 100%;
  height: 31px;
  line-height: 31px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  background-color: #526aa6;
}
/* 申请人信息 */
.detail_apply {
  width: 100%;
  height: 76px;
  line-height: 76px;
  text-align: center;
  color: #333;
  font-size: 16px;
}
/* 评测分数 */
.score_apply {
  font-size: 48px;
  color: #f90000;
}
/* 评测时长 */
.month_apply {
  color: #008000;
  font-size: 48px;
}
.pass_color {
  color: #f90000;
  font-size: 48px;
}
/* 月份单位 */
.month_position {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  margin-left: 15px;
}
/* 评测建议 */
.apply_suggest {
  width: 100%;
  border: 1px solid #526aa6;
  border-radius: 3px;
  margin-top: 60px;
}
.sugges_title {
  height: 34px;
  line-height: 34px;
  background-color: #526aa6;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  padding-left: 13px;
  text-align: left;
}
.suggest_detail {
  padding: 14px 20px;
  color: #666;
  font-size: 16px;
  text-align: left;
}
/* 提交 */
.btn_group {
  margin: 100px auto 0;
}
.btn_l {
  width: 120px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border: 1px solid #999;
  font-size: 20px;
  color: #666;
  border-radius: 3px;
}
.btn_l:hover {
  border-color: #526aa6;
  opacity: 0.8;
}
.btn_c {
  color: #fff;
  background-color: #526aa6;
  border-color: #526aa6;
  margin: 0 60px;
}
</style>