<template>
  <div :class="direction">
    <div class="zgh-actionsheet" :class="currentActive ? 'active' : ''">
      <slot name="content"></slot>
    </div>
    <div class="mask" :class="currentActive ? 'active' : ''" @click="maskHandle"></div>
  </div>

</template>

<script>
  export default {
    name: "ZghActionsheet",
    props: {
      direction: {
        type: String,
        default: 'bottom',
      },
      value: {
        type: Boolean,
        default: true
      },
      isMaskClick: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        currentActive: this.value
      }
    },
    watch: {
      currentActive(val) {
        this.$emit('input', val);
      },
      value() {
        this.currentActive = this.value;
      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      maskHandle() {
        if (!this.isMaskClick) return;
        this.currentActive = false;
        console.log('maskClick')
      }
    }
  }
</script>

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

  .zgh-actionsheet {
    position: absolute;
    display: block;
    transition: all 0.3s;
    z-index: 5555;

    .bottom & {
      width: 100%;
      max-height: 80%;
      left: 0;
      bottom: -20px;
      transform: translate(0, 100%) translate3d(0,0,0);
      &.active {
        bottom: 0px;
        transform: translate(0, 0) translate3d(0,0,0);
      }
    }
    .top & {
      width: 100%;
      max-height: 80%;
      left: 0;
      top: 0px;
      transform: translate(0, -100%) translate3d(0,0,0);
      &.active {
        transform: translate(0, 0) translate3d(0,0,0);
      }
    }
    .right & {
      min-width: 20%;
      max-width: 50%;
      height: 100%;
      right: 0px;
      top: 0px;
      transform: translate(100%, 0) translate3d(0,0,0);
      overflow: scroll;
      &.active {

        transform: translate(0, 0) translate3d(0,0,0);
      }
    }
    .left & {
      min-width: 20%;
      max-width: 50%;
      height: 100%;
      left: 0%;
      top: 0px;
      transform: translate(-100%, 0) translate3d(0,0,0);
      overflow: scroll;
      &.active {

        transform: translate(0, 0) translate3d(0,0,0);
      }
    }
    .common_btn {
      height: @m-bottom;
      border-radius: 0;
      line-height: @m-bottom;
    }
    .select-attr {
      .img {
        @h: 100px;
        width: @h;
        height: @h;
        .mgR(20);
        .box {
          overflow: hidden;
          margin-top: -20px;
          width: @h;
          height: @h;
        }
        img {
          min-width: 100%;
          min-height: 100%;
        }
      }
      .attr {
        button {
          position: relative;
          display: inline-block;
          background: transparent;
          margin: 0 8px 10px 0;
          span {
            display: block;
            padding: 5px 10px;
            background: #eee;
            color: #666;
            border: 1px solid #eee;
            border-radius: 8px;
            &.disabled {
              border: 1px dashed #999;
              opacity: .2;
            }
          }
          input {
            position: absolute;
            top: 0;
            left: 0;
            appearance: none;
            display: block;
            width: 100%;
            height: 100%;
            &:checked + span {
              background: @common_cl2;
              color: #fff;
              border-color: @common_cl2;
            }
          }
        }
        .selectnum {
          @h: 30px;
          height: @h;
          line-height: @h;
          span {
            float: left;
            display: block;
            width: 40px;
            height: @h;
            /*padding: 8px 0;*/
            text-align: center;
            background: #eee;
            margin-left: 8px;
          }
        }
      }
    }
  }
</style>
