<template>
    <div>
        <Form :model="formSearch" ref="noticeForm" :rules="rules"  :label-width="85">
            <Row :gutter="20" class="code-row-bg">
                <Col span="24">
                    <Form-item prop="noticeTitle" :label="$t('module.systemNotice.noticeTitle')">
                        <Input type="textarea" rows="1" v-model="formSearch.noticeTitle"></Input>
                    </Form-item>
                </Col>
            </Row>
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                <Form-item prop="noticeType" :label="$t('module.systemNotice.noticeType')">
                    <Select v-model="formSearch.noticeType" size="small" clearable>
                        <Option v-for="item in noticeTypeList" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey">{{ item.vsiValue }}</Option>
                    </Select>
                </Form-item>
                </Col>
                <Col span="12">
                <Form-item :label="$t('module.systemNotice.noticeSource')">
                    <Input v-model="formSearch.noticeSource"></Input>
                </Form-item>
                </Col>           
            </Row>
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                <Form-item prop="noticeTop" :label="$t('module.systemNotice.noticeTop')">
                    <Select v-model="formSearch.noticeTop" size="small">
                        <Option v-for="item in noticeTopList" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey">{{ item.vsiValue }}</Option>
                    </Select>
                </Form-item>
                </Col>
                <Col span="12">
                <Form-item :label="$t('module.systemNotice.noticeOrder')">
                    <Input v-model="formSearch.noticeOrder"></Input>
                </Form-item>
                </Col>
            </Row>
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                <Form-item :label="$t('module.systemNotice.noticeStatus')">
                    <Select v-model="formSearch.noticeStatus" size="small" clearable>
                        <Option v-for="item in noticeStatusList" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey" :disabled="disabled">{{ item.vsiValue }}</Option>
                    </Select>
                </Form-item>
                </Col>
                <Col span="12">
                <Form-item prop="noticeOrgName" :label="$t('common.affiliation')">
                    <Input v-model="formSearch.noticeOrgName" @click.native="getOrgTree()" disabled></Input>
                    <Icon class="getList-icon" @click.native="getOrgTree()"></Icon>              
                </Form-item>
                </Col>
            </Row>
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                    <Form-item prop="effectBegin" :label="$t('module.systemNotice.effectBegin')">
                        <DatePicker type="date" transfer="true" v-model="formSearch.effectBegin" style="width:100%"></DatePicker>
                    </Form-item>
                </Col>
                <Col span="12">
                    <Form-item prop="effectEnd" :label="$t('module.systemNotice.effectEnd')">
                        <DatePicker type="date" transfer="true" v-model="formSearch.effectEnd" style="width:100%"></DatePicker>
                    </Form-item>
                </Col>
            </Row>
            <div style="margin-left: -34px">
                <el-row class="warp">
                    <el-col :span="24" class="warp-main">
                        <el-form ref="infoForm" label-width="120px">
                            <el-form-item :label="$t('module.systemNotice.noticeContent')">
                                <div class="edit_container">
                                    <quill-editor v-model="formSearch.noticeContent" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>    
            <Row :gutter="20" class="code-row-bg">
                <Col span="24">
                    <Form-item :label="$t('module.systemNotice.noticeAttachment')">
                        <Table border ref="attachmentTable" :columns="attachmentColumns" :data="attachmentData"></Table>
                    </Form-item>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<style>
  .info{
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
</style>
<script>
import {quillEditor} from 'vue-quill-editor'; //调用编辑器
import UE from '../../../components/ue/ue.vue';
import Preview from './Preview.vue';
import UploadAttachment from './UploadAttachment.vue';
import GetOrgTree from '../valueSet/GetOrgTree.vue';
export default{
    components:{
        //使用编辑器
        quillEditor,
        UE
    },
    props: {
      obj: {
          type: Object,
          default() {
              return "";
          }
      }
    },
    data(){
        return{
            disabled: true,
            newNoticeId: "",
            noticeTypeList: [],
            noticeTopList: [],
            noticeStatusList: [],
            attachmentData: [],
            formSearch:{
                noticeTitle: "",
                noticeType: "",
                noticeStatus: "",
                noticeTop: "NO",
                noticeOrg: "",
                noticeOrgName: "",
                effectBegin: "",
                effectEnd: "",
                noticeContent: "",
                noticeSource: "",
                noticeOrder: "",
                version: "",
                noticeId: "",
            },
            attachmentColumns: [
                {
                title: this.$t('common.operating'),
                align: "center",
                width: 100,
                fixed: 'left',
                render: (h, params) => {
                    return h("RowTools", {
                    props: {
                        data:[
                                {
                                    type: "text",
                                    // icon: "delete",
                                    text: this.obj.noticeStatus == "PUBLISHED" ? "" : this.$t("common.delete"),
                                    // text: this.$t("common.delete"),
                                    disabled: false,
                                    handle: () => {
                                        this.deleteAttach(params.row);
                                    }
                                },
                            ]
                        }
                    });
                }
                },

                {
                title:"文件名称",
                align: "center",
                width: 250,
                fixed: 'left',
                render: (h, params) => {
                    return h("RowTools", {
                    props: {
                        data:[
                                {
                                    type: "text",
                                    text: !!params.row ? params.row.fileName : "",
                                    disabled: false,
                                    handle: () => {
                                        this.downloadAttach(params.row);
                                    }
                                },
                            ]
                        }
                    });
                  }
                },
                {
                title: '上传人',
                align: "center",
                key: 'createUserName'
                },
                {
                title: '上传时间',
                align: "center",
                key: 'createTime'
                }
            ],
            rules: {
                noticeTitle: [{ required: true, message: this.$t('module.systemNotice.enterNoticeTitle'), trigger: "blur" }],
                noticeType: [{ required: true, message: this.$t('module.systemNotice.selectNoticeType')}],
                effectBegin: [{ required: true, message: this.$t('module.systemNotice.enterBeginDate')}],
                effectEnd: [{ required: true, message: this.$t('module.systemNotice.enterEndDate')}],
                noticeTop: [{ required: true, message: this.$t('module.systemNotice.enterNoticeTop')}],
            },
        }
    },
    computed:{
        editor() {
            return this.$refs.myQuillEditor.quill
        }
    },
    created:function(){
      this.init()
    },
    beforeMount:function(){

    },
    mounted:function(){

    },
    beforeDestroy:function(){

    },
    destroyed:function(){

    },
    methods:{
        //页面初始化
        init(){
            this.$emit("SetPageSize",900);
            this.$emit('SetPageActions', [
                {
                    text: this.$t("common.save"),
                    theme: "primary",
                    icon: "add",
                    handle: this.save,
                },
                {
                    text: this.$t("module.systemNotice.uploadAttachment"),
                    theme: "primary",
                    icon: "add",
                    handle: this.uploadAttachment,
                },
                {
                    text: this.$t("module.systemNotice.preview"),
                    theme: "primary",
                    icon: "add",
                    handle: this.preview,
                },
                {
                    text: this.$t("common.close"),
                    theme: "primary",
                    icon: "add",
                    handle: this.closeWin,
                },
            ]);
            //类型
            $store.dispatch("GetValueSetByCode", {code: 'NOTICE_TYPE'}).then(response => {
                this.noticeTypeList = response.dataResult;
            });
            //是否置顶
            $store.dispatch("GetValueSetByCode", {code: 'YES_NO'}).then(response => {
                this.noticeTopList = response.dataResult;
            });
            //状态
            $store.dispatch("GetValueSetByCode", {code: 'NOTICE_STATUS'}).then(response => {
                this.noticeStatusList = response.dataResult;
            });
            //判断该页面是新增还是编辑，并初始化页面
            if(this.obj != "" ){
                this.$emit("SetTitle", this.$t("module.systemNotice.editNotice"));
                //获取页面信息
                this.getPageInfo();
                this.getNoticeAttachList();
                this.disabled = false;
            }else{
                this.$emit("SetTitle", this.$t("module.systemNotice.createNotice"));
                this.formSearch.noticeStatus = "UNPUBLISHED";
                this.disabled = true;
            }
        },
        //获取编辑页面初始化信息
        getPageInfo(newNoticeId){
            $store.dispatch("GetNoticeInfo", !!newNoticeId ? newNoticeId : this.obj.noticeId).then(response => {
                this.formSearch.effectEnd = response.dataResult.effectEnd;
                this.formSearch.effectBegin = response.dataResult.effectBegin;
                this.formSearch.noticeContent = response.dataResult.noticeContent;
                this.formSearch.noticeOrder = response.dataResult.noticeOrder;
                this.formSearch.noticeOrgName = response.dataResult.noticeOrgName;
                this.formSearch.noticeOrg = response.dataResult.noticeOrg;
                this.formSearch.noticeStatus = response.dataResult.noticeStatus;
                this.formSearch.noticeTitle = response.dataResult.noticeTitle;
                this.formSearch.noticeTop = response.dataResult.noticeTop;
                this.formSearch.noticeType = response.dataResult.noticeType;
                this.formSearch.noticeSource = response.dataResult.noticeSource;
                this.formSearch.version = response.dataResult.version;
                this.formSearch.noticeId = response.dataResult.noticeId;
            });
        },
        //新增、编辑公告
        save(){
            let formSearch = {
                effectEnd:this.formSearch.effectEnd,
                effectBegin:this.formSearch.effectBegin,
                noticeContent:this.formSearch.noticeContent,
                noticeOrder:this.formSearch.noticeOrder,
                noticeOrgName:this.formSearch.noticeOrgName,
                noticeOrg:this.formSearch.noticeOrg,
                noticeStatus:this.formSearch.noticeStatus,
                noticeTitle:this.formSearch.noticeTitle,
                noticeTop:this.formSearch.noticeTop,
                noticeType:this.formSearch.noticeType,
                noticeSource:this.formSearch.noticeSource,
                version:this.formSearch.version,
                noticeId:this.formSearch.noticeId,
            }
            this.$refs["noticeForm"].validate(valid => {
                if(this.formSearch.effectEnd - this.formSearch.effectBegin < 0){
                     this.$Message.error({
                        content: this.$t("module.systemNotice.benginGreaterthanEnd"),
                        duration: 3
                    })
                    return ;
                }
                if(valid){
                    $store.dispatch("CreateSysNotice", formSearch).then(response => {
                        if(response.statusCode == "0"){
                            if(formSearch.noticeId != ""){
                                this.$Message.success({
                                    content: this.$t("common.updateSuccess"),
                                    duration: 3
                                });
                                this.getPageInfo();
                            }else{
                                this.$Message.success({
                                    content: this.$t("common.createSuccess"),
                                    duration: 3
                                });
                                this.newNoticeId = response.dataResult.noticeId;
                                this.getPageInfo(this.newNoticeId);
                            }
                            $channel.$emit("refreshPage")
                        }else{
                            this.$Message.warning({
                                content: response.msg,
                                duration: 3
                            });
                        }
                    })
                }else{
                    this.$Message.error({
                        content: this.$t("common.formValidateFailed"),
                        duration: 3
                    })
                }
            }) 
        },
        //上传附件
        uploadAttachment(){
            if(this.obj.noticeId || this.newNoticeId){
                new this.$pageModal(
                    UploadAttachment,
                    {
                        props:{
                            noticeId: !!this.obj.noticeId ? this.obj.noticeId : this.newNoticeId
                        }
                    },
                    (data) => {
                        this.getNoticeAttachList();
                    }
                )
            }else{
                this.$Message.warning({
                    content: this.$t("module.systemNotice.saveThenUpload"),
                    duration: 3
                })
            }
        },
        //公告预览
        preview(){
            if(this.newNoticeId == "" && this.obj == ""){
                this.$Message.warning({
                        content: this.$t("module.systemNotice.saveThenPreview"),
                        duration: 3
                    });
                return ;
            }
            new this.$pageModal(
                Preview,
                {
                    props: {
                        noticeId: this.obj.noticeId != undefined ? this.obj.noticeId : this.newNoticeId
                    }
                },
                (data) => {

                }
            )
        },
        //关闭窗口
        closeWin(){
            this.$emit("Close")
        },
        //删除公告
        deleteAttach(obj){
            new $confirm(`${this.$t("common.confirmDeletion")}`, this).then(() => {
                $store.dispatch("DeleteAttach", obj).then(response => {
                    if(response.statusCode == "0"){
                        // if(formSearch.noticeId != ""){
                        this.$Message.success({
                            content: this.$t("common.deleteSuccess"),
                            duration: 3
                        });
                        // }
                    //刷新
                    this.getNoticeAttachList();  
                    }else{
                        this.$Message.warning({
                            content: response.msg,
                            duration: 3
                        })
                    }
                })
            })
        },
        downloadAttach(obj){
            this.DownloadFile({
                url: `/sys/notice/attach/download/${obj.attachId}`,
                method: 'get',
            }, this).then(response => {

            })
        },
        //获取组织树
        getOrgTree(){
            new this.$pageModal(
                GetOrgTree,
                {

                },(data) => {
                    if(!!data){
                        this.formSearch.noticeOrgName = data.orgName;
                        this.formSearch.noticeOrg = data.orgId;
                    }else{
                        this.formSearch.noticeOrgName = "";
                        this.formSearch.noticeOrg = "";
                    }
                }
            )
        },
        //获取附件列表
        getNoticeAttachList(){
            $store.dispatch("GetNoticeAttaList", !!this.obj.noticeId ? this.obj.noticeId : this.newNoticeId).then(response => {
                this.attachmentData = response.dataResult;
            }) 
        },
        onEditorReady(editor) {
        },
        getUEContent() {
            let content = this.$refs.ue.getUEContent();
            this.$notify({
            title: '获取成功，可在控制台查看！',
            message: content,
            type: 'success'
            });
            console.log(content)
        }
            
    },
    watch:{

    },
    directives:{

    }
}
</script>

