<template>
    <view>
        <view v-if="mask" :class="'weui-mask ' + (showClone ? '' : 'weui-mask_hidden') + ' ' + maskClass" @tap="closeActionSheet"></view>
        <view :class="'weui-actionsheet ' + (showClone ? 'weui-actionsheet_toggle' : '') + ' ' + extClass">
            <!-- 标题 -->
            <block v-if="title">
                <view class="weui-actionsheet__title">
                    <view class="weui-actionsheet__title-text">{{ title }}</view>
                </view>
            </block>
            <slot name="title" v-else></slot>
            <view
                :class="!showCancel && index === actionsClone.length - 1 ? 'weui-actionsheet__action' : 'weui-actionsheet__menu'"
                v-for="(actionItem, index) in actionsClone"
                :key="index"
            >
                <block v-if="utils.isNotSlot(actionItem)">
                    <view
                        :class="'weui-actionsheet__cell ' + (item.type === 'warn' ? 'weui-actionsheet__cell_warn' : '')"
                        :data-groupindex="index"
                        :data-index="actionIndex"
                        :data-value="item.value"
                        @tap="buttonTap"
                        v-for="(item, actionIndex) in actionItem"
                        :key="actionIndex"
                    >
                        {{ item.text }}
                    </view>
                </block>

                <slot :name="actionItem" v-else></slot>
            </view>
            <!-- 取消按钮 -->
            <view class="weui-actionsheet__action" v-if="showCancel">
                <view class="weui-actionsheet__cell" data-type="close" id="iosActionsheetCancel" @tap="closeActionSheet">{{ cancelText }}</view>
            </view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs">
var join = function(a,b) {
    return a+b
};
var isNotSlot = function(v) {
    return typeof v !== 'string'
}
module.exports = {
    join: join,
    isNotSlot: isNotSlot
}
</script>
<script>
export default {
    data() {
        return {
            actionIndex: 0,
            actionItem: [],
            actionsClone: [],
            showClone: false
        };
    },
    options: {
        multipleSlots: true,
        // 在组件定义时的选项中启用多slot支持
        addGlobalClass: true
    },
    props: {
        title: {
            // 标题
            type: String,
            default: ''
        },
        showCancel: {
            // 是否显示取消按钮
            type: Boolean,
            default: true
        },
        cancelText: {
            // 取消按钮文案
            type: String,
            default: '取消'
        },
        maskClass: {
            // 遮罩层class
            type: String,
            default: ''
        },
        extClass: {
            // 弹出窗 class
            type: String,
            default: ''
        },
        maskClosable: {
            // 点击遮罩 关闭 actionsheet
            type: Boolean,
            default: true
        },
        mask: {
            // 是否需要 遮罩层
            type: Boolean,
            default: true
        },
        show: {
            // 是否开启 actionsheet
            type: Boolean,
            default: false
        },
        actions: {
            // actions 列表
            type: Array,

            default: () => []
        }
    },
    methods: {
        groupChangeFun(e) {
            // 支持 一维数组 写法
            if (e.length > 0 && typeof e[0] !== 'string' && !(e[0] instanceof Array)) {
                this.setData({
                    actionsClone: [this.actions]
                });
            }
        },
        buttonTap(e) {
            const { value, groupindex, index } = e.currentTarget.dataset;
            this.$emit('actiontap', {
                detail: {
                    value,
                    groupindex,
                    index
                }
            });
        },
        closeActionSheet(e) {
            const { type } = e.currentTarget.dataset;
            if (this.maskClosable || type) {
                // 点击 action 里面的 取消
                this.setData({
                    showClone: false
                }); // 关闭回调事件

                this.$emit('close');
            }
        }
    },
    created: function () {},
    watch: {
        actions: {
            handler: function (e) {
                this.actionsClone = this.clone(this.actions);
                // 支持 一维数组 写法
                if (e.length > 0 && typeof e[0] !== 'string' && !(e[0] instanceof Array)) {
                    this.setData({
                        actionsClone: [this.actions]
                    });
                }
            },

            immediate: true,
            deep: true
        },

        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};

/***/
</script>
<style>
.weui-mask.weui-mask_hidden {
    opacity: 0;
    transform: scale3d(1, 1, 0);
}
.weui-mask {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    transition: all 0.3s;
}
</style>
