<template>
    <div class="choice_box jiao" @click.stop="">
        <!-- <div class="title">设置附件</div> -->
        <div class="box">
            <div class="set_title">
                <span>表单问题</span>
                <el-input v-autoHeight="35" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.title"
                    placeholder=""></el-input>
            </div>
            <div class="set_title">
                <span>问题描述</span>
                <el-input v-autoHeight="35" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.detail"
                    placeholder="请输入描述"></el-input>
            </div>
            <!-- <div class="set_title" style="flex-direction: column;" v-if="false">
                <div class="title_setting">
                    <span>选择课程</span>
                    <div @click="openCourse" class="setting el-icon-plus">
											<span>添加课程</span>
										</div>
                </div>
                <div class="set_title_list" v-loading="loading">
                    <div v-for="(item, index) in courses" class="set_title_list_item" :key="index"
                        v-if="coursesList.find(i => i.courseId == item)">
                        <div class="set_title_list_itemBtn el-icon-remove-outline" @click.stop="delCourse(item)"></div>
                        <div class="set_title_list_itemLabel">
                            <span>课程名称：{{ coursesList.find(i => i.courseId == item) &&
        coursesList.find(i => i.courseId == item).title }}</span>
                            <span>创建人：{{ coursesList.find(i => i.courseId == item) &&
        coursesList.find(i => i.courseId == item).username }}</span>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
        <!-- <courseDilogVue :dialogVisibleCourse.sync="dialogVisibleCourse" :courses="courses" @setCourse="setCourse">
        </courseDilogVue> -->
    </div>
</template>

<script>
import courseDilogVue from './courseDilog.vue'
// import EditorBar from "../../../../../tools/wangEnduit";
export default {
    components: {
        // EditorBar,
        courseDilogVue
    },
    props: {
        cJson: {
            type: Object,
        },
    },
    data() {
        return {
            loading: false,
            ctype: 1,
            options: [
                { type: 1, name: '附件' },
                // { type: 2, name: '多选题' }
            ],
            checkJson: {},
            dialogVisibleCourse: false,
            courses: [],
            coursesList: [],
        }
    },
    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
        },
        async courses(newValue) {
            this.loading = true;
            let result = [];
            let params = {
                cid: this.courses.join(',')
            }
            let data = await this.ajax.get(this.$store.state.api + 'getCourseInfoTestAll', params);
            result = data.data[0]
            this.coursesList = result;
            this.loading = false;
        }
    },
    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);
        },
        openCourse() {
            this.dialogVisibleCourse = true
        },
        setCourse(courses) {
            this.checkJson.courses = courses
            this.courses = courses
            this.$forceUpdate()
        },
        // 删除课程
        delCourse(cid) {
            let index = this.courses.findIndex(i => i == cid);
            this.courses.splice(index, 1)
        }
    },
    mounted() {
        console.log(1);
        // console.log(this.cJson);
        if (!this.cJson) {
            this.checkJson = {
                title: "标题",
                detail: ""
            };
        } else {
            this.checkJson = this.depthCopy(this.cJson);
            this.courses = this.checkJson.courses
        }

    },
}
</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;
		line-height: 35px;
		margin-right: 30px;
}

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

.title_setting{
		width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

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

.setting {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* justify-content: flex-end; */
    width: 100%;
		color:#3681FC;
		margin-left: 30px;
}

.setting>span{
	margin-left: 5px;
}
/* 
.setting::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('../../../../../../assets/icon/test/test_setting_icon.png');
    background-size: 100% 100%;
    margin-right: 5px;
} */

.set_title_list_item {
    display: flex;
    align-items: center;
    width: auto;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 0 20px
}

.set_title_list_item:hover {
    background-color: #d4dde1;
}

.set_title_list_item:hover>.set_title_list_itemBtn {
    opacity: 1;
}

.set_title_list_itemBtn {
    font-size: 18px;
    margin-right: 20px;
    cursor: pointer;
    opacity: 0;
}

.set_title_list_itemLabel {
    display: flex;
    align-items: center;
}

.set_title_list_itemLabel>span {
    margin-right: 20px;
}

.set_title_list {
    min-width: 100%;
    /* min-height: 200px; */
}
</style>