<template>
    <div class="mag_detail_drawer">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="60%" style="padding-left: 20px">
            <template slot="title">
                <div>期刊内容管理</div>
            </template>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="期刊名称" prop="magid">
                                <el-select v-model="form.magid" filterable placeholder="请选择期刊">
                                    <el-option v-for="it in magList" :key="it.id" :label="it.name" :value="it.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="栏目" prop="topic">
                                <el-select v-model="form.topic" filterable placeholder="请选择栏目" clearable>
                                    <el-option v-for="dict in dict.type.base_mag_topic" :key="dict.value"
                                        :label="dict.label" :value="dict.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="单位" prop="deptid">
                                <el-select v-model="form.deptid" filterable placeholder="请选择单位" style="width: 100%;"
                                    @change="doDeptChange()">
                                    <el-option v-for="it in deptList" :key="it.deptId" :label="it.deptName"
                                        :value="it.deptId" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="作者" prop="authorPhone">
                                <el-select v-model="form.authorPhone" filterable placeholder="请选择作者">
                                    <el-option v-for="it in userList" :key="it.phonenumber" :label="it.nickName"
                                        :value="it.phonenumber" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="序号" prop="ord">
                                <el-input-number v-model="form.ord" controls-position="right" :min="0" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title"  maxlength="500"/>
                    </el-form-item>

                    <el-form-item label="期刊主图" ref="fiImage" prop="imageUrl" class="fi-imgs"
                        :class="'form-img-' + (form.imageUrl ? form.imageUrl.length : 0)">
                        <el-image :src="$basepath + form.imageUrl[0].url"
                            :preview-src-list="[$basepath + form.imageUrl[0].url]"
                            v-if="form.imageUrl && form.imageUrl.length > 0"></el-image>
                        <FileUpload @input="doImageInput" v-model="form.imageUrl" :fileSize="5" :limit="1"
                            :fileType="['png', 'jpg', 'jpeg']" />
                    </el-form-item>
                    <el-form-item label="" prop="content" class="fi-editor">
                        <editor v-model="form.content"/>
                    </el-form-item>
                </el-form>
                <div class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="doCancel">取 消</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { listMagDetail, getMagDetail, delMagDetail, addMagDetail, updateMagDetail } from "@/api/base/magDetail";
import { listMag } from "@/api/base/mag";
export default {
    name: 'RuoyiUiMagDetailDrawer',
    dicts: ['base_mag_topic'],
    data() {
        return {
            isOpen: false,
            oldData: null,
            magList: [],
            deptList: [],
            userList: [],
            form: {
                title: "",
                ord: 0,
                magid: 0,
                topic: "1",
                authorPhone: '',
                authorName: '',
                deptid: null,
                imageUrl: [],
                content: '',
                images: ""
            },
            rules: {
                magid: [{ required: true, message: "请选择期刊", trigger: "blur" }],
                topic: [{ required: true, message: "请选择栏目", trigger: "blur" }],
                deptid: [{ required: true, message: "请选择单位", trigger: "blur" }],
                authorPhone: [{ required: true, message: "请选择作者", trigger: "blur" }],
                title: [{ required: true, message: "请输入标题", trigger: "blur" }],
                imageUrl: [{ required: true, trigger: "change", message: "请上传图片" }],
                content: [{ required: true, message: "请输入正文", trigger: "blur" }],
            }
        };
    },

    mounted() {

    },

    methods: {
        doImageInput() {
            this.$refs.fiImage.clearValidate()
        },
        doDeptChange(init) {
            let param = {
                deptId: this.form.deptid
            }
            //获取人员列表的接口
            this.$api.publics.getUserList(param).then(d => {
                this.userList = d.rows || [];
                if (init) {
                    if (this.oldData && this.userList.length > 0) {
                        this.form.authorPhone = this.oldData.authorPhone;
                        this.form.authorName = this.oldData.authorName;
                    }
                }
            });
        },
        loadDepts(init) {
            this.$api.publics.getMyDeptList().then(d => {
                let tmps = d.data || [];
                let finds = tmps.filter(it => it.deptName == "总包单位");
                this.deptList = [];
                if (finds.length > 0) {
                    let dept = finds[0];
                    this.deptList = tmps.filter(it => it.parentId == dept.deptId);
                    if (this.oldData) {
                        this.form.deptid = this.oldData.deptid;
                        this.doDeptChange(init);
                    }
                }
            });
        },
        loadMag() {
            listMag({ pageNum: 1, pageSize: 1000 }).then(d => {
                this.magList = d.rows || [];
                if (this.magList.length > 0) {
                    if (this.oldData == null) {
                        this.form.magid = this.magList[0].id;
                    } else {
                        this.form.magid = this.oldData.magid;
                    }
                }
            });
        },
        show(row, ord) {
            this.oldData = row;
            this.form.ord = ord;
            this.isOpen = true;
            this.loadMag(true);
            this.loadDepts(true);
            if (row) {
                this.form.title = row.title;
                this.form.ord = row.ord;
                this.form.topic = row.topic;
                this.form.imageUrl = this.$tryToJson(row.images).map(d => {
                    return { name: d, url: d };
                })
                this.form.content = row.content;
            }else{
                this.form.title="";
                this.form.magid=0;
                this.form.topic="1";
                this.form.authorPhone="";
                this.form.authorName="";
                this.form.deptId=null;
                this.form.imageUrl=[];
                this.form.content="";
                this.form.images="";
            }
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.doSubmit();
                }
            });
        },
        doSubmit() {
            this.form.images = JSON.stringify(this.form.imageUrl.map(d => d.url));
            let tmps = this.userList.filter(d => d.phonenumber == this.form.authorPhone);
            this.form.authorName = tmps.length > 0 ? tmps[0].nickName : "";
            if (this.oldData && this.oldData.id) {
                this.oldData.magid = this.form.magid;
                this.oldData.topic = this.form.topic;
                this.oldData.deptid = this.form.deptid;
                this.oldData.title = this.form.title;
                this.oldData.authorPhone = this.form.authorPhone;
                this.oldData.authorName = this.form.authorName;
                this.oldData.content = this.form.content;
                this.oldData.images = this.form.images;
                this.oldData.ord = this.form.ord;
                updateMagDetail(this.oldData).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.isOpen = false;
                    this.$emit("success");
                });
            } else {
                addMagDetail(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.isOpen = false;
                    this.$emit("success");
                });
            }
        },
        doCancel() {
            this.isOpen = false;
        }
    },
};
</script>
<style lang="scss">
.mag_detail_drawer {
    .el-drawer__header {
        margin-bottom: 0px;
    }

    .el-drawer__body {
        padding: 12px 24px;
    }

    .el-drawer {
        min-width: 1200px;
    }

    .fi-imgs {
        .el-image__inner {
            width: 100px;
        }

        .upload-file {
            .el-upload__tip {
                margin-top: 0px;
            }

            .upload-file-uploader {
                margin-bottom: 0px;
            }
        }

        &.form-img-1 {
            .upload-file-uploader {
                display: none;
            }
        }
    }
    .fi-editor{
        .editor.ql-container{
            height: 52vh !important;
        }
    }
}
</style>