<template> 
<div v-if="visible" :style="divStyle" @click="doAction(btn.name)"  v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"  >
    <Row type="flex" justify="center">
      <Col>
            <CommonIcon :type="btn.iconcls"  :size="iconSize" :color="iconColor"></CommonIcon>
            <Span  v-show="fontplacement === 'right' && btn.text !== undefined"  :style="fontStyle">{{btn.text}} </Span>   
      </Col>
    </Row>
    <Row v-show="fontplacement === 'bottom' && btn.text !== undefined " type="flex" justify="center" >
        <Col>
           <Span  :style="fontStyle">{{btn.text}} </Span>
        </Col>
    </Row>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
export default {
    name: 'ebutton',
    data () {
        return {
            visible:true,
            btn:{
            },
            colorStyle: {
                selected:'#2d8cf0',
                unselected:'#3f414d',
                disabled:'#c5c8ce'
            },
            mouseStyle:{
                usable:'cursor: pointer',
                disabled:'cursor:not-allowed'
            },
            iconStyle: {
                seletedSize:40,
                unseletedSize:30
            },
            divStyle: 'cursor: pointer',
            disabled: false,
            iconSize: 30,
            fontStyle:'font-size: 10px;color:#3f414d',
            iconColor:'#3f414d',
        };
    },
    props: {
        config: {
            type:Object,
            default:null
        },
        amplify:{
            type:Boolean,
            default:true
        },
        dynamic:{
            type:Boolean,
            default:true
        },
        type: {
            type:String,
            default:'',
        },
        size: {
            type:Number,
            default:30,
        },
        color: {
            type:String,
            default:'', 
        },
        text: {
            type:String,
            default:'', 
        },
        fontsize: {
            type:String,
            default:'10px', 
        },
        fontplacement: {
            validator (value) {
                return oneOf(value, ['bottom', 'right']);
            },
            default: 'bottom'
        }

    },
    created () {
        if (this.config) {
            this.btn = this.config;
            if (this.config.size) {
                this.iconSize = this.config.size;
            }
            if (this.config.color) {
                this.iconColor = this.config.color;
            }
        } else {
            this.btn.iconcls = this.type;
            this.btn.text = this.text;
            this.iconSize = this.size;
            this.iconColor = this.color;
        }
        this.setStyle('unselected');
    },
    methods: {
        doAction(para) {
            if (!this.disabled) {
                this.$emit('click', para);
            }
           
        },
        changeActive() {
            if (this.dynamic) {
                this.setStyle('selected');
            }
        },
        removeActive() {
            if (this.dynamic) {
                this.setStyle('unselected');
            }
        },
        setStyle (action) {
            switch(action) {
                case 'selected':
                    if (!this.disabled) {
                        this.fontStyle = 'font-size: ' + this.fontsize + ';color:' + this.colorStyle.selected;
                        if (this.amplify) {
                            this.iconSize = this.iconStyle.seletedSize;
                            this.iconColor = this.colorStyle.selected;
                        }
                    }
                    break;
                case 'unselected':
                    if (!this.disabled) {
                        this.fontStyle = 'font-size: ' + this.fontsize + ';color:' + this.colorStyle.unselected;
                        if (this.amplify) {
                            this.iconSize = this.iconStyle.unseletedSize;
                            this.iconColor = this.colorStyle.unselected;
                        }
                       
                    }
                    break;
                case 'disabled':
                    if (this.disabled) {
                        this.fontStyle = 'font-size: ' + this.fontsize + ';color:' + this.colorStyle.disabled;
                        if (this.amplify) {
                            this.iconSize = this.iconStyle.unseletedSize;
                            this.iconColor = this.colorStyle.disabled;
                        }
                        this.divStyle = this.mouseStyle.disabled;
                    } else {
                        this.divStyle = this.mouseStyle.usable;
                        this.setStyle('unselected');
                    }
                    break;
                default:
                    break;
                   

            }
        },
        setEnabled (flag) {
            this.disabled = flag;
            this.setStyle('disabled');
        },
        setVisible(value) {
            this.visible = value;
        }
    }
};
</script>
