<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 ">
            第一步：国家选择
            <!-- FIRST: Select country -->
          </div>
          <div class="step_img">
            <img src="@/assets/img_12.png" alt />
          </div>
          <div class="step_single active_step">
            第二步：基本调查
            <!-- 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" v-for="(item,index) in ansList" :key="index">
            <!-- 题目 -->
            <div class="test_title">
              {{index+1}}.
              <i v-show="item.is_required == 1">*</i>
              {{item.question_name}}
              <span
                class="money"
                v-show="item.hint"
              >({{item.hint}})</span>
            </div>
            <!-- 答案 -->
            <!-- item.type 1:选择题  2:填空题 -->
            <div class="test_answer layout align_left flex_row flex-wrap" v-if="item.type == 1">
              <div
                class="answer_single"
                :class="{active_ans:secondItem.choice}"
                v-for="(secondItem,secondIndex) in item.option"
                :key="secondIndex"
                @click.stop="choiceAns(item.id,secondItem)"
              >
                {{secondItem.option_name}}
                <div class="choice_img" v-show="secondItem.choice">
                  <img src="@/assets/img_10.png" alt />
                </div>
              </div>
            </div>
            <!-- 答案 -->
            <div v-else>
              <div
                class="test_answer layout align_left flex_row flex-wrap"
                v-if="item.content_type == 1"
              >
                <el-input
                  type="number"
                  v-model="item.inputVal"
                  class="money_input"
                  placeholder="请输入金额"
                  @change="changeValue(item)"
                ></el-input>
                <span class="money" v-show="item.currency_name">({{item.currency_name}})</span>
              </div>
              <!-- 时间选择器 -->
              <div class="test_answer layout align_left" v-else>
                <el-date-picker
                  v-model="item.inputVal"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  @change="changeTime(item)"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <!-- 下一步 -->
          <div class="next_step_wrap">
            <div class="layout align_center justify_center flex_row">
              <div class="btn_l" @click="prevPage()">
                上一步
                <!-- Back -->
                </div>
              <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 class="btn_l" @click="cancelSubmit()">
                取消
                <!-- Cancel -->
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "../../../api/http";
let choicedObj = {};
export default {
  data() {
    return {
      // 选择题
      ansList: [],
      // 选中答案
      isChoice: "",
      // 国家id
      countryId: "",
      // 填空题
      number: "",
      // 时间戳
      value3: ""
    };
  },
  methods: {
    // 选择题答案
    choiceAns(itemId, secondItem) {
      for (let obj of this.ansList) {
        // 找到对应的选择题
        if (itemId == obj.id) {
          for (let options of obj.option) {
            // 找到选择的答案
            if (secondItem.option_name == options.option_name) {
              options.choice = true;
            } else {
              options.choice = false;
            }
          }
        }
      }
      choicedObj[itemId] = secondItem.option_name;
      localStorage.setItem("choicedAnswer", JSON.stringify(choicedObj));
    },
    // 填空题
    changeValue(item) {
      choicedObj[item.id] = item.inputVal;
      localStorage.setItem("choicedAnswer", JSON.stringify(choicedObj));
    },
    // 时间选择器
    changeTime(item) {
      choicedObj[item.id] = item.inputVal;
      localStorage.setItem("choicedAnswer", JSON.stringify(choicedObj));
    },
    // 去第一步
    prevPage() {
      this.$router.push({ path: "/evaluteOne" });
    },
    // 取消
    cancelSubmit() {
      localStorage.removeItem("uploadAnswer");
      localStorage.removeItem("choicedAnswer");
      localStorage.removeItem("countryId");
      localStorage.removeItem("formMsg");
      localStorage.removeItem("evalute_result");
      this.$router.push({ path: "/indexMid" });
    },
    // 去第三步
    nextSecond() {
      choicedObj = {};
      let choicedAns = JSON.parse(localStorage.getItem("choicedAnswer"));
      // 所有必填项
      let allId = [];
      // 已选必填项
      let request = [];
      // 已选择题目id
      let choicedId = [];
      for (let i in choicedAns) {
        choicedId.push(i / 1);
      }
      for (let obj of this.ansList) {
        if (obj.is_required == 1) {
          // 必填项
          allId.push(obj.id);
        }
      }
      // 已回答题目是否全部包含必填项
      for (let item of allId) {
        if (choicedId.indexOf(item) > -1) {
          request.push(item);
        }
      }
      if (request.length == allId.length) {
        // 必填项已全部回答
        this.$router.push({ path: "/evaluteThree" });
      } else {
        this.$message({
          showClose: true,
          message: "Please answer the questions that must be answered",
          type: "warning"
        });
      }
    },
    // 获取题目
    getChoiceQuestion() {
      let url = "/api/template/get_question2";
      let params = {
        country_id: this.countryId
      };
      post(url, params).then(res => {
        // 重组选择题答案
        for (let r of res) {
          // 选择题
          if (r.type == 1) {
            for (let option of r.option) {
              option.choice = false;
            }
          } else {
            // 填空题
            r.inputVal = "";
          }
        }
        // 数据回显
        let choicedAnswer = JSON.parse(localStorage.getItem("choicedAnswer"));
        if (choicedAnswer) {
          choicedObj = choicedAnswer;
        }

        for (let i in choicedObj) {
          for (let obj of res) {
            // 根据id找到对应的题目
            if (i == obj.id) {
              if (obj.type == 1) {
                // 选择题
                // 找到对应的选项
                for (let name of obj.option) {
                  if (choicedObj[i] == name.option_name) {
                    name.choice = true;
                  }
                }
              } else if (obj.type == 2) {
                // 填空题
                obj.inputVal = choicedObj[i];
              }
            }
          }
        }
        this.ansList = res;
      });
    }
  },
  mounted() {
    // 国家id
    this.countryId = localStorage.getItem("countryId");
    // 获取题目
    this.getChoiceQuestion();
  }
};
</script>
<style scoped>
@import "../../../style/evalute.css";
.evalute_main {
  height: auto;
  padding-bottom: 60px;
}
.text_second_single {
  margin-top: 80px;
}
.test_title_tips {
  font-size: 18px;
  color: #999;
}
/* 金额 */
.money_input {
  width: 359px;
  border-radius: 3px;
  font-size: 16px;
}
.money {
  color: #666;
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
  line-height: 38px;
}
.next_step {
  margin: 0 60px;
}
/* 下一步 */

.btn_l {
  width: 120px;
  height: 36px;
  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;
}
</style>