/** 
*props: objTypeArr:[](对象类数组)
**/
<template>
<span>
    <span class="show-box">
        <el-button style="width: 250px;" @click="btnClick">{{btnInfo}}</el-button>
        <i class="el-icon-circle-close-outline clear-icon" @click="clear"></i> 
    </span>    
<el-dialog
title="选择报警条目"
:visible.sync="dialogVisible"
width="40%"
center
append-to-body
>
    <div class="alarm-item-box">
        <div class="radio-box">
            <el-radio-group v-model="radioValue" @change="radioChange">
                <el-radio-button label="fixed">固定条目</el-radio-button>
                <el-radio-button label="customed">自定义条目</el-radio-button>                
            </el-radio-group>
        </div>
        <div class="table-box">
            <el-table
            ref="multipleTable"
            :loading="loading"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange">                
                <el-table-column
                header-align="center"
                prop="code"
                label="报警条目编码">                
                </el-table-column>
                <el-table-column
                header-align="center"
                prop="name"
                label="报警条目名称">
                </el-table-column>
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
            </el-table>
        </div>
        <div class="btn-box">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button class="cancel-btn" @click="cancel">取消</el-button>
        </div>
    </div>      
</el-dialog> 
</span>
</template>

<script>
import fixedApi from "@/api/alarm/alarm"
import fixedUtils from './utils'
import { mapGetters } from 'vuex'
export default {
    name: 'alarm-item',
    data() {
        return {
            btnInfo: "报警条目",
            loading: false,
            dialogVisible: false,
            radioValue: 'fixed', //默认固定
            tableData:[], 
            multipleSelection:[],
            alarmItemArr:[]
        }
    },
    props: {
        objTypeArr: {
            type: Array,
            default: []
        }
    },
    computed: {
        ...mapGetters("alarm",["spaceCodeObj"])
    },
    methods: {
        btnClick() {
            this.dialogVisible = true;
            this.btnInfo = "报警条目";
            this.getAlarmItem()
        },
         // radio改变事件
        radioChange(val) {
            this.multipleSelection = [];
            this.alarmItemArr = [];
            this.getAlarmItem();
        },
        // 多选事件
        handleSelectionChange(val,index) {
            this.multipleSelection = val;
        },
        // 获取报警条目数据
        getAlarmItem() {
            this.tableData = []
            let category = null;
            let objType = null;
            if(this.objTypeArr.length) {
                if(this.objTypeArr[0]) { //第一项全部
                    objType = this.objTypeArr[0]
                    if(this.objTypeArr[0] == "building" || this.objTypeArr[0] == "floor") {
                        category = null;
                    }else if(this.objTypeArr[0] == "space") {
                        if(this.objTypeArr.length == 1) {
                            category = null;
                        } else {
                            // category = this.objTypeArr[this.objTypeArr.length - 1];
                            let p = fixedUtils.spaceSonCode(this.objTypeArr[this.objTypeArr.length - 1], this.spaceCodeObj);
                            category = p;
                        }
                    } else {
                        category = [this.objTypeArr[this.objTypeArr.length - 1]];
                    }
                }
            }
            let params = {
                criteria: {
                    type: this.radioValue,   //报警条目类别,fixed 固定,customed 自定义     **必须
                    projectId: this.radioValue == "fixed" ? null : this.projectId,  //项目id,自定义类别时不为空
                    objType: objType,   //对象类型,building,floor,space,system,facility,为null或没有此字段时不过滤此项
                    category: category ? {"$in":category} : null, 
                }              
            };  
            fixedApi.getListData(params).then(res => {
                if(res.result == "success"){
                    if(res.content && res.content.length) {
                        this.tableData = res.content;    
                        // 判断是否已经选中
                        this.$nextTick(() => {
                            if(this.alarmItemArr) {
                                let indexArr = [];
                                this.alarmItemArr.length ? this.alarmItemArr.forEach((item, idx) =>{
                                    this.tableData.forEach((ele, index) =>{
                                        if(ele.code === item.code){
                                            indexArr.push(index);
                                        }    
                                    })
                                }) : null;
                                indexArr.length ? indexArr.forEach((item) => {
                                    this.$refs.multipleTable.toggleRowSelection(this.tableData[item], true);
                                }) : null
                            } else {
                                this.$refs.multipleTable.clearSelection();
                            }
                        })
                    } else {
                        this.tableData =[];
                    }                   
                }
            });
        },
        save() {
            this.alarmItemArr = this.multipleSelection;           
            let codeArr = [];
			let str = "";
			this.multipleSelection.forEach((item, index, arr) => {
				codeArr.push(item.code);
				if(index == arr.length-1) {
					str += item.name;
				} else {
					str += item.name + "、";
				}
				
			})
			if(str.length > 22) {				
				 let strTem= str.substring(0, 13);
				 if(strTem.charAt(strTem.length-1) == "、") {
					 strTem = strTem.substr(0, strTem.length-1)
				 }
				this.btnInfo = strTem.charAt(strTem.length-1) == "、" ? strTem : (strTem + "...");
			} else {
				this.btnInfo = str
            };
            if( !this.multipleSelection.length ) {
                this.btnInfo = "报警条目";
            }
            this.$emit("change", this.radioValue, codeArr);
            this.dialogVisible = false;
        },
        cancel() {
            this.dialogVisible = false;
        },
        clear() {
            this.multipleSelection = [];
            this.alarmItemArr = [];
            this.btnInfo = "报警条目";
            this.$emit("change", this.radioValue, []);
        }

    },
    created() {
        if(!this.spaceCodeObj) {
            this.$store.commit("alarm/ADD_INDEX")
        }
    },
    watch:{
        objTypeArr: {
            handler() {
                this.clear();
            }
        }
    }
}
</script>

<style lang="less" scoped>
.show-box {
    font-size: 20px;
    .clear-icon{
        cursor: pointer;
    }
}
.alarm-item-box{    
    .radio-box{
        text-align: center;
    }
    .table-box{
        height: 500px;
        overflow-y: auto;
        margin-top: 10px;
    }
    .btn-box{
        margin-top:10px;
        text-align: center;
        .cancel-btn{
            margin-left: 50px;
        }
    }
}
</style>
