<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_title" style="align-items: flex-start;">
                <span>表单问题：</span><textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.title"
                    placeholder="请输入标题"></textarea>
                    <!-- <el-input v-model="checkJson.title" class="input" placeholder="请输入标题"></el-input> -->
            </div>
            <div class="set_title">
                <span>题目分数：</span><el-input v-model="checkJson.score" class="input" placeholder="请输入分数" style="width: 120px" @change="numberPan"></el-input>
            </div>
            <div class="set_options">
                <div class="title">选项内容：</div>
                <div class="xuan_body">
                    <div class="xuan_title">
                        <span class="xuan_1">选项文字</span>
                        <!-- <span class="xuan_2">图片</span> -->
                        <span class="xuan_3">正确答案</span>
                        <!-- <span class="xuan_4">上移下移</span> -->
                    </div>
                    <div v-for="(item, index) in checkJson.array" :key="index" class="xuan_box">
                        <div class="xuan_1">
                            <el-input v-model="item.option" placeholder="请输入选项" size="normal"></el-input>
                            <el-button type="primary" size="mini" @click="addOption2(index)"
                                style="margin-left: 10px;">+</el-button>
                            <el-button type="primary" size="mini" @click="deleteOption(index)">-</el-button>
                        </div>
                        <!-- <div class="xuan_2"><span></span></div> -->
                        <div class="xuan_3"><el-checkbox v-model="checkJson.answer" :label="index"
                                @change="checkChange(index)"></el-checkbox></div>
                        <!-- <div class="xuan_4">
                            <div><span></span><span></span></div>
                        </div> -->
                    </div>
                </div>
                <div class="btn">
                    <el-button type="primary" size="mini" @click="addOption">添加选项</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    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('checkW',this.cJson);
            },
            deep: true
        },
        cJson: {
            handler(newVal) {
                console.log(newVal);
            },
            deep: true
        }
    },
    methods: {
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s));
        },
        changeAnswer() {
            this.checkJson.answer = []
        },
        checkChange(val) {
            if (this.checkJson.type == 1) {
                this.checkJson.answer = [val]
            }
        },
        numberPan() {
            if (/[^\d]/.test(this.checkJson.score) || this.checkJson.score < 0) {
                this.$message.error('请输入大于0的数字')
                this.checkJson.score = ''
            }
        },
        addOption() {
            this.checkJson.array.push({ option: "选项" + (this.checkJson.array.length + 1), img: "" })
        },
        addOption2(index) {
            this.checkJson.array.splice(index+1, 0, { option: "选项", img: "" })
        },
        deleteOption(index) {
            this.checkJson.array.splice(index, 1)
            if (this.checkJson.answer.indexOf(index) != -1) {
                this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1)
            }
        }
    },
    mounted() {
        console.log(1);
        // console.log(this.cJson);
        if (!this.cJson) {
            this.checkJson = {
                title: "标题",
                type: 1,
                array: [
                    { option: "选项1", img: "" },
                    { option: "选项2", img: "" }
                ],
                answer: ""
            };
        } else {
            this.checkJson = this.depthCopy(this.cJson);
        }
        console.log('check',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: center;
}

.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;
}

.xuan_body>.xuan_title {
    display: flex;
    align-items: center;
    background: #e1e1e1;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    justify-content: space-between;
}

.xuan_body>.xuan_box {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    justify-content: space-between;
    margin-top: 10px;
}

.xuan_1 {
    display: flex;
    /* width: calc(100% - 340px); */
    width: calc(100% - 100px);
    align-items: center;
}

.xuan_2 {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xuan_3 {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xuan_3>>>.el-checkbox__label {
    display: none;
}

.xuan_4 {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.set_options>.btn {
    margin-top: 10px;
}

/* .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;
} */

.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;
}
</style>