<template>
    <div class="alarm-notes">
        <table-page-template>
        <div class="select-list" slot='form'>
            <el-select v-model="project" class="item" size="small" placeholder="请选择项目">
                <el-option
                v-for="item in projects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
             <el-cascader
                class="item"
                size="small"
                clearable
                placeholder="请选择对象位置"
                :options="positions"
                v-model="position"
                @change="handleChange">
            </el-cascader>
            <el-select v-model="level" class="item" clearable size="small" placeholder="请选择严重程度">
                <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="staff" class="item" clearable size="small" placeholder="请选择人员">
                <el-option
                v-for="item in staffs"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="type" class="item" clearable size="small" placeholder="请选择报警分类">
                <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <div class="btn-al">
                 <el-button type="primary" size="small" style="width:200px" @click="alarmDialogVisible = true">报警条目</el-button>
            </div>
        </div>
        <div class="sg-table" slot="table">
            <el-radio-group v-model="notes" size="small" class="item">
                <el-radio-button label="alarm">通过报警查看通知人员</el-radio-button>
                <el-radio-button label="staff">通过人员查看报警通知</el-radio-button>
            </el-radio-group>
            <el-checkbox v-model="checked" class="check-note">只看尚未设定人员通知的报警</el-checkbox>
            <el-button type="primary" size="small" class="btn-alarm" @click='setUser'>为所选报警统一设定通知人员</el-button>
           <el-table
                ref="multipleTable"
                :data="tableData"
                border
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                align="center"
                width="55">
                </el-table-column>
                <el-table-column
                align="center"
                prop="classify"
                label="报警分类"
                width="130">
                </el-table-column>
                <el-table-column
                prop="name"
                header-align="center"
                label="适用对象实例"
                >
                </el-table-column>
                <el-table-column
                prop="alarm"
                header-align="center"
                label="报警条目名称"
                >
                </el-table-column>
                <el-table-column
                prop="code"
                label="报警条目编码"
                align="center"
                width="130"
                >
                </el-table-column>
                <el-table-column
                prop="level"
                label="严重程度"
                align="center"
                width="80"
               >
                </el-table-column>
                <el-table-column label="通知人员" width="80" align="center">
                    <el-button
                    size="small"
                    type="text"
                    @click="dialogVisible = true">设定
                    </el-button>
                </el-table-column>
            </el-table>
        </div>
        <base-pagination :total='456' @pageChanged='pageChanged' slot='pagination'></base-pagination>
        </table-page-template>
        <el-dialog
            title="设定通知人员"
            :visible.sync="dialogVisible"
            width="900px" height="500px"
            >
             <div class="box" v-if="userData.length">
            <ul class="ul-box">
                <li class="tit">
                <p>人员姓名及通知方式</p>
                </li>
                <li v-for="(item, index) in userData" :key="index">
                    <p>
                        <span class="name">{{item.name}}</span>
                        <span class="name">{{item.phone}}</span>
                        <span class="name">{{item.email}}</span>
                    </p>         
                <span>
                    <v-check-box :sendMessage='item.sendMessage' :sendEmail='item.sendEmail' :sendWechat='item.sendWechat' :define="index" @change="checkBoxChange"></v-check-box>
                </span>
                </li>
            </ul>      
            </div>
            <div v-else style="text-align:center;min-height:100px;">暂无人员</div>
            <p>
                <el-button type="primary" style="margin-top:10px" icon="el-icon-setting" @click="manageUser">管理通知人员</el-button>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="管理通知人员"
            :visible.sync="manageDialogVisible"
            width="900px" height="500px"
            >
           <manage-note></manage-note>
        </el-dialog>
        <el-dialog
            title="选择报警条目"
            :visible.sync="alarmDialogVisible"
            width="900px" height="500px"
            >
          <alarm-code></alarm-code>
           <span slot="footer" class="dialog-footer">
                <el-button @click="alarmDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="alarmDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import manageNote from './manageNote'
