<template>
  <div class="home-container">
    <head-bar @back="back">
      <template #title>
        <div class="navTitle">填写问卷</div>
      </template>
    </head-bar>
    <div class="step_box">
      <topicVue :cJson="cJson" :title="title" :brief="brief" ref="topicVue"></topicVue>
    </div>
    <div class="edit_top">
      <div class="op_btn">
        <el-button type="primary" size="small" @click="publish">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getTestCourseDetail } from '@/api/testDetail'
import { addTestWorks } from '@/api/testDetail'
import headBar from '@/components/headBar.vue'
import { mapGetters } from 'vuex'
import topicVue from './components/topic.vue'
export default {
  components: {
    headBar,
    topicVue
  },
  data() {
    return {
      courseid: this.$route.query.courseid,
      title: '',
      brief: '',
      cJson: []
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    back() {
      this.$router.push({ path: '/test' })
    },
    getData() {
      const params = {
        cid: this.courseid
      }
      getTestCourseDetail(params)
        .then(res => {
          this.cJson = JSON.parse(res[0][0].chapters)
          this.title = res[0][0].title
          this.brief = res[0][0].brief
        })
        .catch(err => {
          console.error(err)
        })
    },
    publish() {
      let cjson = this.$refs['topicVue'].checkArray
      const params = [
        {
          uid: this.userinfo.userid,
          cid: this.courseid,
          cjson: JSON.stringify(cjson),
          type: 2
        }
      ]
      addTestWorks(params)
        .then(res => {
          this.$message.success('提交成功')
          this.back()
        })
        .catch(err => {
          console.error(err)
        })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.navTitle {
  font-size: 16px;
  color: #fff;
}
.home-container {
  height: 100vh;
  overflow: hidden;
  .step_box {
    margin-top: 1.5rem;
    width: 100%;
    height: calc(100vh - 1.5rem - 50px);
    overflow: auto;
    position: relative;
  }
  .edit_top {
    width: 100%;
    margin: 0 auto;
    /deep/.el-button {
      width: 100%;
      height: 50px;
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>