<template>
  <div
    id="simulate"
    ref="simulate"
    style="padding: 24px 8%; background-color: #f7f7f7"
  >
    <div>
      <el-image
        style="width: 100%; height: 100%"
        :src="require('@/assets/images/career/img_banner02.png')"
      ></el-image>
    </div>
    <!--  内容区域-->
    <div style="background-color: #ffffff; padding: 20px 0">
      <!--  步骤条-->
      <div class="step-list line" style="margin:20px 20%">
        <div
          class="step-item right"
          v-for="(item, index) in topStep"
          :key="index"
        >
          <div
            class="step-number"
            :class="active == item.index ? 'curindex' : ''"
            v-if="active <= item.index"
          >
            {{ item.index }}
          </div>
          <i v-else class="el-icon-check"></i>
          <div class="step-label">{{ item.label }}</div>
        </div>
      </div>
      <!--      内容展示-->
      <div
        style="
          min-height: 400px;
          font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
        "
      >
        <!-- <component :is="isComponent"></component> -->
        <div class="list-page">
          <simulate-notice v-if="active == 1" style="padding:0 20%;"></simulate-notice>
          <new-fill-score
            style="padding:0 20%;"
            ref="score"
            :isDisIndex="isDisIndex"
            v-if="active == 2"
          ></new-fill-score>
          <fill-batch
          style="padding:0 20%;"
            @onFillIn="onFillIn"
            ref="batch"
            :zytbBatchesList="zytbBatchesList"
            :subject="curSubject"
            :score="curScore"
            v-if="active == 3"
          ></fill-batch>
          <new-fill-major
            ref="major"
            :subject="curSubject"
            :score="curScore"
            :firstSubject="firstSubject"
            :lastSubject="lastSubject"
            v-if="active == 4"
          ></new-fill-major>

          <div class="success-complete" v-if="active == 5">
            <div class="text">填报完成</div>
            <img src="@/assets/images/career/icon_data.png" alt="" />
            <div style="margin-top: 20px">
              <el-button type="primary" @click="goVolunteerList"
                >查看报告</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!--      底部按钮-->
      <div style="text-align: center; margin-top: 30px" v-if="active != 5">
        <el-button @click="goVolunteerList">查看记录</el-button>
        <el-button type="primary" @click="toBackPage" :disabled="active == 1"
          >上一步</el-button
        >
        <el-button
          type="primary"
          v-if="active < 3"
          :disabled="active == 5"
          @click="nextStep"
          >下一步</el-button
        >
        <el-button type="primary" v-if="active >= 3" @click="saveData()"
          >保存志愿</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { zytbBatches, zytbSave } from "@/api/webApi/webQue";
