Vue.component("more-btn", {
    template: `
        <div class="header-btn-max" @mouseleave="mouseleaveBtn">
            <div :class="nav != ''?'more-btn active':'more-btn'" @mouseenter="mouseenterBtn">
                {{text}}
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div class="header-btn-list" v-show="show" style="display: none">
                <div class="header-btn-list-arrow"></i></div>
                <div class="header-btn-list-item" :style="{width:widths+'px'}">
                    <div class="header-btn-list-padding">
                        <button type="button" style="width: 130px" :class="btnNav==i?'active':''" v-for="(item,i) in list" 
                        @click="buttonClick(i,item)">{{item.text}}</button>
                    </div>
                </div>
            </div>
        </div>
    `,
    props: {
        label: {
            type: String
        },
        nav: {
            type: String
        },
        list: {
            type: Array
        },
    },
    data() {
        return {
            show: false,
            widths: 0,
            btnNav: -1,
            chooseMenu: {},
            text:''
        }
    },
    mounted() {
        this.text = this.label
        this.init()
    },
    methods: {
        init() {
            this.width()
        },
        width() {
            if (this.list) {
                if (this.list.length > 4) {
                    this.widths = 616
                } else {
                    this.widths = this.list.length * 150 + 16
                }
            }
        },
        buttonClick(i, item) {
            this.btnNav = i
            this.text = item.text
            this.$emit('value',item);
        },
        mouseenterBtn() {
            this.show = true
        },
        mouseleaveBtn() {
           this.show = false
        }
    },
    watch: {
        nav:function (n,o) {
            this.nav=n
            if(n == ''){
                this.btnNav = -1
            }

        }
    },

})