<template>
  <div class="page">
    <div class="page__container">
      <el-card class="page__container-body">
        <question-form ref="info" :option="formModel" :remove="true" @modify="doModify" @companyIdChange="companyIdChange" @tagsChange="tagsChange" />
      </el-card>
      <div class="page__container-footer">
        <el-button type="primary" :is-create="true" @click="create">提 交</el-button>
        <el-button @click="back">返 回</el-button>
      </div>
    </div>
    <dialog-modify-rich ref="rich" />
  </div>
</template>

<script>
import QuestionForm from './question-form.vue';
import DialogModifyRich from './dialog-modify-rich';
import { createQuestion } from '@/api/questionBank.js';
import * as authUtils from '@/utils/auth.js';

export default {
    components: {
        QuestionForm,
        DialogModifyRich
    },
    data() {
        return {
            active: 0,
            formModel: {
                id: '',
                topic: '',
                type: 'select',
                tags: '',
                answer: '',
                optionList: []
            },
            companyId: null,
            tagsArr: []
        };
    },
    computed: {
        deviceId() {
            return this.$route.params.deviceId;
        },
        path() {
            return this.$route.path;
        }
    },
    created() {
        const value = authUtils.getSessionStorage(this.path);
        if (value) {
            const model = JSON.parse(value);
            this.formModel.type = model.type;
        }
    },
    methods: {
        doBack() {
            this.$router.go(-1);
        },
        doModify(node) {
            this.$refs.rich.doShow(node);
        },
        companyIdChange(value) {
            this.companyId = value;
        },
        tagsChange(list) {
            this.tagsArr = list;
        },
        create() {
            this.$refs.info.validate().then(valid => {
                if (valid) {
                    // this.formModel.companyId = parseInt(this.companyId);
                    this.formModel.tags = this.tagsArr.join(',');
                    createQuestion(this.formModel).then(resp => {
                        authUtils.setSessionStorage(this.path, JSON.stringify({
                            type: this.formModel.type
                        }));
                        this.doBack();
                    }).catch(error => {
                        this.$message.error(`创建试题失败: ${error.message}`);
                    });
                }
            }).catch(error => { this.$message.warning(error.message); });
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		&__container {
			width: 55%;
			margin: auto;
            padding:20px 0px;
			&-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>
