<template>
  <div class="vux-actionsheet">
    <transition name="vux-actionsheet-mask">
      <div class="weui-mask weui-mask_transparent" @click="onClickingMask" v-show="show"></div>
    </transition>
    <div v-if="url" class="avtar">
      <img :src='url' alt=""/>
    </div>
    <div class="weui-actionsheet" :class="{'weui-actionsheet_toggle': show}">
      <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" v-for="(text, key) in menus" @click="onMenuClick(text, key)" v-html='text.label' :class="`vux-actionsheet-menu-${text.type || 'default'}`">
        </div>
      </div>
      <div class="weui-actionsheet__action" @click="emitEvent('on-click-menu', 'cancel')" v-if="showCancel">
        <div class="weui-actionsheet__cell">{{ cancelText }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'mu-actionsheet',
  mounted () {
    this.$nextTick(() => {
      this.$tabbar = document.querySelector('.weui-tabbar')
    });
  },
  props: {
    value: Boolean,
    showCancel: Boolean,
    url:String,
    cancelText: {
      type: String,
      default: '取消',
    },
    menus: {
      type: [Object, Array]
    },
    closeOnClickingMask: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      show: false,
    }
  },
  methods: {
    onMenuClick (text, key) {
      if (typeof text === 'string') {
        this.emitEvent('on-click-menu', key)
      } else {
        if (text.type !== 'disabled' && text.type !== 'info') {
          // if (key) {
            this.emitEvent('on-click-menu', key);
          // } else {
          //   this.show = false
          // }
        }
      }
    },
    onClickingMask () {
      this.closeOnClickingMask && this.emitEvent('on-click-menu','mask')
    },
    emitEvent (event, type, shouldClose = true) {
      if (event === 'on-click-menu' && !/.noop/.test(type)) {
        this.$emit(event, type);
        shouldClose && (this.show = false);
      }
    },
    fixIos (zIndex) {
      if (this.$el.parentNode && this.$el.parentNode.className.indexOf('v-transfer-dom') !== -1) {
        return
      }
      if (this.$tabbar && /iphone/i.test(navigator.userAgent)) {
        this.$tabbar.style.zIndex = zIndex
      }
    }
  },
  watch: {
    show (val) {
      this.$emit('input', val)
      if (val) {
        this.fixIos(-1)
      } else {
        setTimeout(() => {
          this.fixIos(100)
        }, 200)
      }
    },
    value: {
      handler: function (val) {
        this.show = val
      },
      immediate: true
    }
  },
  beforeDestroy () {
    this.fixIos(100)
  }
}
</script>
<style lang="less">
.weui-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
}
// .weui-mask_transparent{
//     position: fixed;
//     z-index: 1000;
//     top: 0;
//     right: 0;
//     left: 0;
//     bottom: 0;
// }
.avtar{
    position: fixed;
    top:0;
    width:100%;
    z-index: 5000;
}
.avtar img{
  width:100%;
  max-height:370px;
}
.weui-actionsheet {
    position: fixed;
    left: 0;
    bottom: 0;
    transform: translate(0, 100%);
    backface-visibility: hidden;
    z-index: 5000;
    width: 100%;
    background-color: #EFEFF4;
    transition: transform .3s;
}
.weui-actionsheet__action {
    margin-top: 12px;
    background-color: #FFFFFF;
}
.iphone_x .weui-actionsheet__action {
  padding-bottom: 32px;
}
.weui-actionsheet__cell {
    position: relative;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    color: #3a4247;
    line-height: 20px;
    &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #e6e7e8;
        color: #e6e7e8;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        transform: scaleY(.5);
    }
    &:active{
        background-color: #ECECEC;
    }
    &:first-child{
        &:before{
            display: none;
        }
    }
}
//android actionSheet
.weui-skin_android{
    .weui-actionsheet {
        position: fixed;
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: 274px;
        box-sizing: border-box;
        backface-visibility: hidden;
        background: transparent;
        transition: transform .3s;
    }
    .weui-actionsheet__action{
        display: none;
    }
    .weui-actionsheet__menu {
        border-radius: 2px;;
        background-color: #FFFFFF;
        box-shadow: 0 6px 30px 0 rgba(0,0,0,.1);
    }
    .weui-actionsheet__cell {
        padding: 13px 24px;
        font-size: 16px;
        line-height: 1.4;
        text-align: left;
        &:first-child {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }
        &:last-child {
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
        }
    }
}
//actionSheet aniamtion
.weui-actionsheet_toggle{
    transform: translate(0, 0);
}
.vux-actionsheet-menu-primary {
  color:#1AAD19;
}
.vux-actionsheet-menu-warn {
  color: #E64340;
}
.vux-actionsheet-menu-default {
  //color: #000;
}
.vux-actionsheet-menu-disabled {
  color: #ccc;
}
.vux-actionsheet-mask-enter, .vux-actionsheet-mask-leave-active {
  opacity: 0;
}
.vux-actionsheet-mask-leave-active, .vux-actionsheet-mask-enter-active {
  transition: opacity 300ms;
}
</style>