<template>
    <view class="coupon-section">
        <view class="coupon-section__inner">
            <view class="coupon-section__header">
                <view class="coupon-section__header-inner">
                    <text class="coupon-section__title">优惠券 & 积分</text>
                    <view
                        class="coupon-section__link"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('view-all')"
                    >
                        <text class="coupon-section__view-all">更多详情</text>
                        <image
                            class="coupon-section__link-arrow"
                            src="/static/images/chevronright5.png"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view class="coupon-section__cards">
                <view class="coupon-section__cards-inner">
                    <view
                        class="coupon-section__coupon"
                        hover-class="mi-tap-card--hover"
                        :hover-stay-time="150"
                        @tap="$emit('use-coupon')"
                    >
                        <view class="coupon-section__coupon-inner">
                            <text class="coupon-section__amount">{{ data.amount }}</text>
                            <text class="coupon-section__desc">{{ data.couponDesc }}</text>
                            <view class="coupon-section__coupon-status">
                                <text class="coupon-section__status">{{ data.couponAction }}</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="coupon-section__points"
                        hover-class="mi-tap-card--hover"
                        :hover-stay-time="150"
                        @tap="$emit('redeem-points')"
                    >
                        <view class="coupon-section__points-inner">
                            <text class="coupon-section__num">{{ data.points }}</text>
                            <text class="coupon-section__points-label">{{ data.pointsLabel }}</text>
                            <view class="coupon-section__points-action">
                                <text class="coupon-section__text">{{ data.pointsAction }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        data: {
            type: Object,
            default: () => ({
                amount: '¥50',
                couponDesc: '满500可用 · 1张',
                couponAction: '去使用',
                points: 1250,
                pointsLabel: '我的积分',
                pointsAction: '去兑换'
            })
        }
    },
    emits: ['view-all', 'use-coupon', 'redeem-points']
}
</script>

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