<template>
  <view class="ml-action-menu" @tap.stop="openAction">
    <slot>
      <ml-icon name="menu" className="ml-action-menu-icon" :status="status || 'primary'" />
    </slot>
  </view>
</template>

<script>
export default {
  name: 'MlActionMenu',
  props: {
    options: Array,
    status: String,
    params: Object
  },
  methods: {
    openAction () {
      uni.showActionSheet({
        itemList: this.options.map(item => item.label),
        // #ifdef MP-DINGTALK
        cancelButtonText: '取消',
        // #endif
        success: (res) => {
          const index = res.tapIndex
          const item = this.options[index]
          const value = item.value
          this.$emit('change', { ...this.params, value, option: item })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.ml-action-menu {
  display: inline-block;
  .ml-action-menu-icon {
    font-size: 36rpx;
  }
}
</style>
