<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">
                                <treeselect v-model="form.deptid" :options="deptOptions" :show-count="true"
                                    placeholder="请选择归属部门" @select="doDeptSelect" />
                                <!--
                                <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.userId" :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)">
                        <div  v-if="form.imageUrl.length>0" class="img-list">
                            <div class="img-item" v-for="(it,idx) in form.imageUrl" :key="idx">
                                <i class="el-icon-delete img-item-del" @click="doRemoveImage(idx)"></i>
                        <el-image :src="$basepath + form.imageUrl[idx].url" 
                            :preview-src-list="[$basepath + form.imageUrl[idx].url]"
                            ></el-image>
                        </div>
                        </div>
                        <FileUpload @input="doImageInput" v-model="form.imageUrl" :fileSize="5" :limit="20"
                            :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 { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listMag } from "@/api/base/mag";
export default {
    components: { Treeselect },
    name: 'RuoyiUiMagDetailDrawer',
    dicts: ['base_mag_topic'],
    data() {
        return {
            deptOptions: [],
            isOpen: false,
            oldData: null,
            magList: [],
            deptList: [],
            userList: [],
            form: {
                title: "",
                ord: 0,
                magid: 0,
                topic: "",
                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() {
        this.getDeptTree();
    },

    methods: {
        doRemoveImage(idx){
            this.$confirm('确定删除此图片??', '提示', { type: 'warning' }).then(()=>{
                this.form.imageUrl.splice(idx,1);
            });

        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {                
                let tmps=response.data;
                let objs=response.data[0].children.filter(d=>d.label.indexOf("产业")>=0);
                tmps[0].children=tmps[0].children.filter(d=>d.label.indexOf("分包")==-1 && d.label.indexOf("产业")==-1);                
                if(objs.length>0){
                    let names="产发城投,产发置业,产发投资,产发绿能,产发智能,产发医疗,产业发展部".split(",");
                    objs[0].children=objs[0].children.filter(d=>names.indexOf(d.label)>=0);
                    objs[0].children.forEach(d=>{
                        delete d.children;
                    });
                    tmps=[...objs[0].children,...tmps[0].children];
                }
                this.deptOptions = tmps;
            });
        },
        doImageInput() {
            this.$refs.fiImage.clearValidate()
        },
        doDeptSelect(){
            setTimeout(()=>{
                this.doDeptChange(0);
            },400);
        },
        doDeptChange(init) {
            let param = {
                deptId: this.form.deptid
            }
            //获取人员列表的接口
            this.$api.publics.getUserList(param).then(d => {
                this.userList = (d.rows || []).map(it=>{
                    if(!it.phonenumber){
                        it.phonenumber=it.userId+" --- ";
                    }
                    return it;
                });
                if(init==0){
                    this.form.authorName="";
                    this.form.authorPhone="";
                }else if(init==1){
                    this.form.authorName="";
                    this.form.authorPhone="";
                }
                else if (init==2) {
                    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(2);            
            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.authorName = "";
                this.form.authorPhone = "";
                this.form.deptid = undefined;
                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 : "";
            let user=tmps.length>0?tmps[0]:null;
            let depts=this.deptOptions.filter(d=>d.id== this.form.deptid);
            
            if(user){
                this.form.authorName=user.nickName;
                this.form.authorPhone=user.phonenumber;
                if(user.dept){
                    if(depts.length>0 && depts[0].children &&depts[0].children.length>0){
                        this.form.deptid=user.dept.deptId;
                    }
                }
            }
            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-form-item{
            margin-bottom:18px !important;
        }
    }

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

    .fi-imgs {
        .upload-file-list{
            display: none;
        }        
        .img-list{
            display: block;
            .img-item{
                position: relative;
                display: inline-block;
                margin-right: 8px;
                &:hover{
                    .img-item-del{
                        display: block;
                    }    
                }
                .img-item-del{
                    position: absolute;
                    font-size: 20px;
                    left:50%;
                    top:50%;
                    margin-top:-12px;
                    margin-left:-12px;
                    z-index: 8;
                    color: #1890ff;
                    background-color: #ffffff24;
                    display: none;
                    &:hover{
                        color: #fff;
                    }                    
                }
            }
        }

        .el-image__inner {
            width: 100px;
        }

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

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

        &.form-img-5 {
            .upload-file-uploader {
                display: none;
            }
        }
    }

    .fi-editor {
        .editor.ql-container {
            height: 44vh !important;
        }
    }
}
</style>