<template>
<div class="flex-column">
    <div class="filter-container" style="margin:10px;">
        <el-select v-model="listQuery.msg_type" placeholder="请选择通知类型" style="margin-left: 5px;width: 180px">
            <el-option label="政策法规" :value="0"></el-option>
            <el-option label="消息通知" :value="1"></el-option>
        </el-select>
        <el-input
              @keyup.enter.native="handleFilter"
              prefix-icon="el-icon-search"
              size="small"
              style="width: 200px; margin-bottom: 0;margin-left:20px"
              class="filter-item"
              :placeholder="'通过标题名称查询'"
              v-model="listQuery.msg_title">
          </el-input>
          <el-button size="small" type="primary" style="margin-left: 20px" @click="getMessageList">查询</el-button>
          <el-button size="small" @click="resetSearchList">重置</el-button>
          <el-button size="small" @click="addMsg" type="success">发送通知</el-button>
    </div>
    <div class="app-container flex-item">
     <div class="bg-white fh">
        <el-table :data="msgList" border fit highlight-current-row style="width: 100%;" height="calc(100% - 100px)">
            <el-table-column prop="msg_title" label="标题"></el-table-column>
            <el-table-column prop="msg_content" label="内容"></el-table-column> 
            <el-table-column prop="createusername" label="编辑人"></el-table-column> 
            <el-table-column fixed="right" label="操作" width="140">
                <template slot-scope="scope">
                    <el-button @click="checkClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
                </el-table-column>   
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange"/>
    </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="60%" :title="dialogTitle">
        <el-form :model="msgData" label-position="right" label-width="100px" >
            <el-form-item size="small" label="标题" prop="msg_title">
                <el-input v-model="msgData.msg_title" :disabled="disabledInput"></el-input>
            </el-form-item>
            <el-form-item size="small" label="内容" prop="msg_content">
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="msgData.msg_content" :disabled="disabledInput"></el-input>
            </el-form-item>
            <el-form-item size="small" label="通知类型" prop="msg_type">
                <el-radio-group v-model="msgData.msg_type" size="small">
                    <el-radio-button :label="0">政策法规</el-radio-button>
                    <el-radio-button :label="1">消息通知</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item size="small" label="是否全选" prop="is_all">
                <el-radio-group v-model="msgData.is_all">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item size="small" label="选择角色" prop="roles">
                <el-select v-model="msgData.roles" multiple placeholder="请选择角色">
                    <el-option
                        v-for="item in roleList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="small" label="选择用户" prop="recipientUserId">
                    <el-select v-model="msgData.recipientUserId" multiple placeholder="请选择用户">
                    <el-option
                        v-for="item in usersList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="small" label="选择部门" prop="orgs">
                <el-tree :data="orgsData" show-checkbox  style="max-height:100px;position: relative;overflow: auto;"  v-model="msgData.orgs"
                    render-after-expand
                    node-key="id"
                    ref="orgsTree"
                    highlight-current
                    @check="handleNodeClick"
                    ></el-tree>
            </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button size="mini" @click="close">取消</el-button>
          <el-button size="mini" type="primary" @click="Submit">发送</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
