<template>

    <div class="markupWrap">

        <div
                class="markupBox wysiwyg"
                v-html="markup.question_text"
        ></div>

    </div>

</template>

<script>

import { isUndefined } from 'lodash';

export default {
    name: "markupWrap",
    components: {

    },
    props: {
        questionId: {
            type: [Number, String],
            default (rawProps) {
                return false;
            }
        },
    },
    computed: {

        markup() {
            return this.getQuestion();
        }

    },
    methods: {

        getQuestion() {

            return this.getQuestionByKey('id', this.questionId);

        },
        getQuestionByKey(key, value, multiple, type) {

            const _this = this;

            if(isUndefined(multiple)) {
                multiple = false;
            }

            if(isUndefined(type)) {
                type = 'questions';
            }


            let question = false,
                    questions = [];


            for (let sIndex in _this.$store.state.assessment.sections) {

                for (let qIndex in _this.$store.state.assessment.sections[sIndex][type]) {

                    let q = _this.$store.state.assessment.sections[sIndex][type][qIndex];

                    if (q.hasOwnProperty(key)) {

                        if (q[key] == value) {
                            question = q;
                            questions.push(q);
                        }

                    }

                }

            }

            return multiple ? questions : question;

        },

    }
}
</script>

<style lang="less">

    @import '@site/css/variables.less';
    @import '@core/css/mixins.less';
    @import '@site/../default/css/base/mixins.less';


    .markupWrap {

        background: #fff;
        padding: 35px;
        border: 1.5px solid var(--border_color_dark);
        border-radius: 10px;
        margin: 0 0 25px;

    }

    .markupBox {

        p {
            margin: 0 0 16px;

            &:last-child {
                margin: 0;
            }
        }

        img {
            position: relative;
            object-fit: contain;
            width: 100%;
            height: 100%;
            max-width: 400px;
        }

    }



</style>
