<template>
    <h-popup 
        position="bottom"
        :class="classes({ 'safe-area-inset-bottom': safeAreaInsetBottom })"
        :value="value"
        :overlay="overlay"
        :lazyRender="lazyRender"
        :getContainer="getContainer"
        :closeOnClickOverlay="closeOnClickOverlay"
        @input="handleInput"
    >
        <div v-if="title" :class="[classes('header'), 'hanzo-hairline--bottom']">
          {{title}}
          <h-icon type="close" :class="classes('close')" @click="onCancel" />
        </div>
        
        <div
            v-for="( item, index ) in actions"
            :class="[
                classes('item', { disabled: item.disabled || item.loading }),
                item.className,
                'hanzo-hairline--top'
            ]"
            @click="onClickOption(item, index)"
            :key="index"
            >
                <h-loading v-if="item.loading" :class="classes('loading')" size="20px"></h-loading>
                <span v-else-if="!item.loading" :class="classes('name')">{{item.name}}</span>
                <span v-if="item.subname&&!item.loading" :class="classes('subname')">{{item.subname}}</span>
        </div>
        <div :class="classes('content')">
            <slot></slot>
        </div>
        <div v-if="cancelText" :class="classes('cancel')">{{cancelText}}</div>
    </h-popup>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import { PopupMixin } from '../../common/mixins/popup';
import hPopup from '../popup/index.vue';
import hIcon from '../icon/index';
import hLoading from '../loading/index.vue';
let classMixin = classesMixin('action-sheet');
export default {
    name: "h-action-sheet",
    mixins: [classMixin],
    components: {
        hPopup,
        hLoading,
        hIcon
    },
    props: {
        ...PopupMixin.props,
        title: String,
        actions: Array,
        cancelText: String,
        closeOnClickAction: Boolean,
        safeAreaInsetBottom: Boolean,
        overlay: {
            type: Boolean,
            default: true
        },
        closeOnClickOverlay: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        handleInput( event ) {
            this.$emit( 'input', event );
        },
        onCancel() {
            this.$emit( 'input', false);
            this.$emit( 'cancel');
        }, 
        onClickOption( item, index ) {
            
            return function (event) {
            event.stopPropagation();

            if (item.disabled || item.loading) {
                return;
            }

            if (item.callback) {
                item.callback(item);
            }

            this.$emit('select', item, index);

            if (props.closeOnClickAction) {
                this.$emit( 'input', false);
            }
            };
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>