<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handcancle" width="700px"
            :maskClosable="false" :destroyOnClose="true">
            <div slot="title">
                {{type==='add'?'创建':'编辑'}}题型
            </div>
            <div class="modal-box">
                <a-form :form="form" @submit="handOK" layout="horizontal">
                    <a-form-item v-if="type==='add'" label="所属年级" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-select placeholder="请选择所属年级" @change="handleProvinceChange"
                        v-decorator="[
                          'learningSection',
                          {
                            rules: [{ required: true, message: '此项为必填!' },],
                            initialValue: groupObj.gradeId || ''
                          }
                        ]">
                            <a-select-option v-for="item in $store.state.baseInfo.LearningArr" :key="item.type">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item v-if="type==='add'" label="学科" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-select placeholder="请选择学科" :disabled="!currentLearning" 
                        v-decorator="[
                          'disciplineId',
                          {
                            rules: [{ required: true, message: '此项为必填!' },],
                            initialValue: groupObj.id || ''
                          }
                        ]">
                            <a-select-option v-for="v in LearningSection()" :key="v.id">
                                {{ v.name||'' }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="题型名称：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input placeholder="请输入" v-decorator="[
                         'name',
                         {rules: [{ required: true, message: '此项为必填!' },
                         ],initialValue:record.name||''}
                         ]" />
                    </a-form-item>
                    <a-form-item v-if="type==='add'" label="所属试卷题型：" :label-col="{ span: 3 }"
                        :wrapper-col="{ span: 20 }">
                        <a-select placeholder="请选择" showSearch :filterOption="filterOption" @change="classChange"
                            v-decorator="[
                        'questionTypeId',
                        {rules: [{ required: true, message: '此项为必填!' },
                        ]}
                        ]">
                            <a-select-option v-for="item in $store.state.baseInfo.QuestionType" :key="item.id"
                                :value="item.id">
                                {{item.name}}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import { DisciplineQuestionTypeCreate, DisciplineQuestionTypeUpdate } from '@/api/api'
    export default {
        components: {
        },
        data() {
            return {
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                record: {},
                type: '',
                detail: '',
                currentLearning: '',
                groupObj: {}
            };
        },
        mounted() {


        },
        computed: {
            LearningSection() {
                return () => {
                    let arr = this.$store.state.baseInfo.LearningArr.filter(item => item.type == this.currentLearning);
                    if (arr.length > 0) {
                        return arr[0].data
                    } else {
                        return []
                    }
                }
            }
        },
        methods: {
            showModal(type, record = {}) {
                this.visible = true;
                this.type = type;
                if (type == 'add') {
                    this.groupObj = record;
                    this.record = {};
                    this.currentLearning = record.gradeId;
                } else {
                    this.record = record;
                }
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = true;
                        if (this.type === 'add') {
                            DisciplineQuestionTypeCreate(values).then(res => {
                                this.$message.success('创建成功！')
                                this.confirmLoading = false;
                                this.$parent.activeSubject = values.disciplineId;
                                this.$parent.activeSubjectItem = this.$store.state.baseInfo.Subjects.filter(v => v.id == values.disciplineId)[0];
                                this.$parent._DisciplineQuestionTypeGetList();
                                this.visible = false;
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                        if (this.type === 'edit') {
                            let params = {
                                id: this.record.id
                            }
                            DisciplineQuestionTypeUpdate(values, params).then(res => {
                                this.$message.success('修改成功！')
                                this.confirmLoading = false;
                                this.$parent._DisciplineQuestionTypeGetList();
                                this.visible = false;
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                    }
                })
            },
            classChange(value) {
                console.log(value, 'value');
            },
            //select框筛选
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            handleProvinceChange(value) {
                console.log(value)
                this.currentLearning = value;
                this.form.setFieldsValue({
                    disciplineId: ''
                })
            },
            handcancle() {
                this.groupObj = {};
                this.record = {};
                this.visible = false;
            },
            //disciplineFilterOption
        }
    };
</script>
<style scoped>
    .file-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
</style>