<template>
  <div class="app-container">
    <div class="level-title">
      <h1>查看问卷数据</h1>
    </div>
    <table class="table-ui">
      <tr>
        <td class="tbg">问卷名称</td>
        <td colspan="3">{{ pd.TITLE }}</td>
      </tr>
      <tr>
        <td class="tbg">开始时间</td>
        <td>{{ pd.BEGIN_TIME }}</td>
        <td class="tbg">结束时间</td>
        <td>{{ pd.END_TIME }}</td>
      </tr>

    </table>

    <div class="study-papg">
      <dl v-for="(question,i) in questionList" :key="i">
        <dt>
          {{ i + 1 }}.
          <span v-if="question.QUESTIONTYPE === '1'" class="mark">(单选题)</span>
          <span v-if="question.QUESTIONTYPE === '2'" class="mark">(多选题)</span>
          <span v-if="question.QUESTIONTYPE === '3'" class="mark">(问答题)</span>
          {{ question.QUESTIONDRY }}
        </dt>
        <div v-if="question.QUESTIONTYPE === '3'" >
          <el-button @click="handleEdit(question.QUESTION_ID)">查看答案</el-button>
        </div>
        <div v-else>
          <dd v-for="(item,j) in question.itemList" :key="j">
            <div >
              {{ j+1 }}.{{ item.OPTIONDES }}
              <label style="color:red;">
                (
                <template v-if="pd.PARTICIPANTCOUNT != 0" sty>
                  {{ numFilter(item.SELECTCOUNT/pd.PARTICIPANTCOUNT*100) }}%
                </template>
                <template v-else>
                  0
                </template>
                )
              </label>
            </div>
          </dd>
        </div>
      </dl>
      <el-dialog :visible.sync="dialogFormAnswer" title="查看答案" width="800px">
        <el-table ref="multipleTable_corp" :row-key="getCorpRowKey" :data="qList" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
          <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="ANSWER" label="答案" />
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAnswer = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button @click="goBack">返 回</el-button>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import dateformat from '@/utils/dateformat.js'
// import Teacher from '../../../archives/corp/components/teacher'
export default {
  components: { Pagination },
  directives: { waves },
  props: {
    paperid: {
      type: String,
      default() {
        return ''
      }
    },
    cascaderdata: {
      type: Array,
      default() {
        return []
      }
    },
    coursewarelist: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      listLoading: true,
      config: config,
      KEYWORDS: '',
      edit: false,
      dialogFormEdit: false,
      qList: [],
      dialogType: 'add',
      dialogFormAnswer: false,
      form: {},
      pd: {
        SURVEY_ID: '', // 课程ID
        TITLE: '', // 试卷名称
        CORPINFO_ID: '',
        QUESTION_ID: '',
        QUESTIONDRY: '',
        QUESTIONTYPE: '',
        OPTIONDES: ''
        // ITEM_ID: ''

      },
      questionList: []
    }
  },
  created() {
    // this.getDict()
    this.getData()
  },
  methods: {
    formatDateTime(pd) {
      return dateformat(pd.EXAMTIME, 'YYYY-MM-DD HH:mm')
    },

    getData() {
      this.listLoading = true
      requestFN(
        '/survey/goInfo',
        {
          SURVEY_ID: this.$parent.SURVEY_ID
        }
      ).then((data) => {
        this.pd = data.pd

        this.questionList = data.questionList
      }).catch((e) => {

      })
    },
    getCorpRowKey(row) {
      return row.QUESTION_ID
    },
    numFilter(value) {
      // 截取当前数据到小数点后两位
      const realVal = parseFloat(value).toFixed(2)
      return realVal
    },
    // 获取数据字典数据
    getDict: function() {
      requestFN(
        '/surveyquestion/getinfo',
        {
          SURVEY_ID: this.$parent.SURVEY_ID
        }
      ).then((data) => {
        console.log(data.itemList)
        this.itemList = data.itemList
      }).catch((e) => {
      })

      requestFN(
        '/survey/goEdit',
        {
          SURVEY_ID: this.$parent.SURVEY_ID
        }
      ).then((data) => {
        this.pd = data.pd
      }).catch((e) => {

      })
    },
    // 修改
    handleEdit(ID) {
      this.getData()
      requestFN(
        '/survey/getinfo',
        {
          QUESTION_ID: ID
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.pd = Object.assign({}, data.pd)
          this.qList = data.itemList
          this.QUESTION_ID = this.pd.QUESTION_ID
        }
        this.dialogType = 'edit'
        // this.form = Object.assign({}, row)
        // this.form.QUESTIONNUMBER = Number(this.form.QUESTIONNUMBER)
        this.dialogFormAnswer = true
      }).catch((e) => {

      })
    },
    goBack() {
      this.$parent.activeName = 'List'
    }
  }
}

</script>
<style scoped>
  .study-papg {
    margin: 30px 0;
    font-size: 14px;
  }
  .study-papg dl dd {
    margin: 11px 0 20px 40px;
  }
</style>
