<template>
    <div class="choice_box jiao" @click.stop="">
        <!-- <div class="title">设置附件</div> -->
        <div class="box">
            <div class="set_title">
                <span>表单问题：</span>
                <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.title"
                    placeholder=""></textarea>
            </div>
            <div class="set_title">
                <span>问题描述：</span>
                <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.detail"
                    placeholder="请输入描述"></textarea>
            </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)
            },
            deep: true
        }
    },
    methods: {
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s));
        },
        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: "标题",
                detail: "",
            };
        } else {
            this.checkJson = this.depthCopy(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;
}


.set_title > .number{
    display: flex;
    align-items: center;
}

.set_title > .number > span{
    margin: 0 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;
} */
</style>