<template>
    <div class="mta-tiankong-item">
        <span class="mta-num">填空{{num}}:</span>
        <el-input v-model="inputText"
                  :class="{'showError': showError && data.typeCase === 'geren', 'showSuccess': !showError && data.typeCase === 'geren' || data.typeCase === 'cuoti2'}"
                  @change="inputChange"
                  :readonly="data.typeCase=== 'yulan' || data.typeCase=== 'geren'"
                  :placeholder="`请输入填空${num}答案`"></el-input>
    </div>
</template>

<script>
    import {getStringByHtml} from '@/utils/common.js'

    export default {
        name: "TianKongItem",
        props: {
            data: {
                type: Object,
                require: true
            },
        },
        data() {
            return {
                num: this.data.num,
                inputText: undefined,

            }
        },
        methods: {
            inputChange(val) {
                this.$emit('change', {
                    num: this.num,
                    data: val
                });
                this.$emit('update:result', val);
            }
        },
        watch: {
            data: {
                handler(newVal) {
                    if (this.data.typeCase === 'yulan') {
                        // this.inputText = newVal.answer.join(',');
                        this.inputText = '';
                    } else {
                        this.inputText = newVal.answer
                    }

                },
                immediate: true,
                deep: true
            }
        },
        computed: {
            showError() {
                let status = this.data.result[this.num - 1].indexOf(this.inputText) === -1;
                return status
            }

        }
    }
</script>
