<template>
    <view
        class="viplist"
        :style="{
            paddingRight: isSingle ? '17px' : '',
        }"
    >
        <swiper class="viplist__swiper" :next-margin="isSingle ? '' : '14px'">
            <swiper-item
                v-for="(vip, index) in list"
                :key="index"
                class="viplist__swiper__item--wrap"
                :class="'viplist__swiper__item--' + vip.type"
                @tap="onCardTap(vip)"
            >
                <view
                    class="viplist__swiper__item--inner"
                    :style="{
                        'background-image': 'url(' + vip.bgImg + ')',
                    } | imgCompress('background-image',{column: 11})"
                >
                    <view class="viplist__swiper__item__cont">
                        <view class="viplist__swiper__item__img">
                            <c-image
                                v-if="vip.icon && vip.icon"
                                :src="vip.icon"
                                has-compress
                                mode="widthFix"
                                :hack-white-stroke="false"
                                :is-round="false"
                                width="100%"
                                height="100%"
                                :extra="{column: 1}"
                            />
                        </view>
                        <view class="viplist__swiper__item__info">
                            <view class="viplist__swiper__item__name c-font-17">{{ vip.name }}</view>
                            <view class="viplist__swiper__item__valid c-font-small">{{ vip.valid }}</view>
                        </view>
                    </view>
                    <view class="viplis__swipert__item__opeart c-font-normal">
                        <view
                            v-if="vip.btnText"
                            class="viplist__swiper__item__opeart__btn"
                        >
                            <text>{{ vip.btnText }}</text>
                            <view
                                v-if="vip.bubbleText"
                                class="viplist__swiper__item__opeart__bubble c-font-small"
                            >{{ vip.bubbleText }}</view>
                        </view>

                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
import {navigate} from '@utils/navigate';
import CImage from '@components/common/image';

/**
 * @file 个人中心会员卡
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
/* global swan */
export default {
    config: {
        component: true
    },
    components: {
        CImage
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 卡片列表
         */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            show: false,
            showID: null,
            isSingle: false
        };
    },
    created() {
        this.isSingle = this.list && this.list.length === 1;
    },
    methods: {
        onCardTap(vip = {}) {
            if (!vip.url && !vip.h5Url) {
                return;
            }
            if (process.env.MARS_ENV === 'h5' && vip.h5Url) {
                if (vip.duWord) {
                    this.$api.setClipboardData({
                        data: vip.duWord,
                        complete: () => {
                            window.location.href = vip.h5Url;
                        }
                    });
                }
            } else {
                navigate({
                    url: vip.url
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
// 会员卡列表
.viplist {
    height: 60px;
    padding-left: 17px;

    &__swiper {
        width: 100%;
        height: 100%;
        overflow: visible;

        &__item {
            &--wrap {
                overflow: visible;

                &:last-child {
                    .viplist__swiper__item--inner {
                        margin-right: 0;
                    }
                }
            }

            &__cont {
                display: flex;
                align-items: center;
            }

            &--inner {
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // background: url('https://medactivity.cdn.bcebos.com/vip/card-member-bg.png') no-repeat;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-right: 10px;
            }

            &__img {
                width: 25px;
                height: 22px;
                margin-left: 13px;
                margin-right: 10px;
            }

            &__name {
                color: #7d5012;
                font-weight: bold;
                line-height: 0.23rem;
            }

            &__valid {
                color: #986a40;
                line-height: 0.18rem;
            }

            &__opeart {
                position: relative;

                &__btn {
                    margin-right: 0.2rem;
                    width: 62px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    background: #986a40;
                    color: #fff;
                    border-radius: 15px;
                    font-weight: bold;
                    position: relative;
                }

                &__bubble {
                    position: absolute;
                    top: -18px;
                    right: 0;
                    color: #fff;
                    background-image: linear-gradient(134deg, #fe803d 0%, #fd5b3f 100%);
                    height: 19px;
                    border-radius: 333px;
                    padding: 0 8px;
                    font-weight: normal;
                    white-space: nowrap;

                    &::after {
                        content: '';
                        position: absolute;
                        right: 28px;
                        bottom: -0.08rem;
                        border: 4px solid transparent;
                        border-top-color: #fd5b3f;
                    }
                }
            }
            /* 会员 */
            &--member {
                .viplist__swiper__item__name {
                    color: #7d5012;
                }

                .viplist__swiper__item__valid {
                    color: #986a40;
                }

                .viplist__swiper__item__opeart__btn {
                    color: rgb(64, 34, 0);
                    background: rgb(255, 238, 212);
                }
            }
            /* 员工卡 */
            &--employee {
                .viplist__swiper__item__name {
                    color: #986a40;
                }

                .viplist__swiper__item__valid {
                    color: #986a40;
                }

                .viplist__swiper__item__opeart__btn {
                    color: rgb(255, 255, 255);
                    background: rgb(152, 106, 64);
                }
            }
            // 新员工卡
            &--newemployee {
                .viplist__swiper__item__img {
                    width: 0.2733rem;
                    height: 0.25rem;
                }

                .viplist__swiper__item__name {
                    color: #fde3b7;
                }

                .viplist__swiper__item__valid {
                    color: #fde3b7;
                }

                .viplist__swiper__item__opeart__btn {
                    color: #402200;
                    background: #ffeed4;
                }
            }
        }
    }
}
</style>
