<template>
  <div style="padding: 80px;">
    <div class="survey-container" v-if="detail">
      <header class="header">
        <div class="header-title">{{ detail.title }}</div>
        <div class="header-desc">{{ detail.description }}</div>
      </header>
      <div class="group" v-for="(group, index) in fields">
        <div class="group-title">{{ index + 1 }}. {{ group.title }}</div>
        <template v-if="group.type == 3">
          <el-table :data="group.arr">
            <el-table-column prop="option"></el-table-column>
            <el-table-column align="center" width="100" :label="option" v-for="option in options" :key="option">
              <template v-slot="{ row }">
                <el-tooltip effect="light" :content="option" placement="left">
                  <el-radio :label="option" v-model="row.star"></el-radio>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-input v-model="group.area" style="width:50%" v-if="group.type == 1"></el-input>
        <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="group.area" v-if="group.type == 4"></el-input>
      </div>
      <footer class="footer">
        <el-button type="primary" @click="handleSubmit" class="btn">提交</el-button>
      </footer>
    </div>
  </div>
</template>

<script>
import Base64 from 'Base64'
import cAction from '@action'

export default {
  props: {
    sid: { type: String, require: false },
    cid: { type: String, require: false }
  },
  data() {
    return {
      detail: {},
      fields: [],
      options: ['非常不同意', '不同意', '一般', '同意', '非常同意']
    }
  },
  mounted() {
    const orderId = parseInt(this.$route.query.order_id) - 1
    const list = window.QA_LIST?.filter(item => item.course_id === this.cid) || []
    this.detail = list[orderId] || list[0]
    this.fields =
      this.detail?.arr.map(item => {
        if (item.arr && item.arr.length > 1) return item
        return { ...item, area: '' }
      }) || []
  },
  methods: {
    /* 提交数据 */
    handleSubmit() {
      for (const group of this.fields) {
        if (group.arr && group.arr.length) {
          for (const item of group.arr) {
            if (!item.star) {
              this.$message.error('尚有内容未填写，请填写完整每一项')
              return
            }
          }
        } else if (!group.area) {
          this.$message.error('尚有内容未填写，请填写完整每一项')
          return
        }
      }
      cAction.Player.updateSurveyAnswer({
        semester_id: this.sid,
        course_id: this.cid,
        raw: Base64.encode(JSON.stringify(this.fields)),
        order_id: this.$route.query.order_id
      }).then(() => {
        this.$message.success('感谢你的宝贵意见。')
        setTimeout(() => {
          this.$router.push({ path: `/app/learn/course-detail/${this.sid}/${this.cid}` })
        }, 2000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.survey-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  overflow: hidden;
}
.header {
  padding: 10px 0 26px;
  margin-bottom: 16px;
  border-bottom: 1px dashed #ccc;
}
.header-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.header-desc {
  font-size: 15px;
  line-height: 24px;
}
.group {
  padding: 20px 0;
}
.group-title {
  padding-bottom: 10px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  color: #262626;
}
.btn {
  display: block;
  width: 200px;
  margin: 80px auto 20px;
  border-radius: 0;
}
::v-deep .el-radio__label {
  display: none;
}
</style>
