<template>
    <div class="box">
        <div class="row-box flex-items">
            <div class="row-name">试卷名称：</div>
            <div class="row-content">
                <a-input v-model="examBox.name" placeholder="请输入试卷名称" />
            </div>
        </div>
        <div class="row-box flex-items">
            <div class="row-name">考试时间：</div>
            <div class="row-content flex-items">
                <a-input-number v-model="examBox.examTime" :min="0" />
                <span style="margin-left: 8px;"> / 分钟</span>
            </div>
        </div>
        <div class="row-box flex-items">
            <div class="row-name">总分：</div>
            <div class="row-content">
                <a-input-number v-model="examBox.totalScore" :min="0" />
            </div>
        </div>
        <div class="row-box flex-align">
            <div class="row-name">难度预设：</div>
            <div class="row-content">
                <div class="row-content-item" v-for="item in examBox.difficulty" :key="item.id">
                    <span>{{item.name}} </span>
                    <a-input-number id="inputNumber" v-model="item.proportion" :min="0" :max="100"
                        :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" />
                </div>
            </div>
        </div>
        <div class="row-box flex-items">
            <div class="row-name">选择学科：</div>
            <a-select mode="multiple" v-model="examBox.subjectIds" placeholder="选择学科" style="width:400px">
                <a-select-opt-group v-for="(val,key) in $store.state.baseInfo.SubjectsGroup">
                    <span slot="label">{{key}}</span>
                    <a-select-option :value="v.id" v-for="v in val">
                        {{v.name}}
                    </a-select-option>
                </a-select-opt-group>
            </a-select>
        </div>
        <div class="row-box flex-items">
            <div class="row-name">组卷方式：</div>
            <div class="row-content">
                <a-radio-group v-model="examBox.paperCompositionModel">
                    <a-radio :value="0">
                        章节组卷
                    </a-radio>
                    <a-radio :value="1">
                        知识点组卷
                    </a-radio>
                </a-radio-group>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['examBox'],
        data() {
            return {
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                value: 0,
            };
        },
        mounted() {
            this.$store.dispatch('DisciplineGetList')
            this.$store.dispatch('GetDifficulty')
            console.log(this.$store.state.baseInfo.Difficulty, 'Difficulty')
        },
        methods: {
            showModal(type) {
                console.log(type, 'type')
                this.visible = true;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {

                    }
                })
            },
        }
    };
</script>
<style scoped>
    .box {
        width: 500px;
    }

    .row-box {
        margin-bottom: 24px;
    }

    .row-name {
        width: 100px;
    }

    .row-content {
        width: 400px;
        display: flex;
        flex-wrap: wrap;
    }

    .row-content-item {
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>