<template>
  <div id="wenjuandetail">
    <el-row>
      <el-col :span="24">
        <el-col class="title" :span="24">{{ form.name }}</el-col>
        <el-col class="question" :span="24" v-for="(item, index) in questions" :key="index">
          <p style="margin:5px 0;">
            {{ index + 1 }}({{ item.type == '0' ? '单选' : item.type == '1' ? '多选' : item.type == '2' ? '问答' : '未识别' }})、{{ item.topic }}
          </p>
          <span v-if="item.type == '0'">
            <el-radio-group v-model="item.answer">
              <el-radio v-for="(i, ri) in item.option" :key="`${index}-${ri}`" :label="i.opname">{{ i.opname }}</el-radio>
            </el-radio-group>
          </span>
          <span v-else-if="item.type == '1'">
            <el-checkbox-group v-model="item.answer">
              <el-checkbox v-for="(i, ci) in item.option" :key="`${index}-${ci}`" :label="i.opname">{{ i.opname }}</el-checkbox>
            </el-checkbox-group>
          </span>
          <span v-else-if="item.type == '2'">
            <el-input v-model="item.answer" placeholder="请输入内容"></el-input>
          </span>
        </el-col>
      </el-col>
      <el-button @click="submit">确认</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'wenjuandetail',
  props: {
    detail: null,
  },
  components: {},
  data: () => ({
    form: {},
    questions: [],
  }),
  created() {},
  computed: {},
  methods: {
    submit() {
      console.log(this.questions);
    },
  },
  watch: {
    detail: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.$set(this, `form`, val);
          let mid = JSON.parse(JSON.stringify(val.question));
          mid = mid.map(i => {
            if (i.type == 1) i.answer = [];
            else i.answer = '';
            return i;
          });
          this.$set(this, `questions`, mid);
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
}
.question {
  font-size: 16px;
}
</style>
