<template>
  <div class="dropdown middle">
    <div class="button">
      <div  :class="[btnCls]" @click="currentValue=!currentValue">
        <slot name="button"></slot>
      </div>
      <transition name="zgh-dropdown">
        <div @click="currentValue=!currentValue" v-show="currentValue" class="option color3 box-shadow radius5">
          <slot></slot>
        </div>
      </transition>
    </div>
    <div class="after" :class="{active:!currentValue}" ref="mask"></div>
  </div>
</template>

<script>
  export default {
    name: 'ZghDropdown',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      btnCls: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value(val) {
        this.currentActive = val
      },
      currentValue(val) {
        this.$emit('input', val);
      }
    },
    mounted(){
      setTimeout(()=>{
        this.$refs.mask.addEventListener('touchstart',this.hide,false)
      })
    },
    methods:{
      hide(){
        this.currentValue=false
      }
    },
    beforeDestory(){
      this.$refs.mask.removeListeners('touchstart',this.hide,false)
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config");

  .dropdown {
    position: relative;
    .after{
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      display: block;
      z-index: 1;
      &.active{
        z-index: -1;
        height:0;
      }
    }
    &.left .option{
      left: 0;
      right:auto;
    }
    &.right .option{
      right: 0;
      left:auto;
    }

    &.center .option{
      left: 50%;
      transform: translateX(-50%);
    }
    .button{
      position: relative;
      z-index: 2;
    }
    .option {
      position: absolute;
      top: 100%;
      background: #fff;
    }
  }
</style>
