<template>
    <div>
        <Panel title="通知管理">
            <template slot="buttons">
                <el-button class="blue" @click="pageTable.handleLoad()" icon="el-icon-fa-search">查询</el-button>
                <el-button class="yellow" @click="pageTable.handleReset()" icon="el-icon-fa-reply-all">重置</el-button>
            </template>
            <!-- 查询条件区域 -->
            <el-form label-position="top" :model="pageTable.param" ref="queryform">
                <el-row>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="通知名称" prop="noticeName">
                            <el-select v-model="pageTable.param.noticeName" placeholder="通知名称">
                                <el-option
                                        v-for="item in noticenames"
                                        :key="item.noticename"
                                        :label="item.noticename"
                                        :value="item.noticeclass">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="通知用户" prop="userName">
                            <el-select placeholder="通知用户" v-model="pageTable.param.userName" clearable>
                                <el-option v-for="item in users" :key="item.key" :label="item.label"
                                           :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </Panel>
        <!-- 表格列区域 -->
        <Panel title="通知列表">
            <template slot="buttons">
                <el-button class="green" icon="el-icon-fa-plus" title="新增" @click="doAdd()">新增</el-button>
                <el-button class="red" icon="el-icon-fa-trash" title="删除" @click="doSeleDel()">删除</el-button>
                <el-button class="yellow" icon="el-icon-fa-user-o" title="批量设置通知用户" @click="setSeleNoticeUser()">
                    批量设置通知用户
                </el-button>
            </template>
            <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading"
                      v-loading="pageTable.isLoading" ref="table"
                      element-loading-text="数据加载中" height="calc(100vh - 280px)"
                      @selection-change="selectionChange">
                <el-table-column prop="$rownum" label="NO." width="40" align="center"/>
                <el-table-column type="selection" align='center' width="40"></el-table-column>
                <el-table-column prop="noticename" label="通知名称" show-overflow-tooltip/>
                <el-table-column prop="noticeclass" label="通知实现类" show-overflow-tooltip/>
                <el-table-column prop="noticedesc" label="通知描述" show-overflow-tooltip/>
                <el-table-column prop="lastnoticetime" :formatter="formatterDateTime" label="上次发出通知时间"
                                 show-overflow-tooltip/>
                <el-table-column label="通知人员" width="120">
                    <template slot-scope="scope">
                        <el-button @click="noticeUserMgr(scope.row)" type="warning" icon="el-icon-fa-user-o"
                                   title="设置通知人员" plan>设置通知人员
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="通知状态" width="140">
                    <template slot-scope="scope">
                        <el-switch  :width="40" v-model='scope.row.noticestat' active-text="开启"
                                    inactive-text="关闭" active-color="#13ce66"  active-value="1" inactive-value="0" @change="changeStat(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="optime" label="操作时间" :formatter="formatterDateTime" width="160" show-overflow-tooltip/>
                <el-table-column label="操作" fixed='right' width="120">
                    <template slot-scope="scope">
                        <el-button class="blue" @click="doEdit(scope.row)" icon="el-icon-fa-edit">编辑</el-button>
                        <el-button class="red" @click="doDelete(scope.row)" icon="el-icon-fa-trash">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
            <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr"
                           :total="pageTable.total"/>
        </Panel>

        <el-dialog close-on-press-escape append-to-body v-draggable width="600px" title="通知管理编辑"
                   :visible.sync="edit.visible" :close-on-click-modal="false">
            <div class='dialog-button'>
                <el-button class="blue" plain @click="handleSubmit" icon="el-icon-fa-save">保存</el-button>
            </div>
            <NoticeEdit v-loading="edit.loading" v-if="edit.visible" ref="edit" :uuid="edit.uuid"/>
        </el-dialog>

        <!--        单个通知人员管理-->
        <el-dialog close-on-press-escape append-to-body v-draggable  :width="this.userdialog.dialogwidth" title="通知人员管理"
                   :visible.sync="user.visible" :close-on-click-modal="false" >
            <div class='dialog-button'>
                <el-button class="yellow" plain @click="showNoticeUserInfo" icon="el-icon-fa-bullhorn" v-if="!this.userdialog.dialogbutton">设置人员通知方式</el-button>
                <el-button class="blue" plain @click="handleSubmitUser" icon="el-icon-fa-save" v-if="!this.userdialog.dialogbutton">保存</el-button>
                <el-button class="blue" plain @click="submitNoticesUserInfo" icon="el-icon-fa-save" v-if="this.userdialog.dialogbutton">保存</el-button>
                <el-button class="yellow" plain @click="returnNotice" icon="el-icon-fa-reply" v-if="this.userdialog.dialogbutton">返回</el-button>
            </div>
            <NoticeUser v-loading="user.loading" v-if="user.visible" ref="user" :uuid="user.uuid" />
        </el-dialog>
        <!--        整体通知人员管理-->
        <el-dialog close-on-press-escape append-to-body v-draggable  :width="this.userdialog.dialogwidth" title="通知人员管理"
                   :visible.sync="nuser.visible" :close-on-click-modal="false" >
            <div class='dialog-button'>
                <el-button class="yellow" plain @click="showNoticesUsersInfo" icon="el-icon-fa-bullhorn" v-if="!this.userdialog.dialogbutton">设置人员通知方式</el-button>
                <el-button class="blue" plain @click="submitNoticesUser" icon="el-icon-fa-save" v-if="!this.userdialog.dialogbutton">保存</el-button>
                <el-button class="blue" plain @click="submitNoticesUsersInfo" icon="el-icon-fa-save" v-if="this.userdialog.dialogbutton">保存</el-button>
                <el-button class="yellow" plain @click="returnNotices" icon="el-icon-fa-reply" v-if="this.userdialog.dialogbutton">返回</el-button>
            </div>
            <NoticeUser v-loading="nuser.loading" v-if="nuser.visible" ref="nuser" :uuids="nuser.uuids" />
        </el-dialog>
    </div>
