<template>
    <view class="custom-item" :class="'type' + item.type + ' status' + item.status">
        <view class="custom-item__content">
            <view class="custom-item__content__avatar">
                <image
                    class="image custom-item__content__avatar__img"
                    :src="item.avatar || 'https://medactivity.cdn.bcebos.com/vip/defaultAvatar.png'"
                />
            </view>
            <view class="custom-item__content__info c-gap-left-middle">
                <view class="custom-item__content__info__uname c-font-big-less">
                    <view>{{ item.uname }}</view>
                    <view
                        v-if="(item.type === 1 || item.type === 2) && (item.status === 2 || item.status === 4)"
                        mode="widthFix"
                        :style="{
                            'background-image': item.type === 1 ? 'url(https://medactivity.cdn.bcebos.com/vip/tyVip_geted.png)' : 'url(https://medactivity.cdn.bcebos.com/vip/vip_geted.png)',
                            'background-size': 'cover',
                            width: item.type === 1 ? '0.549rem' : '0.45rem',
                            height: '0.16rem',
                            'margin-left': '4px',
                        }"
                    />
                    <image
                        v-if="item.type === 3"
                        :src="item.status === 2 ? 'https://medactivity.cdn.bcebos.com/vip/ygicon.png' : 'https://medactivity.cdn.bcebos.com/vip/ygicondisable.png'"
                        mode="widthFix"
                        :style="{width: '.65rem', height: '.16rem', 'margin-left': '4px'}"
                    />
                </view>
                <view class="custom-item__content__info__name c-font-medium-less">
                    {{ item.name }}
                </view>
                <view class="custom-item__content__info__validity c-font-normal">
                    {{ item.validity }}
                </view>
            </view>
        </view>
        <view v-if="item.linkInfo && item.linkInfo.url" class="custom-item__link">
            <text class="c-font-normal" @tap="cardRecordClick(item.linkInfo, item.type)">{{ item.linkInfo.text }}</text>
            <c-icon name="right" font-size=".12rem"/>
        </view>
        <view
            v-if="item.btnTitle"
            class="custom-item__btn"
            :class="{'disabled': !item.btnStatus}"
            @tap="cardBtnClick({payUrl: item.payUrl, apiUrl: item.apiUrl, btnStatus: item.btnStatus})"
        >
            <text class="custom-item__btn__text c-font-medium-less">{{ item.btnTitle }}</text>
        </view>
        <view v-if="item.btnDesc" class="custom-item__tag c-font-small">
            {{ item.btnDesc }}
        </view>
        <view class="custom-item__status"/>
    </view>
