<template>
    <view class="member-card-section">
                <view class="member-card-section__inner">
                    <view class="member-card-section__head">
                        <view class="member-card-section__head-inner">
                            <text class="member-card-section__title">
                                我的会员卡
                            </text>
                            <view
                                class="member-card-section__link"
                                hover-class="mi-tap--hover"
                                :hover-stay-time="150"
                                @tap="$emit('view-all')"
                            >
                                <text
                                    class="member-card-section__link-text"
                                >
                                    查看全部
                                </text>
                                <image class="member-card-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
                            </view>
                        </view>
                    </view>
                    <view
                        class="member-card-preview"
                        hover-class="mi-tap-card--hover"
                        :hover-stay-time="150"
                        @tap="$emit('view-all')"
                    >
                        <view class="member-card-preview__inner">
                            <view class="member-card-preview__head">
                                <view class="member-card-preview__head-inner">
                                    <view
                                        class="member-card-preview__type-row"
                                    >
                                        <view
                                            class="member-card-preview__icon-wrap"
                                        >
                                            <view
                                                class="member-card-preview__icon-border"
                                            >
                                                <view
                                                    class="member-card-preview__icon-bg"
                                                ></view>
                                                <view
                                                    class="member-card-preview__icon-stroke"
                                                ></view>
                                            </view>
                                            <image class="member-card-preview__icon-line" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Line_2_468.png" mode="aspectFill" />
                                        </view>
                                        <text
                                            class="member-card-preview__name"
                                        >
                                            {{ cardInfo.name }}
                                        </text>
                                    </view>
                                    <view
                                        class="member-card-preview__tag"
                                    >
                                        <text class="member-card-preview__tag-text">
                                            {{ cardInfo.detailTag || '详情' }}
                                        </text>
                                    </view>
                                </view>
                            </view>
                            <text class="member-card-preview__expire">
                                {{ cardInfo.expireDate }}
                            </text>
                            <view class="member-card-preview__footer">
                                <view class="member-card-preview__footer-inner">
                                    <view
                                        class="member-card-preview__days"
                                    >
                                        <text
                                            class="member-card-preview__days-num"
                                        >
                                            {{ cardInfo.remainingDays }}
                                        </text>
                                        <text
                                            class="member-card-preview__days-unit"
                                        >
                                            天剩余
                                        </text>
                                    </view>
                                    <view
                                        class="member-card-preview__renew"
                                        hover-class="mi-tap-btn--hover"
                                        :hover-stay-time="150"
                                        @tap.stop="$emit('renew')"
                                    >
                                        <text
                                            class="member-card-preview__renew-text"
                                        >
                                            续费
                                        </text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="member-card-tip">
                        <view class="member-card-tip__inner">
                            <view class="member-card-tip__content">
                                <image class="member-card-tip__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
                                <text
                                    class="member-card-tip__text"
                                >
                                    {{ cardInfo.tip }}
                                </text>
                            </view>
                        </view>
                        <view class="member-card-tip__border"></view>
                    </view>
                </view>
            </view>
</template>

<script>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        cardInfo: { type: Object, required: true }
    },
    emits: ['view-all', 'renew'],
}
</script>

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