<template>
  <transition name="actionSheet"
              @after-leave="afterLeave">
    <div class="actionSheet"
         v-if="show">
      <div class="actionSheet__cover"
           @click="deactivate"
           @touchmove.prevent></div>
      <div v-if="contentType === '1'"
           class="actionSheet__content">
        <div class="actionSheet__header">
          <div class="actionSheet__title"
               v-if="title"
               v-html="title"></div>
          <div class="actionSheet__list">
            <div class="actionSheet__list-item actionSheet__btn"
                 v-for="(item,index) in buttons"
                 :key="'button'+index"
                 :style="item.style"
                 @click.stop.prevent="onClick(item,index)">{{item.text}}</div>
          </div>
        </div>
        <div class="actionSheet__cancel-btn"
             @click="deactivate">取消</div>
      </div>
      <div v-if="contentType === '2'"
           class="actionSheet__content actionSheet__content2">
        <div class="actionSheet__header2 mui-flex jcsb aic">{{title}} <span @click="deactivate"></span></div>
        <ul class="actionSheet__list">
          <li v-for="(item,index) in buttons"
              :key="index"
              @click.stop.prevent="onClick(item,index)">
            <div class="mui-flex jcsb aic actionSheet__list-con">
              <span :style="item.leftStyle">{{item.leftText}}</span>
              <span :style="item.rightStyle">{{item.rightText}}</span>
            </div>
            <div class="hairlines"></div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ActionSheet',
  props: {
    // 内容区类型 1、按钮（默认） 2、列表
    contentType: {
      type: String,
      default: '1'
    },
    actionShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    buttons: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    actionShow: {
      handler(val, oldVal) {
        this.show = val;
        this.componentsTrigger = true;
      }
    }
  },
  data() {
    return {
      show: false,
      componentsTrigger: false
    };
  },
  methods: {
    defer() {
      let promise;
      let _resolve_;
      let _reject_;
      // eslint-disable-next-line prefer-const
      promise = new Promise(function(resolve, reject) {
        _resolve_ = resolve;
        _reject_ = reject;
      });
      return {
        promise,
        resolve: _resolve_,
        reject: _reject_
      };
    },
    activate: function() {
      this._deferred = this.defer();
      this.show = true;
      return this._deferred.promise;
    },
    deactivate: function() {
      this.show = false;
      if (this.componentsTrigger) {
        this.$emit('update:actionShow', false);
      }
    },
    onClick(button, index) {
      if (button.handle && !this.componentsTrigger) {
        button.handle({ button, index });
      }
      if (this.componentsTrigger) {
        this.$emit('update:actionShow', false);
        this.$emit('onActionSheetClick', { button, index });
      } else {
        this._deferred.resolve({ button, index });
      }
      this.show = false;
    },
    afterLeave: function() {
      if (!this.componentsTrigger) {
        this.$destroy();
        if (this.$el.parentNode) {
          this.$el.parentNode.removeChild(this.$el);
        }
      }
    }
  }
};
</script>
