<template>
    <div class="container-accountability infoManagerAddPage">
        <h3 class="tit">信息简报</h3>
        <el-form
            ref="formData"
            :model="formData"
            :rules="rules"
            label-width="80px"
        >
            <el-row :gutter='20'>
                <el-col :span="8" :offset="4">
                    <el-form-item label="信息标题" prop="title">
                        <el-input v-model="formData.title" placeholder="请输入" clearable :disabled='isShow'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="上报年度" prop='year'>
                        <el-select v-model="formData.year" placeholder="请选择" clearable :disabled='isShow'>
                            <el-option :key="item.index" :label="item" :value="item" v-for="item in dateyear"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter='20'>
                <el-col :span="8" :offset="4">
                    <el-form-item label="填报时间">
                        <el-input v-model="formData.publishTime" placeholder="" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="填报人">
                        <el-input v-model="formData.publishBy" placeholder="" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16" class="vueEditor" :offset="4">
                    <el-form-item label="简报详情" prop='content'>
                         <!-- class="add-text" -->
                        <vue-editor v-model="formData.content" id="editorEle" :editorToolbar="customToolbar" :disabled='isShow'></vue-editor>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="4">
                    <el-form-item label="简报附件" v-if="isShow">
                        <a v-for="(item,index) in formData.fileList" :key="index" :href="`${fileDownload}?id=${item.fileId}`" title="下载" style="display: block;"><span>{{item.fileName}}</span></a>
                    </el-form-item>
                    <el-form-item label="简报附件" v-else>
                        <el-upload
                            ref="upload"
                            :action="file"
                            :on-success="onSuccess"
                            :on-error='onError'
                            :on-remove="handleRemove"
                            multiple
                            :file-list="fileList"
                            :on-preview="handlePreview"
                            :auto-upload="true">
                            <el-button size="small" type="primary" class="button">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-col :span="16" :offset="4" style="text-align: center;">
                <el-button
                    type="primary"
                    size='small'
                    class="iconfont iconbaocun"
                    :loading="loadingSave"
                    @click="saveClick('formData','10')"  
                    v-if="!isShow"
                >保存</el-button>
                <el-button
                    type="primary"
                    size='small'
                    class="iconfont icontijiao"
                    :loading="loadingZc"
                    @click="saveClick('formData','20')"
                    v-if="!isShow"
                >提交</el-button>
                <el-button
                    type="primary"
                    size='small'
                    class="iconfont iconfanhui"
                    @click="goBack"
                >返回</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { file, fileDownload } from "@/api/index.js"
