<style lang="scss">
    .staff{
        display: flex;
        justify-content: space-between;
        .companies{
                height: 75vh;
                overflow: auto;
                margin-right: 10px;
                overflow-x: hidden;
        }
        &>li{
            width: 30%;
            list-style: none;
            min-height: 70vh;
            background: #fff;
            border: 1px solid #d9d9d9;
            padding:20px 10px;
        }
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .active{
                        color:#1989FA;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
        }
        .staff_list{
            width: 68%;
        }
        
    }
    .staffs{
        margin-right: 10px;
    }
</style>
<template>
  <section>
    <p>公司管理 > 部门管理</p>
    <div class="content">
        <ul class="staff">
            <li class="companies">
                <el-form  size="small">
                    <el-form-item>
                        <el-input suffix-icon="el-icon-search" v-model="name" @change="getData"  placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-tree  
                    :data="data"
                    node-key="id"   :props='props'
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="change(data)" >
                        <span v-if='id==data.id' class="label_name active">{{ node.label }}</span>
                        <span v-else class="label_name">{{ node.label }}</span>
                    </span>
                </el-tree>
            </li>
            <li class="staff_list">
                    <div class="filter">
                        <el-form   :inline="true" size="small" label-position="left">
                            <el-form-item>
                                    <el-input clearable placeholder="请输入内容搜索" v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="form.page=1,searchData()" type="primary" icon="el-icon-search">搜索</el-button>
                                <!-- <el-button @click="dialogFormVisible=true,message={send_type:1}" type="primary">发送消息</el-button> -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table
                        class="table"
                        :data="list" height="64vh"
                        border  v-loading="loading"
                        style="width: 100%">
                        <el-table-column
                        type="selection" fixed="left"
                        width="40">
                        </el-table-column>
                        <el-table-column
                        prop="sender_user_name" 
                        label="消息发送者">
                        </el-table-column>
                        <el-table-column
                        prop="title"  width="150"
                        label="消息标题">
                        </el-table-column>
                        <el-table-column
                        prop="enterprise_name" 
                        label="公司名称">
                        </el-table-column>
                        <el-table-column
                        prop="content"  width="300"
                        label="消息内容">
                        </el-table-column>
                        <el-table-column
                        prop="receiver_names" 
                        label="接收者">
                        </el-table-column>
                        <el-table-column
                        prop="ctime"  width="180"
                        label="发送时间">
                        <!-- <template>
                            <el-tag type="success">启用</el-tag>
                        </template> -->
                        </el-table-column>
                        <el-table-column fixed="right"
                        prop="zip"  width="85"
                        label="操作">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                                <el-button icon="el-icon-view" @click="open(scope.row.title,scope.row.content)" size="mini"  type="success"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger"></el-button>
                            </el-tooltip>
                        </template>
                        </el-table-column>
                </el-table>
                <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
            </li>
        </ul>
    </div>
  </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
	data() {
		return {
            dialogFormVisible:false,
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            data:[],
            form:{page:1,page_size:20},
            list:[],
            total:1,
            loading:false,
            props:{
                label:'name'
            },
            id:'',
            dpt:{enterprise_name:'',enterprise_id:'',staffusers:[]},
            enterprise_name:'',
            name:'',
            staff:{},
            staffList:[],
            utype:0
		};
	},
	methods: {
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            // this.getData()
            this.getDpt()
        },
        change(data){
                this.id=data.id;
                this.enterprise_name=data.name;
                this.enterprise_ids = data.id;
                this.getDpt();
        },
        getData(){
            this.loading=true
            this.$api.getEnterpriseList({name:this.name}).then(res=>{
                this.data=res.data.data.list;
                this.id=this.data[0].id;
                // this.enterprise_name=this.data[0].name;
                this.enterprise_ids = this.data[0].id;
                this.getDpt()
            })
        },
        searchData(){
            this.loading=true
            this.getDpt()
        },
        getDpt(){
            var parm=this.form;
            parm.enterprise_ids = this.enterprise_ids;
            parm.message_type = "warning"
            this.loading=true
            this.$api.getMessagesList(parm).then(res=>{
                this.list=res.data.data.list
                this.total=res.data.data.total
                this.loading=false
                this.area=this.store.area;
                this.category=this.store.categorys;
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteMessages({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                    })
                })
        },
        handleClose(index){
            this.dpt.staffusers.splice(index,1);
        },
        edit(data){
            this.dialogFormVisible=true
            this.dpt={...data}
        },
        editStaff(data){
            this.dialogFormVisible1=true
            this.staff={...data}
        },
        open(title,text) {
            this.$alert(text, title, {
            confirmButtonText: '确定',
            });
        }
    },
	created(){
        this.getData()
        this.utype=localStorage.getItem('utype')
	}
};
</script>