<template>
    <div class="button" :class="selected?'button-select':'button-no-select'" @mouseover="showMenu = true">
        <span class="index-text">{{data.index}}</span>
        <span class="button-text" ><slot/></span>
      <div class="menu" v-if="selected && showMenu" :style="{'height':data.children.length*2+'em'}" @mouseleave="showMenu = false">
        <div class="link" v-for="(value,key,index) in data.children" :key="index"
             :class="data.layersShow[key]?'button-select1':'button-no-select1'"
             @click="clickLabel(key,value)">
            <span class="button-text1" >{{value.name}}</span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Button2',
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          index: '00', name: '', children: [], layersShow: []
        }
      }
    }, // 数据
    size: {
      type: String,
      default: '0.085'
    }, // 文字大小
    selected: {
      type: Boolean
    }// 选择状态
  },
  data () {
    return {
      showMenu: true
    }
  },
  model: {
    prop: 'selected',
    event: 'change'
  },
  methods: {
    clickLabel (key, value) {
      for (let i = 0; i < this.data.layersShow.length; i++) {
        this.data.layersShow[i] = false
      }
      this.data.layersShow[key] = true
      this.showMenu = false
      this.$emit('fetchData', {value: value})
    },
    fetchData (val) {

    },
    change () {
      // 选中则通知上级，二次点击不予处理
      if (this.selected) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
  .button{
    cursor: pointer;
    color: #fff;
    background-size: 100% 100%;
    text-align: center;
  }
  .button-no-select{
    background: url("../../assets/images/button/button_normal.png") no-repeat;
    background-size: contain;
    color: #929cad;
  }
  @keyframes bounce {
    0%,
    7%,
    25%,
    36%,
    45%,
    50% {
      animation-timing-function: ease-out;
      transform: translate3d(0, 0, 0);
    }

    15%,
    16% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -42px, 0);
    }

    30% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -24px, 0);
    }

    41% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -12px, 0);
    }

    47% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -3px, 0);
    }
  }
  .button-select{
    background: url("../../assets/images/button/button_choose.png") no-repeat;
    background-size: contain;
    color: white;
    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
    transform-origin: center bottom;
  }
  .button-text1{
    font-size: 0.082rem;
    height: 100%;
    line-height: 100%;
    text-align:center;
    vertical-align:middle;
  }
  .link:hover,
  .server-table i.el-tooltip:hover {
    cursor: pointer; //鼠标变手
    color: white; //链接变颜色
  }
  .button-no-select1{
    height: 2em;
    line-height: 2em;
    background: #00000000;
    color:#32c3ff;
    transform-origin: center center;
  }
  .button-select1{
    height: 2em;
    line-height: 2em;
    background: #33c3ff;
    color: white;
    transform-origin: center center;
  }
  .button-text {
    font-size: 0.088rem;
  }
  .index-text{
    font-style: italic;
    position: absolute;
    left: 2em;
    font-size: 0.088rem;
  }
  .menu{
    background: url("../../assets/images/button/menu.png") no-repeat;
    background-size: 100% 100%;
    color: #32c3ff;
    width: 300px;
    height: 100px;
    position: absolute;
    left: 300px;
    top: 1em;
  }
</style>