<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 v-if="type==3" :to="{
                path:
                  '/testPerson?userid=' +
                  userid +
                  '&oid=' +
                  oid +
                  '&org=' +
                  org +
                  '&role=' +
                  role,
              }">个人中心</el-breadcrumb-item>
              <el-breadcrumb-item v-else :to="{
                path:
                  '/testStudent?userid=' +
                  userid +
                  '&oid=' +
                  oid +
                  '&org=' +
                  org +
                  '&role=' +
                  role,
              }">表单中心</el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: rgb(15, 126, 255)">{{ title }}</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">
            </div>
          </div>
          <topicVue :cJson="cJson" :title="title" :brief="brief" :checktype='2' :see="see"></topicVue>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topicVue from './component/topic.vue';
export default {
  components: {
    topicVue
  },
  data() {
    return {
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      cid: this.$route.query.cid,
      tid: this.$route.query.tid,
      type: this.$route.query.type,
      steps: 1,
      title: "",
      brief: "",
      testType: [],
      see: false,
      cJson: [],
      loading: false,
      look: "",
    }
  },
  methods: {
    retrunCourse() {
      if(this.type == 3){
          this.goTo(
          "/testPerson?userid=" +
            this.userid +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&role=" +
            this.role
        );
      }else{
        this.goTo(
          "/testStudent?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.title = res.data[0][0].title;
          this.brief = res.data[0][0].brief;
          this.see = res.data[0][0].open == 1 ? true : false;
          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.cJson = JSON.parse(res.data[2][0].courseJson)
          this.loading = false
          this.$forceUpdate();

        })
        .catch((err) => {
          console.error(err);
        });
    },
    save(){
      this.$message.success('保存成功')
      this.goTo(
            "/testStudent?userid=" +
            this.userid +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&role=" +
            this.role
          );
    },
    publish(){
      let params = [
        {
          uid: this.userid,
          cid: this.cid,
          cjson: JSON.stringify(this.cJson),
          type:'2',
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addTestWorks", params)
        .then((res) => {
          this.$message.success('提交成功')
          this.goTo(
                "/testStudent?userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&role=" +
                this.role
              );
        })
        .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>
