<template>
  <el-dialog v-dialogDrag :close-on-click-moda="false" :title="title" :visible.sync="show" width="860px" :close-on-click-modal="false" :before-close="doClose">
    <div class="ql-editor" v-html="$escapeHTML(`${form.topic}`)" />
    <template v-if="checkType(form, 'judge')">
      <div class="answer">
        答 案:
        <template v-for="(el,i) in options">
          <span v-if="el.correct" :key="i">{{ el.content }} </span>
        </template>
      </div>

    </template>
    <template v-else-if="checkType(form, 'select')">
      <div v-for="(el,i) in options" :key="i" class="option" :label="$str2number(el.id)">
        <span>{{ $asc2chart(i+65) }}. </span>
        <div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
      </div>
      <div class="answer">
        答 案:
        <template v-for="(el,i) in options">
          <span v-if="el.correct" :key="i">{{ $asc2chart(i+65) }} </span>
        </template>
      </div>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
	data() {
		return {
			show: false,
			form: {
				optionList: []
			}
		};
	},
	computed: {
		title() {
			return '详 情';
		},
		options() {
			return this.form.optionList;
		}
	},
	methods: {
		checkType(option, type) {
			return option.type == type;
		},
		appendIndex(str, index) {
			return `${index+1}. ${str}`;
		},
		doShow(node) {
			this.form = node.row||{};
			this.show = true;
		},
		doClose(done) {
			this.show = false;
		}
	}
};
</script>
<style lang="scss" scoped>
	.option {
		line-height: 22px;
	}

	.answer {
		line-height: 32px;
		padding-left: 0;
		color: #000;
	}
</style>
