<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'&&'创建')||(type==='edit'&&'编辑')||(type==='addChild'&&'创建子')}}章节
            </div>
            <div class="modal-box">
                <a-spin :spinning="spinning">
                    <a-form :form="form" @submit="handOK" layout="horizontal">
                        <a-form-item label="所属学段：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                            <!-- <a-select placeholder="请选择" showSearch :filterOption="filterOption" @change="classChange"
                                v-decorator="[
                            'lb',
                            {rules: [{ required: true, message: '此项为必填!' },
                            ]}
                            ]">
                                <a-select-option v-for="(item,index) in [1,2,3,4,5,6]" :key="item" :value="item">
                                    {{item}}</a-select-option>
                            </a-select> -->
                            {{$parent.bookObj.educationCategory}}
                        </a-form-item>
                        <a-form-item label="所属学科：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                            <!-- <a-select placeholder="请选择" showSearch :filterOption="filterOption" @change="classChange"
                                v-decorator="[
                            'aa',
                            {rules: [{ required: true, message: '此项为必填!' },
                            ]}
                            ]">
                                <a-select-option v-for="(item,index) in [1,2,3,4,5,6]" :key="item" :value="item">
                                    {{item}}</a-select-option>
                            </a-select> -->
                            {{$parent.bookObj.discipline}}
                        </a-form-item>
                        <a-form-item label="所属教材：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                            <!-- <a-select placeholder="请选择" showSearch :filterOption="filterOption" @change="classChange"
                                v-decorator="[
                            'aa',
                            {rules: [{ required: true, message: '此项为必填!' },
                            ]}
                            ]">
                                <a-select-option v-for="(item,index) in [1,2,3,4,5,6]" :key="item" :value="item">
                                    {{item}}</a-select-option>
                            </a-select> -->
                            {{$parent.bookObj.name}}
                        </a-form-item>
                        <a-form-item v-if="type!=='edit'" label="父级章节" :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 20 }">
                            <!-- <a-select placeholder="请选择" showSearch :filterOption="filterOption" @change="classChange"
                                v-decorator="[
                            'parentId',
                            ]">
                                <a-select-option v-for="(item,index) in [1,2,3,4,5,6]" :key="item" :value="item">
                                    {{item}}</a-select-option>
                            </a-select> -->
                            {{record.name?record.name:'无'}}
                        </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:type!='addChild'&&record.name?record.name:''}
                             ]" />
                        </a-form-item>
                        <a-form-item label="备注：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                            <Editor v-model="detail" />
                        </a-form-item>
                    </a-form>
                </a-spin>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import Editor from '@/components/Editor.vue'
    import myTips from '@/components/myTips.vue'
    import { ChapterCreate, ChapterUpdate, ChapterGetInfo } from '@/api/api'
    export default {
        components: {
            Editor,
            myTips
        },
        data() {
            return {
                confirmLoading: false,
                spinning: false,
                visible: false,
                form: this.$form.createForm(this),
                type: '',
                record: {},
                detail: '',
            };
        },
        mounted() {

        },
        methods: {
            showModal(type, record) {
                if (type === 'edit') {
                    this.spinning = true;
                    let data = {
                        id: record.id
                    }
                    ChapterGetInfo(data).then(res => {
                        console.log(res, '详情')
                        this.spinning = false;
                        this.detail = res.remark;
                    }).catch(err => {
                        this.spinning = false;
                    })
                }
                this.record = record;
                console.log(record, 'record')
                this.visible = true;
                this.type = type;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = true;
                        console.log(values)
                        let data = {
                            ...values,
                            textBookId: this.$parent.bookObj.id,
                            remark: this.detail
                        }
                        if (this.type === 'add') {
                            console.log('进这了add')
                            ChapterCreate(data).then(res => {
                                this.$message.success('创建成功！')
                                this.confirmLoading = false;
                                this.$parent._ChapterGetList();
                                this.handCancle();
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                        if (this.type === 'edit') {
                            let data = {
                                ...values,
                                remark: this.detail
                            }
                            let params = {
                                id: this.record.id
                            }
                            ChapterUpdate(data, params).then(res => {
                                this.$message.success('修改成功！')
                                this.confirmLoading = false;
                                // this.$parent._ChapterGetList();
                                this.record.name = values.name
                                this.handCancle();
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                        if (this.type === 'addChild') {
                            console.log('进这了addChild')
                            console.log(this.record, 'this.record')
                            let data = {
                                ...values,
                                textBookId: this.$parent.bookObj.id,
                                parentId: this.record.id,
                                remark: this.detail,
                            }
                            ChapterCreate(data).then(res => {
                                this.$message.success('创建成功！')
                                this.confirmLoading = false;
                                console.log(this.record, 'this.record55555')
                                this.$parent.loadChild(this.record, {});
                                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
                );
            },
            handCancle() {
                this.visible = false;
                this.record = {};
                this.detail = '';
            }
        }
    };
</script>
<style scoped>
    .file-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
</style>