<template>
  <div class="pb_content" style="background: #f0f2f5" v-loading="loading">
    <div class="pb_content_body" style="position: relative; margin: 0">
      <div class="right">
        <div class="courseTop">
          <div class="stepsNav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                :to="{
                  path:
                    '/test?userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&org=' +
                    org +
                    '&role=' +
                    role,
                }"
                >表单管理</el-breadcrumb-item
              >
              <el-breadcrumb-item
                v-if="type == 3"
                :to="{
                  path:
                    '/checkToTest2?uid=' +
                    userid2 +
                    '&userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&org=' +
                    org +
                    '&role=' +
                    role,
                }"
              >
                查看表单
              </el-breadcrumb-item>
              <el-breadcrumb-item
                v-else
                :to="{
                  path:
                    '/checkToTest?cid=' +
                    cid +
                    '&userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&org=' +
                    org +
                    '&role=' +
                    role,
                }"
              >
                查看表单
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: rgb(15, 126, 255)">{{ name }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
        </div>
        <div class="step_box">
          <div class="edit_top">
            <div class="op_btn">
              <el-button type="primary" size="small" @click="publish">确定批改</el-button>
            </div>
          </div>
          <topicVue :cJson="cJson" :title="title" :brief="brief" :checktype="2" :see="see" :isTeacher="1" :name="name" ref="topicVue"></topicVue>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topicVue from "../../testStudent/view/component/topic.vue";
export default {
  components: {
    topicVue,
  },
  data() {
    return {
      userid: this.$route.query.userid,
      userid2: this.$route.query.userid2,
      tid: this.$route.query.tid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      cid: this.$route.query.cid,
      type: this.$route.query.type,
      steps: 1,
      title: "",
      brief: "",
      id:"",
      testType: [],
      see: true,
      cJson: [],
      loading: false,
      look: "",
      name: "",
    };
  },
  methods: {
    retrunCourse() {
      if(this.type == 3){
        this.goTo(
        "/checkToTest2?uid=" +
          this.userid2 +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
      );
      }else{
        this.goTo(
        "/checkToTest?cid=" +
          this.cid +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
      );
      }
    },
    goTo(path) {
      this.$router.push(path);
    },

    getData() {
      this.loading = true;
      let params = {
        cid: this.cid,
        tid: this.tid,
      };
      this.ajax
        .get(this.$store.state.api + "getTestWorks2", params)
        .then((res) => {
          // this.cJson = JSON.parse(res.data[0][0].chapters);
          this.$forceUpdate();
          this.title = res.data[0][0].title;
          this.brief = res.data[0][0].brief;

          this.testType = [];
          for (var i = 0; i < res.data[1].length; i++) {
            this.testType.push(res.data[1][i].typeid);
          }
          console.log(this.testType);
          this.look = res.data[0][0].look;

          this.id = res.data[2][0].id
          this.cJson = JSON.parse(res.data[2][0].courseJson);
          this.name = res.data[2][0].username;
          this.loading = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    publish() {
      let cjson = this.$refs['topicVue'].checkArray
      let params = [
        {
          id: this.id,
          cjson: JSON.stringify(cjson),
          type: "3",
          uid:this.userid
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addTestWorksTeacher", params)
        .then((res) => {
          this.$message.success("批改成功");
          this.retrunCourse();
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.pb_content {
  height: 100% !important;
  /* margin: 0 20px 0 20px; */
}

.pb_content_body {
  width: 100% !important;
  height: 100%;
}

.right {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.basic_box {
  margin: 0 auto;
  position: relative;
  padding: 0 20px 0 20px;
}

.courseTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 10px 0;
}

.stepsNav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.step_box {
  width: calc(100%);
  margin: 0 auto;
  height: calc(100% - 38px);
}

.edit_top {
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding: 0 30px;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
}
</style>