<style lang="less">
.component-action-sheet-list {
  background: rgba(196, 196, 196, 0.2);
  border-radius: 40rpx 40rpx 0 0;
  overflow: hidden;
  .option-list {
    background: #fff;
    width: 100%;
    margin-bottom: 20rpx;
    .option-item {
      width: 100%;
      height: 110rpx;
      font-size: 32rpx;
      line-height: 110rpx;
      color: #000000;
      text-align: center;
    }
  }
  .btn-cancel {
    height: 178rpx;
    width: 100%;
    background: #fff;
    font-size: 32rpx;
    line-height: 110rpx;
    color: #000000;
    text-align: center;
  }
}
</style>

<template>
  <slider-panel
    slidDoneEmitId="hidePanel"
    @hidePanel="hidePanel"
    showClose="{{false}}"
    showSliderIcon="{{false}}"
  >
    <div class="component-action-sheet-list">
      <div class="option-list">
        <div
          class="option-item"
          v-for="item in options"
          v-on:click="selectOption(item)"
        >{{item.label}}</div>
      </div>
      <div class="btn-cancel" v-on:click="cancel">{{cancelText}}</div>
    </div>
  </slider-panel>
</template>

<script>
import wepy from '@wepy/core';

let pageTouchStartY = 0;
let isPageTouchStart = false;
let componentTop = 0;
wepy.component({
  props: {
    options: Array,
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  ready() {},
  data: {},
  methods: {
    hidePanel() {
      this.$emit('component-action-sheet-close');
    },
    selectOption(item) {
      this.$emit('component-action-sheet-slide-choose', item);
    },
    cancel() {
      this.$emit('component-action-sheet-close');
    }
  }
});
</script>


<config>
{
    usingComponents: {
      'slider-panel': '~@/components/common/slider-panel',
    },
    "componentPlaceholder": {
      "slider-panel": "view"
    }
}
</config>