</template>
<script>
import {navigate} from '@utils/navigate';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {ubcSend} from '@utils/log';
/**
 * @file 卡片item
 * @author jiaxiangju
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    data() {
        return {};
    },
    props: {
        /**
         * card数据
         */
        item: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 日志
         */
        log: {
            type: Object,
            default: () => {
                return {
                    value: '',
                    ext: {
                    }
                };
            }
        }
    },
    methods: {
        cardBtnClick(btnInfo) {
            this.$emit('cardBtnClick', btnInfo);
        },
        cardRecordClick(linkInfo, cardType) {
            if (linkInfo) {
                ubcSend({
                    type: 'clk',
                    value: 'cardRecord',
                    ext: {
                        pd: 'member',
                        value_id: cardType
                    }
                });
                navigate({
                    url: linkInfo.url,
                    // log: {
                    //     type: 'clk',
                    //     value: 'cardRecord',
                    //     ext: {
                    //         pd: 'member',
                    //     }
                    // }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.custom-item {
    height: 100%;

    &__content {
        display: flex;
        padding: 9.17vw 0 0 5.79vw;

        &__avatar {
            width: 13.04vw;
            height: 13.04vw;
            flex-shrink: 0;

            &__img {
                width: 13.04vw;
                height: 13.04vw;
                border-radius: 50%;
            }
        }

        &__info {
            flex: 1;
            margin-top: .03rem;

            &__uname {
                color: #323333;
                font-weight: bold;
                display: flex;
                align-items: center;
            }

            &__name {
                color: #667288;
                font-weight: bold;
            }

            &__validity {
                color: #83859f;
            }
        }
    }

    &__link {
        position: absolute;
        bottom: 11.11vw;
        left: 7.72vw;
        color: #83859f;
    }

    &__btn {
        position: absolute;
        bottom: 8.695vw;
        right: 6.28vw;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10.14vw;
        text-align: center;
        background: #eff5ff;
        border-radius: .6rem;
        box-sizing: border-box;

        &__text {
            color: #667288;
            font-weight: bold;
            padding: 0 4.1vw;
        }
    }

    &__tag {
        position: absolute;
        right: .3rem;
        bottom: .72rem;
        height: .2rem;
        color: #f9f9f9;
        border-radius: .6rem;
        background-image: linear-gradient(134deg, #fe803d 0%, #fd5b3f 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        font-weight: bold;
        padding: 0 .08rem;

        &::after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: .04rem solid transparent;
            border-top-color: #ff6145;
            margin-left: -.04rem;
            bottom: -.08rem;
            right: .16rem;
        }
    }

    &__status {
        position: absolute;
        right: 1px;
        top: 0;
        width: 16.42vw;
        height: 15.5vw;
        // width: 17.47vw;
        // height: 16.42vw;
        // width: 19.66vw;
        // height: 18.15vw;
    }

    // 过期角标 体验卡和年卡一样角标
    &.status3 {
        .custom-item__status {
            background: url("https://medactivity.cdn.bcebos.com/vip/corner_ydq.png") no-repeat;
            background-size: 100% auto;
        }
    }

    &.type1 {
        background: url("https://medactivity.cdn.bcebos.com/vip/tyVipCardBg.png") no-repeat;
        background-size: 100% auto;
        // 体验卡未开通角标
        &.status1 {
            .custom-item__status {
                background: url("https://medactivity.cdn.bcebos.com/vip/corner_wlq.png") no-repeat;
                background-size: 100% auto;
            }
        }
        // 体验卡已开通角标
        &.status2 {
            .custom-item__status {
                background: url("https://medactivity.cdn.bcebos.com/vip/corner_ylq.png") no-repeat;
                background-size: 100% auto;
            }
        }
    }

    &.type2 {
        background: url("https://medactivity.cdn.bcebos.com/vip/vipCardBg1.png") no-repeat;
        background-size: 100% auto;

        .custom-item__content {
            .custom-item__content__info {
                .custom-item__content__info__uname {
                    color: #402200;
                }

                .custom-item__content__info__name {
                    color: #7d5012;
                }

                .custom-item__content__info__validity {
                    color: #a28767;
                }
            }
        }

        .custom-item__link {
            color: #a28767;
        }

        .custom-item__btn {
            background: #ffeed4;

            .custom-item__btn__text {
                color: #402200;
            }

            &.disabled {
                border: 1px solid #d4a75b;
                background: transparent;

                .custom-item__btn__text {
                    color: #bc8a3e;
                }
            }
        }

        // 年卡未开通角标
        &.status1 {
            .custom-item__status {
                background: url("https://medactivity.cdn.bcebos.com/vip/corner_wkt.png") no-repeat;
                background-size: 100% auto;
            }
        }
        // 年卡已开通角标
        &.status2,
        &.status4 {
            .custom-item__status {
                background: url("https://medactivity.cdn.bcebos.com/vip/corner_ykt.png") no-repeat;
                background-size: 100% auto;
            }
        }
    }

    &.type3 {
        background: url("https://medactivity.cdn.bcebos.com/vip/ygcardbg.png") no-repeat;
        background-size: 100% auto;

        .custom-item__content {
            padding: 8.21vw 0 0 7.72vw;

            .custom-item__content__info {
                margin-left: .1rem;

                .custom-item__content__info__uname {
                    color: #fde3b7;
                }

                .custom-item__content__info__name {
                    color: #fde3b7;
                }

                .custom-item__content__info__validity {
                    color: #7f8287;
                }
            }
        }
        // 员工卡已开通角标
        &.status2,
        &.status4 {
            .custom-item__status {
                background: url("https://medactivity.cdn.bcebos.com/vip/ygcardgeted.png?x-bce-process=image/auto-orient,o_1/resize,w_207,limit_1/quality,Q_85") no-repeat;
                background-size: 100% auto;
            }
        }
    }
}
</style>
