<template>
  <div :class="{'active': state == 1}" class="action-sheet-backdrop" @click="hide(-1)">
    <div :class="{'action-sheet-up': state == 1}" class="action-sheet-wrapper">
      <div class="action-sheet">
        <div class="action-sheet-group action-sheet-options">
          <div v-if="title" class="action-sheet-title" style="" v-text="title"/>
          <div
            v-for="(b, index) in buttons"
            :key="index"
            :class="`action-sheet-option-${b.type || 'default'}`"
            class="action-sheet-option vue-1px-t"
            @click="hide(index)"
            v-text="b.text"/>
        </div>
        <div class="action-sheet-group action-sheet-cancel">
          <div class="action-sheet-option" style="border:none" @click="hide(-1)">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
  .platform-ios {
    .action-sheet-backdrop {
      .action-sheet {
        margin-left: 4px;
        margin-right: 4px;
        width: auto;
        z-index: 11;
        overflow: hidden;
        border-radius: 8px;
        background-color: transparent;

        .action-sheet-group {
          margin-bottom: 4px;
          border-radius: 8px;
          background-color: #fff;
          overflow: hidden;
        }

        .action-sheet-options {
          background: #f1f2f3;
        }

        .action-sheet-option {
          color: #007aff;
          min-height: 47px;
          font-size: 19px;
        }

        .action-sheet-option-primary {
          color: @actionsheet-label-primary-color;
        }

        .action-sheet-option-warn {
          color: @actionsheet-label-warn-color;
        }

        .action-sheet-option-default {
          color: #007aff;
        }

        .action-sheet-option-disabled {
          color: @actionsheet-label-disabled-color;
        }
      }
    }
  }

  .action-sheet-backdrop {
    -webkit-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: transparent;

    &.active {
      background-color: rgba(0, 0, 0, 0.4);
    }

    .action-sheet-wrapper {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      -webkit-transition: all cubic-bezier(0.41, 0.57, 0.19, 0.79) 300ms;;
      transition: all cubic-bezier(0.41, 0.57, 0.19, 0.79) 300ms;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      //max-width: 500px;
      margin: auto;

    }

    .action-sheet-up {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .action-sheet {
      width: auto;
      z-index: 11;
      overflow: hidden;
      background-color: #efeff4;
    }

    .action-sheet-options {
      background: white;
    }

    .action-sheet-group {
      margin-bottom: 8px;
      //border-radius: 4px;
      background-color: #fff;
      overflow: hidden;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .action-sheet-title {
      padding: 8px;
      color: #8f8f8f;
      text-align: center;
      font-size: @font-size-middle;
    }

    .action-sheet-group .action-sheet-option {
      border-width: 1px 0 0 0; /*no*/

      &:last-child {
        margin-top: 1px; /*no*/
      }
    }

    .action-sheet .action-sheet-option {
      text-align: center;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      padding: 1px; /*no*/
      width: 100%;
      border-radius: 0;
      background-color: transparent;
      //color: #444;
      font-size: 16px;
      min-width: 26px;
      min-height: 45px;
    }

    .action-sheet-option-primary {
      color: @actionsheet-label-primary-color;
    }

    .action-sheet-option-warn {
      color: @actionsheet-label-warn-color;
    }

    .action-sheet-option-default {
      color: @actionsheet-label-default-color;
    }

    .action-sheet-option-disabled {
      color: @actionsheet-label-disabled-color;
    }
  }

  .modal-open [vum-action-sheet] {
    pointer-events: auto;
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .action-sheet-backdrop {
        .action-sheet {
          margin-bottom: 34px;
        }
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .action-sheet-backdrop {
        .action-sheet {
          margin-bottom: 34px
        }
      }
    }
  }
</style>
<script>
import assign from 'object-assign'

export default {
  data () {
    return {
      defaultOptions: {
        title: '',
        buttons: [],
        cancelText: 'Cancel',
      },
      title: '',
      buttons: [],
      cancelText: 'Cancel',
      state: 0,
    }
  },

  mounted () {
    this.$el.setAttribute('vum-action-sheet', '')
  },

  destroyed () {
    document.body.removeChild(this.$el)
  },

  methods: {
    _buttonList (buttons) {
      let buttonList = []
      for (let b in buttons) {
        buttonList.push({
          text: b.text,
          callback: b.callback,
        })
      }

      return buttonList
    },

    show (options) {
      let _options = assign({}, this.defaultOptions, options)
      this.title = _options.title
      this.buttons = _options.buttons
      this.cancelText = _options.cancelText
      this.state = 1
    },

    hide (buttonIndex) {
      this.state = 0
      if (buttonIndex > -1) {
        this.buttons[buttonIndex].callback(buttonIndex)
      }

      let wrapper = document.querySelector('[vum-action-sheet] > .action-sheet-wrapper')
      wrapper.addEventListener('webkitTransitionEnd', () => {
        this.$destroy()
      }, false)
    },

    getState () {
      return this.state
    },
  },
}
</script>
