<template>
    <div class="choice_box jiao" @click.stop="">
        <!-- <div class="title">设置问答题</div> -->
        <div class="box">
            <div class="set_type" style="margin-top: 0;">
                <span>题目类型：</span>
                <el-select v-model="checkJson.type" @change="changeAnswer">
                    <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
                    </el-option>
                </el-select>
            </div>
            <div class="set_type">
                <span>题目分数：</span><el-input v-model="checkJson.score" class="input" placeholder="请输入分数" style="width: 120px"  @change="numberPan"></el-input>
            </div>
            <div class="set_title">
                <span>表单问题：</span>
                <!-- <el-input v-model="checkJson.title" class="input" placeholder="请输入标题"></el-input> -->
                <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.title"
                    placeholder=""></textarea>
                <!-- <editor-bar v-model="checkJson.title" @change="change"></editor-bar> -->
            </div>
            <div class="set_title">
                <span>设置答案：</span>
                <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.answer"
                    placeholder="请输入答案"></textarea>
            </div>
            <!-- <div class="set_options">
                <div class="title">问答题答案：</div>
                <div class="xuan_body">
                    <el-input v-model="checkJson.answer" class="input" placeholder="请输入答案"></el-input>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
import EditorBar from "../../../../../tools/wangEnduit";
export default {
    components: {
        EditorBar,
    },
    props: {
        cJson: {
            type: Object,
        },
    },
    data() {
        return {
            ctype: 1,
            options: [
                { type: 1, name: '问答题' },
                // { type: 2, name: '多选题' }
            ],
            checkJson: {}
        }
    },
    directives: {
        autoHeight: {
            update(el, binding) {
                const { value } = binding
                if (value && typeof value === 'number') {
                    el.style.height = `${value}px`
                } else {
                    el.style.height = 'auto'
                }
            },
            componentUpdated(el) {
                el.style.height = `${el.scrollHeight + 5}px`
            },
        },
    },
    watch: {
        checkJson: {
            handler(newVal) {
                this.$emit("setJson", newVal)
                console.log('gapW', this.cJson);
            },
            deep: true
        }
    },
    methods: {
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s));
        },
        numberPan() {
            if (/[^\d]/.test(this.checkJson.score) || this.checkJson.score < 0) {
                this.$message.error('请输入大于0的数字')
                this.checkJson.score = ''
            }
        },
        changeAnswer() {
            this.checkJson.answer = []
        },
        change(val) {
            this.checkJson.title = val
            this.$forceUpdate();
            console.log(val);
        },

    },
    mounted() {
        console.log(1);
        // console.log(this.cJson);
        if (!this.cJson) {
            this.checkJson = {
                title: "标题",
                type: 1,
                answer: ""
            };
        } else {
            this.checkJson = this.depthCopy(this.cJson);
        }
        console.log('gap', this.cJson);
    },
}
</script>

<style scoped>
.choice_box {
    margin-top: 10px;
    width: 100%;
    background: #f5f6f7;
    padding: 10px 10px 10px 36px;
    box-sizing: border-box;
    position: relative;
}

.choice_box>.box {}

.set_type {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.set_title {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    /* flex-direction: column; */
}

.set_type>span,
.set_title>span {
    min-width: fit-content;
    font-size: 15px;
    min-width: 90px;
    text-align: right;
}

.set_options {
    margin-top: 10px;
}

.set_options>.title {
    font-size: 15px;
}

.xuan_body {
    margin-top: 10px;
    font-size: 14px;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    resize: none;
    font-family: 'Microsoft YaHei';
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1px solid #CAD1DC;
}

.binfo_textarea {
    border: 1px solid #CAD1DC;
    font-size: 16px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: 'Microsoft YaHei';
}

.binfo_input:focus-visible {
    border: 1px solid #3681FC !important;
}

/* .jiao::before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: -20px;
    left: 15px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 10px solid #f6f6f6;
    border-top: 10px solid transparent;
} */
</style>