// import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
import {loadMessageList,loadMessage,addMessage,updateMessage,updateDelMessage} from '../../api/case'
import {
  listToTreeSelect
} from '@/utils'
import * as orgs from '@/api/login'//部门
import * as roles from '@/api/roles'//角色
import * as users from '@/api/users'//用户
export default {
    name: "reportqueryindex",
    components: {
        // Sticky,
        Pagination
    },
    directives: {
        waves
    },
    data(){
        return{
            listQuery: { // 查询条件
                page: 1,
                limit: 10,
                key: "",
                msg_title:'',
                msg_type:'',
                is_create:'',
                is_receiver:'',
            },
            total: 10,
            msgList:[
                {
                    id:'1111',
                    msg_title: "Yw测试",
                    msg_content: '正文内容',
                    createtime:'上报时间',
                    createusername:'编辑人',
                }
            ],
            dialogVisible: false,//弹框
            //详情
            msgData:{
                msg_title: "",
                msg_content: '',
                msg_type:'',
                is_all:'',
                roles:[],
                recipientUserId:[],
                orgs:[],
            },
            submitType:0,
            dialogTitle:'',//弹出框标题
            disabledInput:false,//文本框禁用
            orgsData: [],//部门
            roles:[],//角色回显
            roleList:[{
                value: 'yw',
                label: 'YuWei'
            }],//角色列表
            usersData:[],//用户
            //用户列表
            usersList:[{
                value: 'yw',
                label: 'YuWei'
            }],
            orgsText:"",
        }
    },
    mounted(){
        this.taheight=window.innerHeight-160;
        
    },
    created(){
        this.getMessageList();
        this.getOrgsList();
        this.getRolesList();
        this.getUserList();
    },
    methods: {
        getMessageList(){
            loadMessageList(this.listQuery).then(res =>{
                if(res.code === 200){
                    this.msgList = res.data;
                    this.total =res.count;
                }
            })
        },
        handleCurrentChange(val){
            this.listQuery.page = val.page
            this.listQuery.limit = val.limit
            this.getMessageList()
        },
        //查看通知详情
        checkClick(row){
            this.dialogVisible = true;
            this.disabledInput = true;
            this.dialogTitle = "通知详情";
            this.submitType =0;
            this.messageData(row.Id);
        },
        messageData(Id){
            loadMessage({id:Id}).then(res =>{
                
                if(res.code === 200 ){
                    this.msgData = res.result;
                }
            })
        },
        //编辑通知
        editClick(row){
            this.dialogTitle = "编辑通知";
            this.dialogVisible = true;
            this.disabledInput = false;
            this.submitType = 1;
            this.messageData(row.Id);
        },
        //添加通知信息
        addMsg(){
            this.dialogTitle = "添加通知";
            this.dialogVisible = true;
            this.disabledInput = false;
            this.submitType = 2;
            this.msgData = {};
        },
        //更新删除通知
        delClick(row){
            this.$confirm('此操作将删除该通知, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = row.Id;
                updateDelMessage({id}).then(res =>{
                    if(res.code === 200 ){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getMessageList();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //提交
        Submit(){
            //0是详情 1是编辑 2是添加
            if(this.submitType == 1){
                updateMessage(this.msgData).then(res =>{
                    if(res.code === 200){
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        })  
                        this.getMessageList();
                    }
                })
            };
            if(this.submitType == 2){
                addMessage(this.msgData).then(res =>{
                    if(res.code === 200){
                        this.$notify({
                            title: '成功',
                            message: '添加成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.getMessageList();
                    }
                })
            }
            
            this.close();
            
        },
        //关闭
        close(){
            this.msgData={};
            this.dialogVisible = false;
            this.getMessageList();
        },
        handleFilter(){

        },
        //重置
        resetSearchList(){
            this.listQuery.msg_type ="";
            this.listQuery.msg_title ="";
            this.getMessageList();
        },
        // 获取部门信息
        getOrgsList() {
            orgs.getOrgs().then(response => {
                let result = response.result.map(function(item) {
                    return {
                        id: item.id,
                        label: item.name,
                        parentId: item.parentId || null
                    }
                })
                var orgstmp = JSON.parse(JSON.stringify(result))
                this.orgsData = listToTreeSelect(orgstmp)
            })
        },
        
        //获取角色列表
        getRolesList() {
            roles.getList().then(res =>{
                if(res.code === 200){
                    let result = res.result.map(function(item) {
                        return {
                            value: item.id,
                            label: item.name,
                        }
                    })
                    this.roleList = result;
                }
            })
        },
        //用户列表
        getUserList() {
            users.getList().then(res =>{
                let result = res.data.map(function(item){
                    return{
                        value: item.id,
                        label: item.name,
                    }
                })
                this.usersList = result;
            })
        },
        handleNodeClick(currentObj, treeStatus){
            let arr =[];
            console.log("currentObj:",currentObj,",treeStatus",treeStatus);
            let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中,>=0为选中
            if (selected !== -1) {
                this.msgData.orgs = treeStatus.checkedKeys
            }else{
                this.msgData.orgs = treeStatus.checkedKeys
            }
            
        },
    },
}
</script>

<style scoped>
.filter-container{
    text-align: left;
    color: #000;
    font-size: 16px;
    padding-left: 30px;
}
.filter-ul{
    padding: 10px;
}
.filter-li{
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #000;
    padding-left: 10px;
    border-bottom: 1px dashed #ccc;
    /* cursor: pointer; */
}
.filter-li:last-child{
    border-bottom: 1px solid #ccc;
}
</style>