import alarmCode from './alarmCode'
export default {
    data(){
        return {
            alarmDialogVisible:false,
            dialogVisible: false,
            manageDialogVisible:false,
            projects: [{
                value: 'Pj4419000006',
                label: '厚街万科城市广场'
                }, {
                value: 'Pj4419000003',
                label: '长安万科广场'
                }, {
                value: 'Pj4419000008',
                label: '松湖万科生活广场'
                }, {
                value: 'Pj1101020002',
                label: '北京中海地产大厦'
                }, {
                value: 'Pj1101080002',
                label: '新华创新大厦'
                },{
                value: 'Pj4201050001',
                label: '武汉亚心总医院'
                }, {
                value: 'Pj1101010001',
                label: '北京中海地产广场'
                }],
            project: 'Pj1101080002',
            positions: [{
                value: '6',
                label: '6号楼',
                children: [{
                    value: 'f01',
                    label: '地下一层',
                    children: [{
                        value: 'B1F1',
                        label: 'B1F-5#变压器房'
                        }, {
                        value: 'B1F2',
                        label: 'B1F-1#变压器房'
                        }, {
                        value: 'B1F3',
                        label: 'B1F-2#变压器房'
                        }, {
                        value: 'B1F4',
                        label: 'B1F-2#门内公区'
                    }],
                },{
                    value: 'f02',
                    label: '地下二层',
                    children: [{
                        value: 'B2F1',
                        label: 'B2F-5#变压器房'
                        }, {
                        value: 'B2F2',
                        label: 'B2F-1#变压器房'
                        }, {
                        value: 'B2F3',
                        label: 'B2F-2#变压器房'
                        }, {
                        value: 'B2F4',
                        label: 'B2F-2#门内公区'
                    }]
                },{
                   value: 'f11',
                   label: '地上一层',
                   children: [{
                        value: '1F1',
                        label: '1F-公区'
                        }, {
                        value: '1F2',
                        label: '1F-门内公区'
                        }, {
                        value: '1F3',
                        label: '1F-1#门内公区'
                        }, {
                        value: '1F4',
                        label: '1F-6#门内公区'
                    }],  
                },{
                   value: 'f12',
                   label: '地上二层', 
                },{
                    value:'f13',
                    label: '地上三层',
                },{
                    value:'f14',
                    label: '地上四层',
                }]
            }],
            position:[],
            levels: [{
                value: '0',
                label: 'S'
                }, {
                value: '1',
                label: 'A'
                }, {
                value: '2',
                label: 'B'
                }, {
                value: '3',
                label: 'C'
                }, {
                value: '4',
                label: 'D'
                }],
            level: '',
            staffs: [{
                value: '0',
                label: '人员全部'
                }],
            staff: '',
            types: [{
                value: '0',
                label: '环境报警'
                }, {
                value: '1',
                label: '安全报警'
                }],
            type: '', 
            notes: "alarm",
            checked: false,
            tableData: [{
                classify: '--',
                name: '1#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-001',
                alarm: '冷冻水泵电源电压过高',
                code:'1024',
                level:'A'
                }, {
                classify: '环境报警',
                name: '2#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-002',
                alarm: '冷冻水泵电源电压过高',
                code:'1024',
                level:'A'
                }, {
                classify: '环境报警',
                name: '3#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-003',
                alarm: '冷冻水泵电源电压过高',
                code:'1024',
                level:'A'
                }, {
                classify: '环境报警',
                name: 'B1F-5#变压器房 - B1-BDS-7',
                alarm: '室温过高',
                code:'1055',
                level:'B'
                }, {
                classify: '环境报警',
                name: 'B2F-8#排风机房 - B2-PFJF-8',
                alarm: '室温过高',
                code:'1055',
                level:'B'
                }, {
                classify: '--',
                name: 'B2F-5#排风机房 - B2-PFJF-5',
                alarm: '室温过高',
                code:'1055',
                level:'B'
                }, {
                classify: '安全报警',
                name: 'B2F-7#排风机房 - B2-PFJF-7',
                alarm: '室温过高',
                code:'1055',
                level:'B'
            }],
            multipleSelection: [],
            currentPage:10,
            userData: [],
            selectBoxIdArr: [], //表格多选的alarm的id数组      
        }
    },
    components:{
        manageNote,
        alarmCode
    },
    methods:{
        handleChange(value) {
            console.log(value);
        },
        handleSelectionChange(arr) {
            this.selectBoxIdArr = arr;
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        manageUser() {
            this.dialogVisible = false;
            this.manageDialogVisible = !this.manageDialogVisible
        },
        setUser() {
            if (this.selectBoxIdArr.length) {
               this.dialogVisible = true
            } else {
                this.$message({
                    message: '请选择报警',
                    type: 'warning'
                })
            }
        },
        pageChanged() {}
    }
}
</script>

<style lang="less" scoped>
.alarm-notes{
    .select-list{
        padding: 0 10px 10px 10px;
        // border-bottom: 1px solid #c2cedb;
        background: #fff;
        .item{
            margin-top: 10px;
            margin-right: 5px;
        }
        .btn-al{
           margin-top: 10px;
           margin-right: 5px;
           display: inline-block; 
        }  
    }
    .sg-table{
        margin:10px 0;
        padding:10px;
        background:#fff;
        .check-note{
            margin-left: 50px;
        }
        .btn-alarm{
            width: 200px;
            float: right;
            margin-bottom: 10px;
        }
        th{
            text-align: center;
        }
    }
    .footer-pagination{
        text-align: center;
    }
    .ul-box{
        min-height: 300px;
    }
}
</style>
<style lang="less">
.alarm-notes{
  .el-dialog__header{
      text-align: center;
  }
  .el-dialog__body{
      padding-top: 10px;
  }
}
</style>

