<template>
  <div class="page">
    <div class="page__container">
      <el-card class="page__container-body">
        <item-options :option-list="optionList" :type="formModel.type" @modify="doModify" />
      </el-card>
    </div>
    <div class="page__container-footer">
      <el-button @click="back">返 回</el-button>
    </div>
    <dialog-modify-rich ref="rich" @update="update" />
  </div>
</template>

<script>
import ItemOptions from './item-options';
import DialogModifyRich from './dialog-modify-rich';
import { getQuestionInfo, getOptionsByQuestionId, updateOption } from '@/api/questionBank.js';

export default {
    components: {
        ItemOptions,
        DialogModifyRich
    },
    data() {
        return {
            formModel: {
                id: '',
                topic: '',
                type: '',
                answer: 0
            },
            optionList: []
        };
    },
    computed: {
        questionId() {
            return this.$route.params.questionId;
        }
    },
    watch: {
        '$router': function() {
            this.loadInitData();
        }
    },
    created() {
        this.loadInitData();
    },
    methods: {
        loadInitData() {
            getQuestionInfo(this.questionId).then(resp => {
                this.formModel = resp.data;
                getOptionsByQuestionId(this.questionId).then(resp => {
                    this.optionList = resp.data;
                });
            });
        },
        doBack() {
            this.$router.go(-1);
        },
        doModify(node) {
            this.$refs.rich.doShow(node);
        },
        update(data) {
            updateOption(data.id, data).then(resp => {
            }).catch(error => {
                this.$message.error(`更新选项失败: ${error.message}`);
            });
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		&__container {
			width: 55%;
			margin: auto;
			&-header {
				margin-bottom: 10px;
				.step-group {
                    margin: 10px 0;
					.box {
						display: flex;
						justify-content: flex-end;
					}
                }
			}

			&-body {
				padding: 40px;
			}

			&-footer {
				margin-top: 20px;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