</template>

<script>
    import NoticeApi from "@/api/base/sysm/NoticeApi";
    import PageTable from "@/libs/PageTable";
    import NoticeEdit from "@/module/sysm/NoticeEdit";
    import NoticeUser from "@/module/sysm/NoticeUser";

    export default {
        name: "NoticeMgr",
        components: {NoticeEdit, NoticeUser, NoticeApi, PageTable},
        data() {
            return {
                pageTable: new PageTable({
                    autoLoad: true,
                    doLoad: NoticeApi.doQuery,
                    param: {},
                    log: false
                }),
                userdialog:{
                    dialogwidth:"525px",
                    dialogbutton:false,
                },
                loading: false,
                data: [],
                formData: {},
                users: [],
                selection: [],
                edit: {
                    visible: false,
                    loading: false,
                    uuid: "",
                },
                user: {
                    visible: false,
                    loading: false,
                    uuid: "",
                },
                nuser: {
                    visible: false,
                    loading: false,
                    uuids:[],
                },
                noticenames:[]
            };
        },
        async mounted() {
            await this.getNoticeCodes();
            await this.getUserList();
        },
        methods: {
            validate() {
                return this.$refs["queryform"].validate();
            },
            // 获取人员下拉
            async getUserList(){
                var respuser=[];
                await NoticeApi.getUserList().then(resp=>{
                    respuser = resp.datarows;
                });
                respuser.forEach((user, index) => {
                    this.users.push({
                        label: user.userid,
                        key: user.uuid,
                        value: user.uuid
                    });
                });
            },
            // 批量选中
            selectionChange(selection) {
                this.selection = selection;
            },
            // 批量删除通知
            async doSeleDel() {
                try {
                    if (this.selection.length === 0) {
                        this.$message.warning("请选择数据！");
                        return;
                    }
                    await this.confirm();
                    this.pageTable.isLoading = true;
                    let uuidList = this.selection.map(v => v.uuid);
                    await NoticeApi.doDeletes(uuidList);
                    this.$refs.table.clearSelection();
                    await this.pageTable.handleLoad();
                } finally {
                    this.pageTable.isLoading = false;
                }
            },
            // 新增通知
            doAdd() {
                this.edit.uuid = "";
                this.edit.visible = true;
            },

            doEdit(data) {
                this.edit.visible = true;
                this.edit.uuid = data.uuid;
            },
            // 响应[删除按钮]
            doDelete(data) {
                this.confirm(data).then(this.deleteNotice);
            },
            // 删除通知
            async deleteNotice(data) {
                try {
                    this.loading = true;
                    await NoticeApi.doDelete(data.uuid);
                    await this.pageTable.handleLoad();
                } finally {
                    this.loading = false;
                }
            },
            // 保存通知信息
            async handleSubmit() {
                await this.$refs.edit.submitForm();
                await this.pageTable.handleLoad();
            },
            // 状态更新
            async changeStat(data){
                await this.confirm();
                var params = {};
                params.uuid = data.uuid;
                params.noticeStat = data.noticestat;
                try {
                    await NoticeApi.changeStat(params);
                }finally {
                    await this.pageTable.handleLoad();
                }
            },
            // 批量设置通知用户
            async setSeleNoticeUser() {
                try {
                    this.pageTable.isLoading = true;
                    if (this.selection.length === 0) {
                        this.$message.warning("请选择数据！");
                        return;
                    }
                    let uuidList = this.selection.map(v => v.uuid);
                    this.nuser.uuids = uuidList;
                    this.userdialog.dialogwidth="525px";
                    this.userdialog.dialogbutton=false;
                    this.nuser.visible = true;
                } finally {
                    this.pageTable.isLoading = false;
                }
            },
            // 保存批量通知用户
            async submitNoticesUser(){
                await this.$refs.nuser.submitNoticesUser();
                this.$refs.table.clearSelection();
                await this.pageTable.handleLoad();
            },
            // 保存通知人员方式信息
            async submitNoticesUserInfo(){
                this.userdialog.dialogwidth="525px";
                this.userdialog.dialogbutton=false;
                await this.$refs.user.submitNoticeUserInfo();
            },
            // 批量保存通知人员方式信息
            async submitNoticesUsersInfo(){
                this.userdialog.dialogwidth="525px";
                this.userdialog.dialogbutton=false;
                await this.$refs.nuser.submitNoticesUsersInfo();
            },
            // 通知人员管理
            noticeUserMgr(data){
                this.userdialog.dialogwidth="525px";
                this.userdialog.dialogbutton=false;
                this.user.visible = true;
                this.user.uuid = data.uuid;
            },
            // 通知人员保存
            async handleSubmitUser(){
                await this.$refs.user.submitNoticeUser();
                await this.pageTable.handleLoad();
            },
            // 展示通知用户详细信息
            showNoticeUserInfo(){
                if(this.$refs.user.showNotyiceUserInfo()){
                    this.userdialog.dialogwidth="1200px";
                    this.userdialog.dialogbutton=true;
                }
            },
            // 展示通知用户详细信息
            showNoticesUsersInfo(){
                if(this.$refs.nuser.showNotyiceUserInfo()){
                    this.userdialog.dialogwidth="1200px";
                    this.userdialog.dialogbutton=true;
                }
            },
            // 返回通知人员设置页面
            async returnNotices(){
                this.userdialog.dialogwidth="525px";
                this.userdialog.dialogbutton=false;
                await this.$refs.nuser.closeNotyiceUserInfo();
            },
            // 返回通知人员设置页面
            async returnNotice(){
                this.userdialog.dialogwidth="525px";
                this.userdialog.dialogbutton=false;
                await this.$refs.user.closeNotyiceUserInfoAndQuery();

            },
            // 获取系统通知主题集合
            async getNoticeCodes(){
                await NoticeApi.getNoticeCodes().then(resp=>{
                    this.noticenames = resp.noticeNameList;
                });
            },
        }
    };
</script>

<style scoped>
</style>