/**
@author:fugy--update
@date:2018.12.12
@info:多选组件封装
@prop：sendMessage, sendEmail, sendEmail
@return： {sendMessage: 0|1, sendEmail: 0|1, sendEmail: 0|1}
**/
<template>
    <div class='box'>
        <p v-if='isAll'>
            <el-checkbox v-model='checkAll' @change='handleCheckAllChange'>全选</el-checkbox>
        </p>
        <p class='check-item'>
            <el-checkbox v-model='message' @change='messageHandle'>短信</el-checkbox>
            <el-checkbox v-model='email' @change='emailHandle'>邮件</el-checkbox>
            <el-checkbox v-model='wechat' @change='wechatHandle'>微信</el-checkbox>
        </p>
    </div>
</template>
<script>
export default {
    name: 'multiple-checkbox',
    data() {
        return {
            checkAll: false,
            message: false,
            email: false,
            wechat: false,
            flag: false, //防止回传
        }
    },
    props: {
        sendMessage: {
            require: true
        },
        sendEmail: {
            require: true
        },
        sendWechat: {
            require: true
        },
        define: {
            default: null
        },
        isAll: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        //全部
        handleCheckAllChange(val) {
            if (val) {
                this.message = true
                this.email = true
                this.wechat = true
            } else {
                this.message = false
                this.email = false
                this.wechat = false
            }
            this.emit()
        },
        messageHandle() {
            this.handleIsAll()
        },
        emailHandle() {
            this.handleIsAll()
        },
        wechatHandle() {
            this.handleIsAll()
        },
        //是否全部
        handleIsAll() {
            if (this.message && this.email && this.wechat) {
                this.checkAll = true
            } else {
                this.checkAll = false
            }
            this.emit()
        },
        //回传
        emit() {
            let obj = {
                sendMessage: this.message ? 1 : 0,
                sendEmail: this.email ? 1 : 0,
                sendWechat: this.wechat ? 1 : 0
            }
            if(this.flag) {
                this.$emit('change', obj, this.define)
            }
            
        },
        DataHandle() {
            this.message = this.sendMessage ? true : false;
            this.email = this.sendEmail ? true : false;
            this.wechat = this.sendWechat ? true: false;
            this.handleIsAll();
            this.flag = true
        }
    },
    watch: {
        sendMessage: {
            immediate: true,
            handler(val) {
                this.DataHandle()
            }
            
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    display: flex;
    .check-item {
        margin-left: 20px;
    }
}
</style>