import { addQuillTitle } from "@/utils/quill-title.js"
import { VueEditor } from "vue2-editor";//Quill
import * as validate from "@/utils/validate";
import * as management from "@/api/headResponsibility/infoManager"
export default {
    data() {
        return {
            dateyear: [],
            customToolbar: [
                ["bold", "italic", "underline", "strike"], // toggled buttons
                ["blockquote", "code-block"],
                [{ header: 1 }, { header: 2 }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ script: "sub" }, { script: "super" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ direction: "rtl" }],
                [{ size: ["small", false, "large", "huge"] }],
                ['image']
            ],
            needArr: [],//附件用
            fileList: [],
            file: `${file}`,
            fileDownload: `${fileDownload}`,
            isShow: false,
            formData: {
                ids: '',
                status: '',
                title: '',//主题
                content: '',//内容
                publishTime: '',
                fileId: [],//附件
                year: '',
                publishBy: ''
            },
            rules: {
                year: [
                    { required: true, message: "请选择上报年度", trigger: "blur" }
                ],
                title:[
                    { required: true, message: "请输入信息标题", trigger: "blur" },
                    { validator: validate.validateFive, trigger: "blur" }
                ],
                content: [{ required: true, message: "请输入简报详情", trigger: "blur" }]
            },
            loadingSave: false,//保存用
            loadingZc: false//提交用
        }
    },
    components: {
        VueEditor
    },
    created() {
        var date = new Date()
        this.year = date.getFullYear()
        for (var i = 0; i < 4; i++) {
            this.dateyear.push(this.year)
            this.year = this.year - 1
        }
        this.dateyear.unshift(this.dateyear[0]+1)
        if(this.$route.query.state == 'upDate' || this.$route.query.state == 'show') {//修改和查看
            this.getDetailInfo()
        }else {//新增
            this.formData.year = this.dateyear[1]//上报年度
            this.formData.publishBy = sessionStorage.getItem('userName')//填报人
        }
        if(this.$route.query.state == 'show') {
            this.isShow = true
        }
    },
    mounted(){
        addQuillTitle();
    },
    methods: {
        getDetailInfo() {//根据Id获取信息
            management.seeInfoDetail(this.$route.query.id).then((res) => {
                if(res.infoCode == 200) {
                    this.formData = res.data
                    if(res.data.fileList) {//上传文件的集合（包含文件名和文件id）
                        res.data.fileList.map(item => {
                            this.fileList.push({
                                name: item.fileName,
                                response: {
                                    data: {
                                        id: item.fileId
                                    }
                                }
                            })
                        })
                    }
                    if(res.data.fileId){
                        this.needArr = res.data.fileId
                    }else {
                        this.needArr = []
                    }
                }else {
                    this.$message({
                        type: 'error',
                        message: res.msg,
                        duration: 2000
                    })
                }
            })
        },
        saveClick(formName,type) {//10 保存, 20 提交
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.formData.status = type
                    if(type == 10) {//保存
                        this.loadingSave = true
                    }else {//提交
                        this.loadingZc = true
                    }
                    this.formData.fileId = this.needArr
                    if(this.$route.query.state == 'upDate') {//修改
                        this.formData.ids = this.$route.query.id
                        management.upDateInfo(this.formData).then((res) => {
                            if(res.infoCode == 200) {
                                this.$message({
                                    type: 'success',
                                    message: type == 10 ? '保存成功' : '提交成功',
                                    duration: 2000
                                })
                                this.$router.back(-1)
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: res.msg,
                                    duration: 2000
                                })
                                if(type == 10) {//保存
                                    this.loadingSave = false
                                }else {//提交
                                    this.loadingZc = false
                                }
                            }
                        })
                    }else{//新增
                        management.saveInfo(this.formData).then((res) => {
                            if(res.infoCode == 200) {
                                this.$message({
                                    type: 'success',
                                    message: type == 10 ? '保存成功' : '提交成功',
                                    duration: 2000
                                })
                                this.$router.back(-1)
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: res.msg,
                                    duration: 2000
                                })
                                if(type == 10) {//保存
                                    this.loadingSave = false
                                }else {//提交
                                    this.loadingZc = false
                                }
                            }
                        })
                    }
                } else {
                    return false;
                }
            })
        },
        onSuccess(response, file, fileList) {
            if(response.infoCode == 200) {
                this.needArr.push(response.data.id)
            }else {
                this.$message({
                    message: `${response.msg}`,
                    type: 'error',
                    duration: 2000
                })
            }
        },
        onError(err, file, fileList) {
            this.$message({
                message: "上传失败",
                type: 'error',
                duration: 2000
            })
        },
        handleRemove(file, fileList) {
            let otherArr = []
            fileList.map(item => {
                otherArr.push(item.response.data.id)
            })
            this.needArr = otherArr
        },
        handlePreview(file) {
            window.location.href = `${fileDownload}?id=${file.response.data.id}`
        },
        goBack() {//返回按钮
            this.$router.back(-1);
        }
    }
}
</script>
<style lang="scss">
    .infoManagerAddPage {
        .tit{
            text-align: center;
            margin-bottom: 20px;
        }
        .el-select{
          width: 100%;
        }
        .vueEditor #editorEle .ql-editor {
            height: 210px;
            overflow-y: auto;
        }
        .ql-picker-label::before {
            position: relative;
            top: -10px;
        }
    }
</style>
