/**
@author:fugy
@date:2018.11.28
@info:项目报警通知列表表格
**/
<template>
    <div class='box'>
        <table v-if="tableData && tableData.length" class='table' border='1' cellpadding='0' cellspacing='0'>
            <tr v-for='(item,index) in tableData' :key='index'>
                <td v-show='item.isShow'>
                    <div class='td-box' :style='"margin-left:" + ( 30 * item.level ) + "px;"'>
                        <!-- 图标 -->
                        <div class='icon-box'>
                            <span v-if='item.isLow' @click='switchIcon(item)'>
                                <i v-show='!item.isExpend' class='el-icon-caret-right'></i>
                                <i v-show='item.isExpend' class='el-icon-caret-bottom'></i>
                            </span>
                        </div>
                        <div class='con-box'>
                            <!-- 1级 -->
                            <p v-if='item.level == 1' class='first-level'>
                                <span class='first-span first-span-name'>{{item.name}}</span>
                                <span class='first-span'>{{item.phone}}</span>
                                <span class='first-span'>{{item.email}}</span>
                                <el-button type='text' class='first-btn' @click="addNotice(item)">增加通知</el-button>
                            </p>
                            <!-- 2级 -->
                            <p v-else-if='item.level == 2'>
                                <span>{{item.objName}}</span>
                            </p>
                            <!-- 3级 -->
                            <p v-else-if='item.level == 3' class='three-level'>
                                <span>{{item.instanceInfo}}</span>
                                <!-- <el-button type='text' class='three-btn gray' @click="noLookObj(item)">不再关注此对象</el-button> -->
                            </p>
                            <!-- 4级 -->                            
                            <p v-else-if='item.level == 4' class='four-level'>
                                <span class='four-span'>{{item.alarmLevel}} 级</span>
                                <span class='four-span'>{{item.alarmName}}</span>
                                <!-- <el-button type='text' class='four-btn gray' @click="noLook(item)">不再关注</el-button> -->
                                <v-check-box
                                    class='four-check'
                                    :sendMessage='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendMessage: 0'
                                    :sendEmail='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendEmail: 0'
                                    :sendWechat='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendWechat: 0'
                                    :define='item'
                                    :isAll="false"
                                    @change='checkBoxChange'
                                ></v-check-box>
                            </p>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <div v-else style="text-align:center; line-height: 500px;">
            暂无数据
        </div>
        <!-- 组件 -->
        <v-user-add-notice :addNoticeDialogVisible="addNoticeDialogVisible" :userData="userData" :projectId="projectId" @refresh="refreshList"></v-user-add-notice>
    </div>
