<template>
  <div style="height: 100%; width: 100%">
    <div class="race_nav">
      <span @click="checkSteps(1)" :class="{ active: steps == 1 }"
        >项目基础信息</span
      >
      <span @click="checkSteps(2)" :class="{ active: steps == 2 }"
        >项目概况</span
      >
      <span @click="checkSteps(3)" :class="{ active: steps == 3 }"
        >项目实施过程</span
      >
      <span @click="checkSteps(4)" :class="{ active: steps == 4 }"
        >项目成效与反思</span
      >
    </div>
    <div class="race_body">
      <RaceDetail
        v-if="steps == 1"
        :oid="oid"
        :userid="userid"
        :raceInfo="raceInfo"
        @updateTitle="updateRaceInfoTitle"
      ></RaceDetail>
      <RaceOverview
        v-if="steps == 2"
        :raceOverView="raceOverView"
        @upRaceOver="updateRaceOver"
      ></RaceOverview>
      <ProjectProcess
        @upRacePro="updateRacePro"
        :raceProcess="raceProcess"
        v-if="steps == 3"
      ></ProjectProcess>
      <ProjectEffect
        @upproEff="updateProEff"
        :raceEffect="raceEffect"
        v-if="steps == 4"
      ></ProjectEffect>
    </div>
    <div class="race_btn">
      <el-button
        type="primary"
        @click="goTo('/eventCenter?userid=' + userid + '&oid=' + oid)"
        >赛事信息</el-button
      >
      <el-button type="primary" @click="lastSteps" v-if="steps != 1"
        >上一步</el-button
      >
      <el-button type="primary" @click="nextSteps" v-if="steps != 4"
        >下一步</el-button
      >
      <el-button type="primary" @click="addRace" v-if="steps == 4"
        >确认上传</el-button
      >
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="createBox">
        <div class="success">
          <img src="../../../assets/icon/success.png" alt="" />
        </div>
        <div class="cresteMessage">
          案例征集必填内容已完成，请在
          <span>"赛事管理 > 我的案例"中查看。</span> 你可以点击
          <span>"平台实施填报入口"</span> ，提交选填内容。<span
            style="color: #9a9a9a"
            >（填报后可以运用平台进行教学，调用平台工具，收集过程性数据并生成数据报告。）</span
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="goTo('/eventCenter?userid=' + userid + '&oid=' + oid)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import RaceDetail from "./addRace/raceDetail.vue";
import RaceOverview from "./addRace/raceOverview.vue";
import ProjectProcess from "./addRace/projectProcess.vue";
import ProjectEffect from "./addRace/projectEffect.vue";
export default {
  components: {
    RaceDetail,
    RaceOverview,
    ProjectProcess,
    ProjectEffect,
  },
  data() {
    return {
      steps: 1,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      dialogVisible: false,
      raceInfo: {
        title: "",
        type: [],
        cover: [],
        tableData: [],
        courseText: "",
      },
      raceOverView: {
        driQuestion: { brief: "", data: [] },
        tarDesign: { brief: "", data: [] },
        actiDesign: { brief: "", data: [] },
        evaDesign: { brief: "", data: [] },
        other: { brief: "", data: [] },
      },
      raceProcess: {
        actBox: [
          {
            actName: "",
            driQuestion: { title: "", brief: "", data: [] },
            tarDesign: { title: "", brief: "", data: [] },
            actiDesign: { title: "", brief: "", data: [] },
            evaDesign: { title: "", brief: "", data: [] },
          },
        ],
      },
      raceEffect: [
        {
          proEffText: "",
          proRefText: "",
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    checkSteps(steps) {
      this.steps = steps;
    },
    nextSteps() {
      this.steps++;
    },
    lastSteps() {
      this.steps--;
    },
    goTo(path) {
      this.$router.push(path);
    },
    updateRaceInfoTitle(raceInfo) {
      this.raceInfo = raceInfo;
    },
    updateRaceOver(raceOver) {
      this.raceOverView = raceOver;
    },
    updateRacePro(racePro) {
      this.raceProcess = racePro;
    },
    updateProEff(raceEff) {
      this.raceEffect = raceEff;
    },
    addRace() {
      let params = [
        {
          uid: this.userid,
          info: JSON.stringify(this.raceInfo),
          over: JSON.stringify(this.raceOverView),
          pro: JSON.stringify(this.raceProcess),
          courseType: JSON.stringify(this.raceInfo.type),
          res: JSON.stringify(this.raceEffect),
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addRace", params)
        .then((res) => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = true;
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3c3c3c !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.race_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
}

.race_nav span {
  border: 1px solid #929292;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  color: #4988bf;
}

.race_nav span + span {
  margin-left: 10px;
}

.race_nav .active {
  color: #001fff;
}

.race_body {
  display: flex;
  width: 90%;
  justify-content: center;
  margin: 0 auto;
  height: calc(100% - 120px);
}

.race_btn {
  width: 90%;
  margin: 10px auto 0;
  display: flex;
  justify-content: flex-end;
}
.createSuccessCss {
  position: fixed;
  right: 30%;
  top: 50%;
  width: 717px;
  height: 346px;
  z-index: 999;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  transform: translateY(-50%);
  box-shadow: 0px 0 8px 0px #c5c5c5;
}

.createBox {
  padding: 0 10px 0 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.success {
  width: 68px;
  height: 68px;
}

.success > img {
  width: 100%;
  height: 100%;
}

.cresteMessage {
  width: 500px;
  margin-left: 22px;
  line-height: 50px;
}

.cresteMessage > span {
  color: #0f40f5;
}

.createButton {
  width: 163px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background: #0f40f5 100%;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  position: absolute;
  right: 74px;
  bottom: 19px;
}
</style>