<template>
    <view class="quick-actions">
        <view class="quick-actions__inner">
            <view class="quick-actions__grid">
                <view class="quick-actions__grid-inner">
                    <view
                        v-for="item in row1"
                        :key="item.key"
                        class="quick-actions__item"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('action', item.key)"
                    >
                        <view class="quick-actions__item-inner">
                            <view class="quick-actions__icon-wrap">
                                <view class="quick-actions__icon-wrap-inner">
                                    <view v-if="item.key === 'booking'" class="quick-actions__icon">
                                        <image
                                            class="quick-actions__icon-part"
                                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_490.png"
                                            mode="aspectFit"
                                        />
                                        <image
                                            class="quick-actions__icon-part"
                                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_491.png"
                                            mode="aspectFit"
                                        />
                                        <view class="quick-actions__border-wrap">
                                            <view class="quick-actions__rect"></view>
                                            <view class="quick-actions__border"></view>
                                        </view>
                                        <image
                                            class="quick-actions__icon-part"
                                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_493.png"
                                            mode="aspectFit"
                                        />
                                        <image
                                            class="quick-actions__icon-part"
                                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_494.png"
                                            mode="aspectFit"
                                        />
                                    </view>
                                    <image
                                        v-else
                                        class="quick-actions__icon-img"
                                        :src="item.icon"
                                        mode="aspectFit"
                                    />
                                </view>
                            </view>
                            <text :class="item.textClass">{{ item.label }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="quick-actions__divider"></view>
            <view class="quick-actions__grid">
                <view class="quick-actions__grid-inner">
                    <view
                        v-for="item in row2"
                        :key="item.key"
                        class="quick-actions__item"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('action', item.key)"
                    >
                        <view class="quick-actions__item-inner">
                            <view class="quick-actions__icon-wrap">
                                <view class="quick-actions__icon-wrap-inner">
                                    <image
                                        class="quick-actions__icon-img"
                                        :src="item.icon"
                                        mode="aspectFit"
                                    />
                                </view>
                            </view>
                            <text :class="item.textClass">{{ item.label }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    emits: ['action'],
    data() {
        return {
            row1: [
                { key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
                { key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
                { key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
                { key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
            ],
            row2: [
                { key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
                { key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
                { key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
                { key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
            ]
        }
    }
}
</script>

<style>
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-quick-actions.css';
@import '@/common/style/memberInfo/member-info-tap.css';
</style>
