<template>
    <div class="notice_main notice_div">
        <div class="notice_mainLeft">
            <!-- 下拉选择公司 -->
            <!-- <div class="company-select" v-if="companys !== '' && companys.length > 1">
                <el-dropdown
                    trigger="click"
                    @command="selectComPany"
                >
                    <span class="el-dropdown-link">
                        {{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <div v-for="item in companys" :key="item.id">
                            <el-dropdown-item :command="item">{{item.companyName}}</el-dropdown-item>
                        </div>
                    </el-dropdown-menu>
                </el-dropdown>
            </div> -->
            <el-button
                type="primary"
                size="small"
                class="is-circles"
                @click="sendNotice"
                v-privilege="activeMenu + 'SEND'"
            >发公告</el-button>
            <el-tabs v-model="activeName" @tab-click="handleClick" class="right-tabs">
                <el-tab-pane label="未读公告" name="unRead">
                    <span slot="label"><el-badge :is-dot="noticeInfo.list.length > 0" size="mini" class="item"><i class="el-icon-news"></i></el-badge> 未读公告</span>
                    <div style="width: 100%;padding: 5px 15px 0px 15px;position: relative;">
                        <el-table
                            ref="noticeInfo"
                            v-loading="noticeInfo.loading"
                            @filter-change="filterRoleChange"
                            @row-click="nodeClick"
                            border
                            :height="treeHeight"
                            highlight-current-row
                            :data="noticeInfo.list"
                        >
                            <el-table-column
                                prop="title"
                                label="标题"
                                align="center"
                                :filter-method="filterColumn"
                                :show-overflow-tooltip="true"
                                width="100"
                            ></el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="text"
                                label="内容"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="recRole"
                                label="收件角色"
                                align="center"
                                :filter-method="filterColumn"
                            >
                            </el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="sendtime"
                                label="创建时间"
                                align="center"
                                width="120"
                                :filter-method="filterColumn"
                            >
                            </el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="sendor"
                                label="发送人"
                                align="center"
                                width="120"
                                :filter-method="filterColumn"
                            >
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="105"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        class="el-icon-view"
                                        size="mini"
                                        @click="operateRole(scope.row)"
                                        v-privilege="activeMenu + 'QUERY'"
                                    >详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="foot-style">
                            <el-pagination
                                @size-change="pageSizeChange"
                                @current-change="pageCurrentChange"
                                :current-page="noticeTable.tableParams.form.pageNum"
                                :page-sizes="[10, 20, 50, 100, 200]"
                                :page-size="noticeTable.tableParams.form.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="noticeTable.tableParams.page.total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已读" name="hasRead">
                    <span slot="label"><i class="el-icon-time"></i> 公告历史</span>
                    <div style="width: 100%;padding: 5px 5px 0px 15px;position: relative;">
                        <el-table
                            ref="noticeInfo2"
                            v-loading="noticeInfo.loading2"
                            @filter-change="filterRoleChange2"
                            @row-click="nodeClick"
                            border
                            :height="treeHeight"
                            highlight-current-row
                            :data="noticeInfo.hasReadList"
                        >
                            <el-table-column
                                prop="title"
                                label="标题"
                                align="center"
                                :filter-method="filterColumn"
                                :show-overflow-tooltip="true"
                                width="100"
                            ></el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="text"
                                label="内容"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="recRole"
                                label="收件角色"
                                align="center"
                                :filter-method="filterColumn"
                            >
                            </el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="sendtime"
                                label="创建时间"
                                align="center"
                                width="120"
                                :filter-method="filterColumn"
                            >
                            </el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="sendor"
                                label="发送人"
                                align="center"
                                width="120"
                                :filter-method="filterColumn"
                            >
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="105"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        class="el-icon-view"
                                        size="mini"
                                        @click="operateRole(scope.row)"
                                        v-privilege="activeMenu + 'QUERY'"
                                    >详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="foot-style">
                            <el-pagination
                                @size-change="pageSizeChange2"
                                @current-change="pageCurrentChange2"
                                :current-page="noticeTable.tableParams2.form.pageNum"
                                :page-sizes="[10, 20, 50, 100, 200]"
                                :page-size="noticeTable.tableParams2.form.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="noticeTable.tableParams2.page.total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog
            :visible.sync="sendDialogVisible"
            width="55%"
            style="margin-top: 5px;"
            :before-close="handleCloseOfSend"
        >
            <div slot="title" class="dialog-footer">
                <i class="el-icon-edit"></i>
                <span>发送公告</span>
            </div>
            <div class="notice_mainRight notice-tranfer">
                <div>
                    <span>标题</span>
                    <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入标题"
                        resize="none"
                        v-model="areaObject.title">
                    </el-input>
                    <span>内容</span>
                    <el-input
                        type="textarea"
                        :rows="8"
                        placeholder="请输入内容"
                        resize="none"
                        v-model="areaObject.text">
                    </el-input>
                </div>
                <!-- 选择角色部分 -->
                <div>
                    <span>选择收件角色</span>
                    <el-transfer
                        :titles="['所有角色', '已选角色']"
                        filterable
                        :filter-method="filterMethod"
                        filter-placeholder="请输入角色"
                        v-model="reseveValue"
                        :data="data"
                        v-loading="transferLoading">
                    </el-transfer>
                </div>
                <div class="save">
                    <el-button
                        size="mini"
                        type="primary"
                        :loading="saveLoading"
                        @click="noticeSend"
                    >发送</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            :visible.sync="dialogVisible"
            width="55%"
            :before-close="handleClose"
        >
            <div slot="title" class="dialog-footer">
                <i class="el-icon-edit-outline"></i>
                <span>公告详情</span>
            </div>
            <div class="dialog-main">
                <div class="title-main">
                    <h3 class="dialog-title">{{noticeRow.title}}</h3>
                </div>
                <div class="dialog-createTime">
                    <span>创建时间：{{noticeRow.sendtime}}</span>
                </div>
                <div class="dialog-content">
                    <p>
                        {{noticeRow.text}}
                    </p>
                </div>
                <div class="dialog-roles">
                    <span>接收角色：{{noticeRow.recRole}}</span>
                </div>
                <div class="dialog-sendor">
                    <span>发送人：{{noticeRow.sendor}}</span>
                </div>
                <div class="dialog-users">
                    <span>接收用户：{{noticeRow.recUser}}</span>
                </div>
            </div>
        </el-dialog>
        <div v-if="readshowflag" id="marsk">
            <div class="cover">
            </div>
            <div :class="[readshowflag?'read-Content1':'read-Content2']">
                <div class="sui-slider-title">
                    <h2>
                        <span class="sui-slider-title-text">查看已读公告</span>
                    </h2>
                    <span class="sui-icons sui-icons-close sui-slider-title-x title-close" @click="close"></span>
                </div>
                <div>
                    <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                        一致性 Consistency
                        <i class="header-icon el-icon-info"></i>
                        </template>
                        <div>发送人：xx总经理  <span class="send-time">发送时间： 2020-3-5</span></div>
                        <div>内容：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                        <div>接收角色：超级管理员。</div>
                    </el-collapse-item>
                    <el-collapse-item title="反馈 Feedback">
                        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                    </el-collapse-item>
                    <el-collapse-item title="效率 Efficiency">
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                    </el-collapse-item>
                    <el-collapse-item title="可控 Controllability">
                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import store from '@/store/index.js';
import { checkCharLength, checkCharLength2, checkCharNoChinese, checkChar } from '@/utils/validator.js';
import {  getCookie } from '@/utils/util.js';
import { dgTree, objAssign } from '@/utils/util.js';
import { setTimeout, clearTimeout } from 'timers';
export default {
    components: {
    },
    data () {
        return {
            activeMenu: '', //菜单id
            companys: [], // 用户公司列表
            companyId: '', // 选择公司Id
            companyName: '', // 选择公司名称
            activeName: 'unRead',
            store,
            saveLoading: false,
            treeHeight: 600,
            //  角色
            noticeInfo: {
                loading: false,
                loading2: false,
                list: [],
                hasReadList: [],
                item: {},
                //  默认配置数据对应项
                defaultProps: {
                    children: 'children',
                    label: 'roleName'
                },
                //  默认展开的ID数组
                expandedKeys: []
            },
            filterText: '',
            // 用户列表
            noticeTable: {
                height: 600,
                loading: false,
                list: [],
                listBack: [],
                //  选中项
                items: [],
                item: {},
                tableParams: {
                    form: {
                        companyId: '',
                        pageNum: 1,
                        pageSize: 20
                    },
                    //  返回分页数据
                    page: {
                        total: 0
                    }
                },
                tableParams2: {
                    form: {
                        companyId: '',
                        pageNum: 1,
                        pageSize: 20
                    },
                    //  返回分页数据
                    page: {
                        total: 0
                    }
                }
            },
            tableParams: {
                form: {
                    orgCode: '',
                    orgName: '',
                    pageNum: 1,
                    pageSize: 20,
                    companyId: ''
                },
                //  返回分页数据
                page: {
                    total: 0
                }
            },
            multipleSelection: [],
            areaObject: {
                title: '',
                text: ''
            },
            data: [],
            reseveValue: [],
            filterMethod(query, item) {
                if (item.pinyin && item.pinyin !== '') {
                    return item.pinyin.indexOf(query) > -1;
                }
            },
            resultUserList: [], // 返回的用户数组
            readshowflag: false,
            dialogVisible: false,
            noticeRow: {}, // 公告详情对象
            userMap: {}, // 用户列表
            roleMap: {}, // 角色列表
            sendDialogVisible: false, // 发送公告弹窗
            transferLoading: false
        }
    },
    created () {
        this.activeMenu = window.top.localStorage.getItem('activeMenu');
    },
    computed: {
        // transferHeight: function () {
        //     // return window.innerHeight - 335
        //     return 400;
        // }
    },
    mounted () {
        // 获取当前用户
        this.userId = JSON.parse(getCookie('userInfo')).id;
        // 获取公司信息
        this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
        this.companyId = window.top.localStorage.getItem('companyId');
        if (this.companyId !== '' && this.companyId !== null) {
            this.companyName = this.companys.find((x) => x.id === this.companyId).companyName;
        }
        this.noticeTable.tableParams.form.companyId = this.companyId;
        this.noticeTable.tableParams2.form.companyId = this.companyId;
        this.initData();
        this.$nextTick(() => {
            //  设置树区域高度
            this.treeHeight = this.getRoleHeight(this.$refs['noticeInfo'].$el) - 130;
        });
        $(document).mousedown(function(event) {
            if (event.target.className === 'cover') {
                this.readshowflag = false
                $('#marsk').hide()
            }
        })
    },
    watch: {
        filterText (val) {
            this.$refs.noticeInfo.filter(val);
        },
        'noticeTable.tableParams.page.total': {
            immediate: false,
            handler: function () {
                this.$emit('updateMessageNum');
            }
        }
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        generateData (list) {
            const data = [];
            const cities = list;
            const pinyin = [];
            list.forEach(item => {
                pinyin.push(item.roleName)
            })
            cities.forEach((role, index) => {
                data.push({
                    label: role.roleName,
                    key: role.id,
                    pinyin: pinyin[index],
                    item: role
                });
            });
            this.data = data;
            this.transferLoading = false;
        },
        //  init
        async initData () {
            this.noticeInfo.loading = true;
            this.noticeInfo.loading2 = true;
            //  取角色数据
            await this.getRoles();
            this.axios.get('pass/v1/sysusers/?pageSize=1000000').then((res) => {
                if (res.code === '0') {
                    res.data.list.forEach((item, index) => {
                        this.userMap[item.id] = item;
                    });
                    // 获取公告表格数据
                    this.getNotice('0');
                    // 获取已读
                    this.getNotice('1');
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        // 每条页数
        pageSizeChange (pageSize) {
            this.noticeTable.tableParams.form.pageSize = pageSize;
            this.getNotice(0);
        },
        //当前页
        pageCurrentChange (pageNum) {
            this.noticeTable.tableParams.form.pageNum = pageNum;
            this.getNotice(0);
        },
        // 每条页数
        pageSizeChange2 (pageSize) {
            this.noticeTable.tableParams2.form.pageSize = pageSize;
            this.getNotice(1);
        },
        //当前页
        pageCurrentChange2 (pageNum) {
            this.noticeTable.tableParams2.form.pageNum = pageNum;
            this.getNotice(1);
        },
        //  角色table点击
        nodeClick (item) {
            let that = this;
        },
        //  保存配置
        noticeSend () {
            let _this = this
            _this.saveLoading = true;
            _this.$msgbox({
                title: '消息',
                message: '确定发送吗？',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                    let form = {
                        sendor: _this.userId,
                        title: _this.areaObject.title,
                        text: _this.areaObject.text,
                        recRoleIds: _this.reseveValue
                    }
                    instance.confirmButtonLoading = true;
                    _this.axios.post('pass/v1/sysnotices/', form, {individualType:'json'}).then(function (response) {
                        if (response.succeed === true) {
                            _this.$message.success('发送成功')
                            _this.areaObject.title = '';
                            _this.areaObject.text = '';
                            _this.reseveValue = [];
                            _this.saveLoading = false;
                            instance.confirmButtonLoading = false;
                            done();
                            _this.sendDialogVisible = false;
                            _this.getNotice('0');
                            _this.getNotice('1');
                        } else {
                            _this.$message.error(response.message);
                            instance.confirmButtonLoading = false;
                            _this.saveLoading = false;
                        }
                    }).catch(function (err) {
                        console.log(err)
                    })
                } else {
                    done();
                    _this.saveLoading = false;
                }
                }
            })
        },
        //  取角色树
        getRoles () {
            this.transferLoading = true;
            this.store.dispatch('system/rolesManage/list', { companyId: this.companyId}).then(res => {
                if (res.code === '0') {
                    this.resultUserList = res.data;
                    this.$nextTick(() => {
                        this.generateData(this.resultUserList)
                    })
                    res.data.forEach((item, index) => {
                        this.roleMap[item.id] = item;
                    });
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        // 下拉选择公司
        selectComPany (command) {
            this.companyId = command.id;
            this.companyName = command.companyName;
            this.noticeTable.tableParams.form.companyId = this.companyId;
            this.noticeTable.tableParams2.form.companyId = this.companyId;
            this.getRoles();
        },
        filterRoleChange (filters) {
            let _this = this;
            _this.setFilterDatas(_this.$refs.noticeInfo.columns, _this.$refs.noticeInfo.tableData, ['title', 'recRole', 'sendtime', 'sendor']);
        },
        filterRoleChange2 (filters) {
            let _this = this;
            _this.setFilterDatas(_this.$refs.noticeInfo2.columns, _this.$refs.noticeInfo2.tableData, ['title', 'recRole', 'sendtime', 'sendor']);
        },
        handleSelectionChange (val) {
            this.multipleSelection = val;
        },
        readContent () {
            this.readshowflag = true
            $('#marsk').show()
        },
        close () {
            this.readshowflag = false
            $('#marsk').hide()
        },
        //  取公告列表
        getNotice (status) {
            let that = this;
            let form = {};
            if (status === '0') {
                that.noticeInfo.loading = true;
            } else {
                that.noticeInfo.loading2 = true;
            }
            form = {
                status: status,
                pageNum: status === '0' ? this.noticeTable.tableParams.form.pageNum : this.noticeTable.tableParams2.form.pageNum,
                pageSize: status === '0' ? this.noticeTable.tableParams.form.pageSize : this.noticeTable.tableParams2.form.pageSize,
                companyId: this.companyId
            },
            this.axios.get('pass/v1/sysnotices/getUserNoticelike?status='+form.status + '&pageNum=' + form.pageNum + '&pageSize=' + form.pageSize + '&companyId=' + form.companyId).then(res => {
                if (res.code === '0') {
                    if (status === '0') {
                        that.noticeInfo.list = res.data.list;
                        that.noticeInfo.list.forEach(item => {
                            let roleList = [];
                            let userList = [];
                            // 获取角色名
                            if (item.noticeReceivers && item.noticeReceivers.length > 0) {
                                item.noticeReceivers.forEach(sitem => {
                                    try {
                                        if (sitem.roleId && sitem.roleId !== null && sitem.roleId !== '') {
                                            let roleName = that.roleMap[sitem.roleId].roleName ? that.roleMap[sitem.roleId].roleName : sitem.roleId;
                                            roleList.push(roleName);
                                        }
                                        if (sitem.userId && sitem.userId !== null && sitem.userId !== '') {
                                            let userName = that.userMap[sitem.userId].userName ? that.userMap[sitem.userId].userName : sitem.userId;
                                            userList.push(userName);
                                        }
                                    } catch (err) {
                                        console.log ('错误对象:' + sitem);
                                    }
                                })
                                item['recRole'] = roleList.join(',');
                                item['recUser'] = userList.join(',');
                            }
                            // 获取用户名
                            try {
                                item.sendor = that.userMap[item.sendor].userName ? that.userMap[item.sendor].userName : item.sendor;
                            } catch (err) {
                                console.log(item);
                                console.log (err + '错误用户id:' + item.sendor);
                            }
                        })
                        that.noticeInfo.loading = false;
                        that.setFilterDatas(that.$refs.noticeInfo.columns, that.noticeInfo.list, ['title', 'recRole', 'sendtime', 'sendor']);
                        that.noticeTable.tableParams.page.total = res.data.total;
                    } else {
                        that.noticeInfo.hasReadList = res.data.list;
                        that.noticeInfo.hasReadList.forEach(item => {
                            let roleList = [];
                            let userList = [];
                            // 获取角色名
                            if (item.noticeReceivers && item.noticeReceivers.length > 0) {
                                item.noticeReceivers.forEach(sitem => {
                                    try {
                                        if (sitem.roleId && sitem.roleId !== null && sitem.roleId !== '') {
                                            let roleName = that.roleMap[sitem.roleId].roleName ? that.roleMap[sitem.roleId].roleName : sitem.roleId;
                                            roleList.push(roleName);
                                        }
                                        if (sitem.userId && sitem.userId !== null && sitem.userId !== '') {
                                            let userName = that.userMap[sitem.userId].userName ? that.userMap[sitem.userId].userName : sitem.userId;
                                            userList.push(userName);
                                        }
                                    } catch (err) {
                                        console.log ('错误对象:' + sitem);
                                    }
                                })
                                item['recRole'] = roleList.join(',');
                                item['recUser'] = userList.join(',');
                            }
                            // 获取用户名
                            try {
                                item.sendor = that.userMap[item.sendor].userName ? that.userMap[item.sendor].userName : item.sendor;
                            } catch (err) {
                                console.log(item);
                                console.log (err + '错误用户id:' + item.sendor);
                            }
                        })
                        that.noticeInfo.loading2 = false;
                        that.setFilterDatas(that.$refs.noticeInfo2.columns, that.noticeInfo.hasReadList, ['title', 'recRole', 'sendtime', 'sendor']);
                        that.noticeTable.tableParams2.page.total = res.data.total;
                    }
                } else {
                    if (status === '0') {
                        that.$message.error(res.message);
                        that.noticeTable.tableParams.form.pageNum = 1;
                        that.noticeTable.tableParams.page.total = 0;
                    } else {
                        that.$message.error(res.message);
                        that.noticeTable.tableParams2.form.pageNum = 1;
                        that.noticeTable.tableParams2.page.total = 0;
                    }
                }
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
                if (this.activeName === 'unRead') {
                    this.noticeInfo.list.forEach((item, index) => {
                        if (this.noticeRow.id === item.id) {
                            this.noticeInfo.list.splice(index, 1);
                            this.noticeTable.tableParams.page.total -= 1;
                            this.noticeInfo.hasReadList.unshift(item);
                            this.noticeTable.tableParams2.page.total += 1;
                        }
                    })
                }
            })
            .catch((err) => {
                console.log(err);
            });
        },
        // 打开公告发送页面
        sendNotice () {
            this.sendDialogVisible = true;
        },
        // 发送公告弹窗关闭
        handleCloseOfSend (done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch((err) => {
                console.log(err);
            });
        },
        // 公告详情
        operateRole (row) {
            this.dialogVisible = true
            this.noticeRow = row;
            this.axios.get('pass/v1/sysnotices/' + row.id).then((res) => {
                if (res.code === '0') {
                    // this.noticeRow = res.data;
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                console.log(err);
            })
        }
    }
}
</script>

<style lang="less" scoped>
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(1000px,0); 
        transform: stranslate(1000px,0); 
    }
    100% {
        opacity:1;
        -webkit-transform: translate(10px,0); 
        transform: stranslate(10px,0); 
    }
}
 
@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;
       -webkit-transform: translate(1000px,0); 
        transform: stranslate(1000px,0);
    }
    100% {
        opacity:1;
        -webkit-transform: translate(10px,0); 
        transform: stranslate(10px,0); 
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 1;
        -webkit-transform: stranslateX(100%); 
        transform: stranslateX(100%); 
    }
    100% {
        opacity:0;
        -webkit-transform: stranslateX(0%); 
        transform: stranslateX(0%); 
    }
}
 
@-webkit-keyframes fadeInLeft {
    0% {
        opacity:1;
       -webkit-transform: stranslateX(100%); 
        transform: stranslateX(100%); 
    }
    100% {
        opacity:0;
        -webkit-transform: stranslateX(0%); 
        transform: stranslateX(0%);
    }
}
.notice_div {
    overflow: hidden;
    height: 100%;
    width:100%;
    min-width: 1231px;
    /deep/ .right-tabs {
        .el-tabs__content {
            overflow: hidden !important;
        }
        .el-tabs__item {
            font-size: 16px;
            height: 42px;
            line-height: 42px;
        }
        .el-tabs__nav-scroll {
            padding-left: 20px;
        }
        .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: rgb(213, 213, 213);
        }
        .el-tabs__active-bar {
            height: 1px;
        }
        .el-tabs__nav {
            margin-left: 0px;
        }
        .el-badge__content.is-fixed.is-dot {
            right: 8px;
            top: 16px;
        }
    }
    /deep/ .notice-tranfer {
        .el-transfer-panel {
            width: 44% !important;
            margin-left: 0px;
        }
        .el-transfer-panel__body {
            height: 340px;
        }
        .el-transfer-panel__list.is-filterable {
            height: 330px;
            padding-top: 0;
        }
        .el-transfer__buttons {
            display: inline-block;
            vertical-align: middle;
            padding: 0 10px;
            width: 12%;
            height: 100%;
        }
        .el-transfer__button:first-child {
                display: block;
                padding: 10px;
                border-radius: 50%;
                font-size: 0;
                position: absolute;
                left: 47.8%;
                margin: -50px 0;
        }
        .el-button+.el-button {
            display: block;
            padding: 10px;
            border-radius: 50%;
            font-size: 0;
            position: absolute;
            left: 47.8%;
            margin: 0px 0;
        }
    }
    .company-select {
        position: absolute;
        top: 12px;
        right: 120px;
        margin-bottom: 5px;
        z-index: 1999;
        .el-dropdown {
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
        }
    }
    //  保存
    .notice_mainRight {
        // width: 50%;
        // float: left;
        // border-right: 1px solid #e0e0e0;
        position: relative;
        height: inherit;
        .save {
            position: absolute;
            right: 0px;
            top: -9px;
            z-index: 100;
        }
    }
}
.foot-style {
    margin: 5px 0 0;
    text-align: right;
}

.notice_mainLeft {
    width: 100%;
    // float: left;
    overflow-x: hidden;
    height: inherit;
}
/deep/.el-dialog {
    margin-top: 5vh !important;
}

.mainRigh-function {
    padding: 13px 0 15px 20px;
    text-align: left;
    border-bottom: 1px solid #d5d5d5;
    position: relative;
}

#pane-userList {
    padding: 10px;
}
.el-tree-node__content .el-icon-plus,
.el-tree-node__content .el-icon-edit {
    margin-right: 15px;
}
.el-select {
    width: 100%;
}
.sl-content-main {
    overflow: hidden;
}
.el-checkbox+.el-checkbox {
    margin-left: 0px;
}
.is-circles {
    z-index: 1999;
    position: absolute;
    top: 6px;
    right: 15px;
}
.cover {
    width: 100%;
    height: 100%;
    z-index: 199;
    background-color: rgba(221, 221, 221, .15);
    position:absolute;
}
.read-Content1 {
    width: 500px;
    height: 100%;
    position:absolute;
    z-index: 299;
    right: 0px;
    box-shadow: #333333 0px 0px 8px;
    background-color: #ffffff;
    overflow: auto;
    -webkit-animation:'fadeInRight' 0.3s 1;
}
.read-Content2 {
    width: 500px;
    height: 100%;
    position:absolute;
    z-index: 299;
    right: 0px;
    box-shadow: #333333 0px 0px 8px;
    background-color: #ffffff;
    overflow: auto;
    -webkit-animation:'fadeInLeft' 0.3s 1;
}
.sui-slider-title {
    position: relative;
    background-color: #f5f5f5;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
}
.sui-slider-title-text {
    display: inline-block;
    padding-left: 5px;
}
.sui-slider-title > h2 {
    padding-left: 30px;
    padding-top: 20px;
    font-size: 16px;
    color: #333;
    text-align: left;
}
.dialog-footer {
    text-align: left;
    font-size: 14px;
    font-weight: 700
}
.dialog-footer i {
    color: #45A4F9;
    font-size: 16px
}
/deep/ .el-dialog__header {
    padding: 20px 20px 10px!important;
}
.dialog-main {
    width: 95%;
    margin: 0 auto;
    .title-main {
        border-bottom: 3px solid #ccc;
        .dialog-title {
            font-size: 18px;
            color: #000;
            text-align: center;
            padding: 7px;
        }
    }
    .dialog-createTime {
        overflow: hidden;
        span{
            display: block;
            float:right;
        }
    }
    .dialog-content {
        border-bottom: 3px solid #ccc;
        min-height: 200px;
        p{
            text-indent: 2em;
            font-size: 16px;
            color: #3f3f3f;
            padding: 7px;
            padding-bottom: 15px;
        }
    }
    .dialog-roles {
        max-width: 80%;
        display: inline-block;
        padding-bottom: 12px;
    }
    .dialog-users {
        display: block;
        padding-bottom: 12px;
    }
    .dialog-sendor {
        float: right;
        display: inline-block;
        padding-bottom: 12px;
    }
}
.send-time {
    display: block;
    float: right;
    padding-right: 10px;
}
.el-collapse-item.is-active{
    width: 98%;
}
.el-collapse{
    width: 98%;
}
</style>
