<template>
  <div class="evalute_one">
    <div class="evalute_main">
      <!-- 标题 -->
      <div class="evalute_title_wrap layout flex_row align_left">
        <div class="evalute_title_l"></div>
        <div class="evalute_title_c">
          <span class="evalute_title">
            测评
            <!-- Evaluation -->
          </span>
        </div>
        <div class="evalute_title_r"></div>
      </div>
      <!-- 测试内容 -->
      <div class="test_content">
        <!-- 步骤条 -->
        <div class="step_bar layout align_left">
          <div class="step_single active_step">
            第一步：国家选择
            <!-- FIRST: Select country -->
          </div>
          <div class="step_img">
            <img src="@/assets/img_12.png" alt />
          </div>
          <div class="step_single">
            第二步：基本调查
            <!-- SECOND: Questionnaire -->
          </div>
          <div class="step_img">
            <img src="@/assets/img_11.png" alt />
          </div>
          <div class="step_single">
            第三步：客户信息
            <!-- THIRD: Customer Information -->
          </div>
        </div>
        <!-- 测试问题 -->
        <div class="test_question_wrap">
          <div class="test_single">
            <!-- 题目 -->
            <div class="test_title">
              1. *您想移民的国家？
              <!-- * The country you want to immigrate to? -->
            </div>
            <!-- 答案 -->
            <div class="test_answer layout align_left flex_row flex-wrap">
              <div
                class="answer_single"
                :class="{active_ans:isChoice == index}"
                v-for="(item,index) in ansList"
                :key="index"
                @click="choiceAns(item,index)"
              >
                {{item.country_name}}
                <div class="choice_img" v-show="isChoice == item.id">
                  <img src="@/assets/img_10.png" alt />
                </div>
              </div>
            </div>
          </div>

          <!-- 下一步 -->
          <div class="next_step_wrap">
            <div
              class="next_step layout flex_row justify_center align_center"
              @click="nextSecond()"
            >
              <div>
                下一步
                <!-- Next -->
              </div>
              <div class="next_icon">
                <img src="@/assets/img_30.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { post } from "../../../api/http";
export default {
  data() {
    return {
      ansList: [],
      // 选中答案
      isChoice: -1,
      id: ""
    };
  },
  methods: {
    // 选择答案
    choiceAns(item, index) {
      this.isChoice = item.id;
      this.id = item.id;
      if (this.id != localStorage.getItem("countryId")) {
        localStorage.removeItem("uploadAnswer");
        localStorage.removeItem("choicedAnswer");
        localStorage.removeItem("countryId");
        localStorage.removeItem("formMsg");
        localStorage.removeItem("evalute_result");
      }
    },
    // 去第二步
    nextSecond() {
      if (this.id) {
        localStorage.setItem("countryId", this.id);
        this.$router.push({ path: "/evaluteTwo" });
      } else {
        this.$message({
          showClose: true,
          message: "Please choose",
          type: "warning"
        });
      }
    },
    // 获取国家列表
    getCountry() {
      let url = "/api/template/get_country";
      post(url).then(res => {
        this.ansList = res;
      });
    }
  },
  mounted() {
    this.isChoice = this.id = localStorage.getItem("countryId");
    // 获取国家列表
    this.getCountry();
  }
};
</script>
<style scoped>
@import "../../../style/evalute.css";
</style>