<template>
    <view
        class="record-item c-gap-top"
        :class="{
            'record-item--disable': data.status !== 1,
        }"
    >
        <view class="record-item__title c-font-medium">{{ data.vipName }}</view>
        <view class="record-item__cont c-font-normal">
            <view v-if="data.validityTime" class="record-item__cont__validity">{{ data.validityTime }}</view>
            <view v-else-if="data.buyDate" class="record-item__cont__date">{{ data.buyDate }}</view>
            <view v-if="data.price" class="record-item__cont__price">
                <text class="record-item__cont__price__unit">{{ data.status === 4 ? '退款¥' : '¥' }}</text>
                <text class="record-item__cont__price__text">{{ data.price }}</text>
            </view>
        </view>
        <view class="record-item__tips">
            <view v-if="data.refundDate" class="record-item__tips__refund c-font-normal">{{ data.refundDate }}</view>
            <view v-else-if="data.buyDate" class="record-item__tips__buy c-font-normal">{{ data.buyDate }}</view>
            <view class="record-item__tips__beyond c-font-small">{{ data.refundText }}</view>
        </view>
        <view
            class="record-item__cont__bubble c-font-small"
            :style="{
                'background-image': 'url(' + data.statusBackground + ')',
            } | imgCompress('background-image')"
        >{{ data.statusText }}</view>
    </view>
</template>

<script>
/**
 * @file 退款记录Item
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            num: 0
        };
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    }
};
</script>
<style lang="less" scoped>
.record-item {
    position: relative;
    background: #f5f5f5;
    height: 1.02rem;
    border-radius: 0.1rem;
    padding: 0 0.13rem;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &__cont {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        &__price {
            font-weight: bold;
            height: 0.25rem;
            flex-shrink: 0;

            &__unit {
                font-size: 0.14rem;
                margin-right: 0.03rem;
            }

            &__text {
                font-size: 0.22rem;
            }
        }

        &__validity {
            color: #666;
        }

        &__bubble {
            position: absolute;
            right: -2px;
            top: 0;
            color: #fff;
            font-weight: bold;
            width: 0.56rem;
            height: 0.21rem;
            text-align: center;
            line-height: 0.18rem;
            background-size: 100% 100%;
        }
    }

    &__tips {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &__buy {
            color: #999;
        }

        &__refund {
            color: #b5b5b5;
        }

        &__beyond {
            color: #b5b5b5;
        }
    }

    &__title {
        font-weight: bold;
    }

    &--disable {
        background: #fafafa;
        color: #b5b5b5;

        .record-item__cont__validity {
            color: #b5b5b5;
        }
    }
}
</style>
