<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handCancle" width="700px"
            :maskClosable="false" :destroyOnClose="true" :width="900">
            <div slot="title">
                {{type==='add'?'创建':'编辑'}}题型
            </div>
            <div class="modal-box">
                <a-form :form="form" @submit="handOK" layout="horizontal">
                    <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 label="排序：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input-number :min="0" v-decorator="[
                        'sort',
                        {rules: [{ required: true, message: '此项为必填!' }],
                        initialValue:record.sort
                    }
                        ]" />
                    </a-form-item>
                    <a-form-item label="选择题型分类：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-select placeholder="请选择" style="width: 400px" @change="onChange" v-decorator="[
                        'questionCategory',
                        {rules: [{ required: true, message: '此项为必填!' }],
                        initialValue:record.questionCategory
                    }
                        ]">
                            <a-select-option :value="0">
                                客观题
                            </a-select-option>
                            <a-select-option :value="1">
                                判断题
                            </a-select-option>
                            <a-select-option :value="2">
                                非客观题
                            </a-select-option>
                        </a-select>
                        <template v-if="record.hasOwnProperty('questionCategory')">
                            <div>题型模板：</div>
                            <div class="flex template-box">
                                <ImageView :url="typeArr[record.questionCategory]" />
                            </div>
                            <div>答题卡模板：</div>
                            <div class="flex template-box" v-if="record.hasOwnProperty('questionCategory')">
                                <ImageView v-for="(item,index) in answerSheet[record.questionCategory]" :key="index"
                                    :url="item" />
                            </div>
                        </template>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script>
    const typeArr = [
        require('@/assets/images/questionType/0.png'),
        require('@/assets/images/questionType/1.png'),
        require('@/assets/images/questionType/2.png'),
    ]
    const answerSheet = [
        [
            require('@/assets/images/answerSheet/0-0.png'),
            require('@/assets/images/answerSheet/0-1.png'),
        ],
        [
            require('@/assets/images/answerSheet/1-0.png'),
            require('@/assets/images/answerSheet/1-1.png'),
        ],
        [
            require('@/assets/images/answerSheet/2-0.png'),
            require('@/assets/images/answerSheet/2-1.png'),
            require('@/assets/images/answerSheet/2-2.png'),
            require('@/assets/images/answerSheet/2-3.png'),
            require('@/assets/images/answerSheet/2-4.png'),
        ],
    ]
    import Editor from '@/components/Editor.vue'
    import ImageView from '@/components/ImageView.vue'
    import { CreateQuestionType, UpdateQuestionType } from '@/api/api'
    export default {
        components: {
            Editor,
            ImageView
        },
        data() {
            return {
                typeArr,
                answerSheet,
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                type: '',
                record: {},
                detail: '',
            };
        },
        mounted() {

        },
        methods: {
            showModal(type, record) {
                console.log(record, 'record')
                this.visible = true;
                this.type = type;
                this.record = JSON.parse(JSON.stringify(record));
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log(values)
                        this.confirmLoading = true;
                        if (this.type === 'add') {
                            CreateQuestionType(values).then(res => {
                                this.$store.dispatch('GetQuestionTypeList', true)
                                this.$message.success('创建成功！')
                                this.confirmLoading = false;
                                this.$parent._GetQuestionTypeList();
                                this.handCancle();
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                        if (this.type === 'edit') {
                            let params = {
                                id: this.record.id
                            }
                            UpdateQuestionType(values, params).then(res => {
                                this.$store.dispatch('GetQuestionTypeList', true)
                                this.$message.success('修改成功！')
                                this.confirmLoading = false;
                                this.$parent._GetQuestionTypeList();
                                this.handCancle();
                            }).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
                );
            },
            onChange(val) {
                console.log(val, 'val')
                this.record.questionCategory = val;
            },
            handCancle() {
                console.log('关闭了')
                this.record = {};
                this.visible = false;
            }
        }
    };
</script>
<style scoped>
    .file-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .template-box {
        flex-wrap: wrap;
    }
</style>