import { mapState } from "vuex";
import SimulateNotice from "../components/SimulateNotice.vue";
import NewFillScore from "../components/NewFillScore.vue";
import FillBatch from "../components/FillBatch.vue";
import NewFillMajor from "../components/NewFillMajor.vue";
export default {
  name: "SimulatedVolunteer",
  components: { SimulateNotice, NewFillScore, FillBatch, NewFillMajor },
  data() {
    return {
      curScore: 0,
      curIndex: 0,
      curSubject: "",
      curBatch: 0,
      firstSubject: "",
      lastSubject: [],
      isDisIndex: true,
      active: 1,
      zytbBatchesList: [],
      topStep: [
        { index: 1, label: "填报须知" },
        { index: 2, label: "高考分数" },
        { index: 3, label: "填报批次" },
        { index: 4, label: "院校专业" },
        { index: 5, label: "保存志愿" },
      ],
    };
  },
  computed: {
    ...mapState({ theme: (state) => state.settings.theme }),
  },
  watch: {
    theme: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.$refs.simulate.style.setProperty("--themeColor", val);
        });
      },
    },
  },
  methods: {
    goVolunteerList() {
      this.$router.push({ name: "VolunteerList" });
    },
    onFillIn(item) {
      this.curBatch = item.batch;
      this.curBatchInfo = item;
      this.active = 4;
    },
    onChangeInputScore(e) {
      console.log(e);
    },
    toBackPage() {
      if (this.active <= 1) {
        return;
      }
      this.active--;
    },
    saveData() {
      if (this.curBatch == 0) {
        this.$message.error("请点击批次按钮进行填写！");
        return;
      }
      let detail = {
        batch: {
          batch: this.curBatchInfo.batch,
          name: this.curBatchInfo.name,
          recommand: this.curBatchInfo.recommand,
          scores: [
            this.curBatchInfo.year + "年投档分",
            "文科：" + this.curBatchInfo.score1,
            "理科：" + this.curBatchInfo.score2,
          ],
          wishes: [],
        },
        mode: this.curSubject,
        score: this.curScore,
      };
      if (this.active == 4) {
        let wishe = [];
        let dataList = this.$refs.major.dataList;
        let len = dataList.length;
        for (let i = 0; i < len; i++) {
          let listData = dataList[i];
          if (listData["marjors"] && listData["marjors"].length > 0) {
            wishe.push({
              code: listData["schoolInfo"]["code"],
              marjors: listData["marjors"],
              name: listData["schoolInfo"]["name"],
              submitId: listData["schoolInfo"]["submitId"],
              universityId: listData["schoolInfo"]["universityId"],
            });
          }
        }
        detail.batch.wishes = wishe;
      }
      if (detail.batch.wishes.length == 0) {
        this.$message.error("请最少填写一个专业");
        return;
      }
      let req = {
        batch: this.curBatch,
        detail: detail,
        name: this.getName(),
      };
      this.httpSave(req);
    },
    getName() {
      var date = new Date();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return month + "月" + day + "日模拟志愿表";
    },
    httpSave(req) {
      zytbSave(req).then((res) => {
        this.active = 5;
      });
    },
    nextStep() {
      let self = this;
      if (this.active >= 5) {
        return;
      }
      switch (this.active) {
        case 1:
          self.active = 2;
          break;
        case 2:
          let score = self.$refs.score;
          if (score.hasOwnProperty("firstSubject")) {
            if (score.firstSubject != "" && score.lastSubject.length == 2) {
              this.firstSubject = score.firstSubject;
              this.lastSubject = score.lastSubject;
            } else {
               this.$message.error("请选择科类");
               return
            }
          }
          if (score.hasOwnProperty("inputScore")) {
            this.curScore = score.inputScore;
          }
          if (score.hasOwnProperty("inputIndex")) {
            this.curIndex = score.inputIndex;
          }
          if (this.curScore == 0) {
            this.$message.error("请输入总分！");
            return;
          }
          this.httpzytbBatches(() => {
            self.active = 3;
          });
          break;
      }
    },
    httpzytbBatches(cb) {
      zytbBatches({
        score: this.curScore,
        mode: this.curSubject,
      }).then((res) => {
        this.zytbBatchesList = res.rows;
        cb && cb();
      });
    },
  },
};
</script>

<style scoped>
.step-list {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 50px;
}
.step-list.line::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  top: 50%;
  background: #6cd1b5;
  z-index: 0;
}
.step-item {
  position: relative;
  background: #fff;
  z-index: 2;
  border: 1px solid #6cd1b5;
  border-radius: 50%;
  color: #6cd1b5;
  width: 48px;
  height: 48px;
  line-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-label {
  font-weight: bolder;
  color: #555555;
  width: 100px;
  text-align: center;
  font-size: 14px;
  position: absolute;
  bottom: -40px;
}
.step-number {
  line-height: 48px;
  text-align: center;
}
.step-number.curindex {
  width: 100%;
  height: 100%;
  background: #6cd1b5;
  border-radius: 50%;
  color: #fff;
}
.success-complete {
  font-size: 18px;
  color: #6cd1b5;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.success-complete .text {
  margin-bottom: 50px;
}
</style>