</template>
<script>
import api from './api'
import proApi from '@/api/alarm/alarm'
import utils from './utils'
import proUtils from './utils'
// component
import vCheckBox from '@/components/alarm/common/CheckBox'
import vUserAddNotice from './UserAddNotice'
export default {
    name: 'index-content-list',
    data() {
        return {
            addNoticeDialogVisible: false,
            userData: null,
            projectId: null,
            /**
             * level: 级别
             * isExpend: 图标样式
             * isLow: 是否有下一级
             * isShow: 当前行是否显示
             * index: 下标
             */
            tableData: [],
            pidArr: [], //树形结构pid数组
            treeObj: [],
            /****Dict***** */
            entityDictObj: {} //对象类的名称

        }
    },
    props: ['tableParams','userIndex'],
    components: { vCheckBox , vUserAddNotice },
    methods: {
        /********************************树形结构----up************************************************************************** */
        async switchIcon(row) {
            row.isExpend = !row.isExpend
            if (row.isExpend) {
                if (row.level == 1) {
                    await this.getAlarmList(row.id)
                    this.tableData.forEach(hh => {
                        if (hh.id == row.id && hh.level == 1) { //展开第一行
                            this.pidArr = []
                            hh.isExpend = true
                        }
                    })
                }
                //展开
                this.pidArr.push(row.index)
                this.pidArr.sort((a, b) => a - b)
                this.expend()
            } else {
                //折叠
                for (let i = 0; i < this.pidArr.length; i++) {
                    if (row.index == this.pidArr[i]) {
                        this.pidArr.splice(i, 1)
                    }
                }
                this.refresh()
            }
        },
        /********pidArr中存在，并且父级的isShow为true**** */
        // 展开
        expend() {
            this.pidArr.forEach(item => {
                this.tableData.forEach(ele => {
                    if (item == ele.pid) {
                        ele.isShow = true
                    }
                })
            })
            this.refresh()
        },
        // 刷新
        refresh() {
            this.tableData.forEach(ele => {
                let pidFlag = this.pidArr.includes(ele.pid)
                if (pidFlag) {
                    //pid存在
                    this.tableData.forEach(item => {
                        //父级是否show
                        if (item.index == ele.pid) {
                            if (item.level == 1) {
                                ele.isShow = item.isExpend
                            } else {
                                ele.isShow = item.isShow
                            }
                        }
                    })
                } else {
                    if (ele.level == 1) {
                        ele.isShow = true
                    } else {
                        ele.isShow = false
                    }
                }
            })
        },
        /********************************树形结构----down************************************************************************** */
        // checkbox多选回填
        async checkBoxChange(obj, define) {         
            let params = {   
                projectId: this.tableParams.projectId,             
                notifyUserId:define.notifyUserList[0].id,   
                alarmConfigResultIdList:[{    
                    alarmConfigResultId:define.alarmId,
                    sendMessage: obj.sendMessage,
                    sendEmail: obj.sendEmail,
                    sendWechat: obj.sendWechat 
                }]
            };
            let res = await api.setUpAlarmConfigResult(params);
            if (res.result == "success") {
                this.$message({
                    message: '设定成功',
                    type: 'success'
                });
            }
        },
        // 不再关注对象
        noLookObj(item) {
            this.$confirm('取消后,不再收到该对象下的报警提醒?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let arr = []
                this.tableData.forEach(ele => {
                    if(ele.pid == item.index){
                        let obj = {
                            alarmConfigResultId:ele.alarmId,
                            notifyType:[]
                        }
                        arr.push(obj);
                    }
                })

                let params = {                
                    notifyUserId:item.id,      
                    alarmConfigResultIdList: arr
                };
                let res = await api.setUpAlarmConfigResult(params);
                if (res.result == "success") {
                    this.$message({
                        message: '设定成功',
                        type: 'success'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        // 不再关注
        async noLook(item) {
            let params = {                
                notifyUserId:item.id,      
                alarmConfigResultIdList:[{
                    alarmConfigResultId:item.alarmId,
                    notifyType:[]
                }]
            };
            let res = await api.setUpAlarmConfigResult(params);
            if (res.result == "success") {
                this.$message({
                    message: '设定成功',
                    type: 'success'
                });
            }
        },
        addNotice(item) {
            this.userData = item;
            this.addNoticeDialogVisible = !this.addNoticeDialogVisible
        },
        async getAlarmList(id) {
            let params = {
                criteria: {
                    projectId: this.tableParams.projectId,
                    notifyUserId: id
                },
                page: 1,
                size: 1000
            }
            let res = await api.queryNotifyUserByAlarmConfigResult(params)
            if (res.result == 'success' && res.count) {
                // 获取location本地名称
                let applyArr = []
                res.content.forEach((item, index) => {
                    applyArr.push({ id: item.instanceId })
                    item.objName = utils.getObjName(item.objType) //对象名称
                    if(item.notifyUserList) {
                        let arr = item.notifyUserList.filter((user)=> {
                            return user.id == id
                        })
                        item.notifyUserList = arr
                    }
                })
                let param = { criterias: applyArr ,valid: null}
                let resp = await proApi.getApplyObjInfo(this.tableParams.projectId, param)
                if (resp.length) {
                    this.entityDictObj = proUtils.entityDict(resp)
                    res.content.forEach((ele, idx) => {
                        let preName = proUtils.objPreName(ele.objType)
                        let name =
                            this.entityDictObj[ele.instanceId].infos[preName + 'LocalName'] ||
                            this.entityDictObj[ele.instanceId].infos[preName + 'Name']
                        let id =
                            this.entityDictObj[ele.instanceId].infos[preName + 'LocalID'] ||
                            this.entityDictObj[ele.instanceId].infos[preName + 'ID']
                        ele.instanceInfo = name
                    })
                }
                this.treeObj = await utils.alarmToTree(this.treeObj, id, res.content)
                this.tableData = await utils.treeToData(this.treeObj)
            }
        },
        async init() {           
            // 获取人员
            this.tableData = []
            let userParams = {
                criteria:{
                    projectId: this.tableParams.projectId,
                    id: this.tableParams.notifyUserId || undefined
                }                
            };
            let res = await api.getUserList(userParams)
            if (res.result == 'success' && res.count) {
                this.treeObj = await utils.userToTree(res.content)
                this.tableData = await utils.treeToData(this.treeObj)
            }
        },
        refreshList() {
            this.init();
        },
    },    
    created() {
         if(this.tableParams.projectId){
            this.init()
        }        
    },
    watch: {
        tableParams: {
            deep: true,
            handler(val) {
                this.projectId = val.projectId
                this.init()
            }
        },
        userIndex() {
            this.init()
        }
    }
}
</script>
<style lang="less" scoped>
.gray {
    color: #AEAEAE;
}
.box {
    .table {  
        width: 100%; 
        border-width: 1px;
        border-color: #ebeef5;
        border-collapse: collapse;     
        tr {
            line-height: 40px;
            td {
               
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #ebeef5;
                .td-box {
                    overflow: hidden;
                    .icon-box {
                        float:left;
                        width: 15px;
                        height: 40px;
                        cursor: pointer;
                    };
                    .con-box {
                        width: 97%;
                        float: left;
                        margin-left: 10px; 
                        overflow: hidden;
                        p {
                            overflow: hidden;
                            width: 99%;
                            float: left;
                            margin-left: 10px;
                        }
                        .first-level{
                            .first-span {
                                float: left;
                                width: 150px;
                            }
                            .first-span-name{
                                width: 100px;
                            }
                            .first-btn {
                                float: right;
                            }
                        }
                        .three-level {
                            .three-btn {
                                float: right;
                            }
                        }
                        .four-level {
                            .four-span {
                                float: left;
                            }
                            .four-span:nth-of-type(1) {
                                width: 80px;
                            }
                            .four-btn {
                                float: right;
                            }
                            .four-check {
                                float: right;
                                line-height: 22px;
                                margin-top:8px;
                                margin-right: 50px;
                            }
                        }
                    }
                }
            } 
        }
    }
}
</style>

