<template>
    <view class="coupon-wrap">
        <view v-if="title" class="coupon-wrap__title">
            <view class="coupon-wrap__title__line"/>
            <view class="coupon-wrap__title__text c-font-medium">{{ title }}</view>
            <view class="coupon-wrap__title__line"/>
        </view>
        <view class="coupon-wrap__list">
            <view 
                v-for="(item, index) in list" 
                :key="index"
                class="coupon-wrap__list__item img-bg c-span4" 
                :class="{'gray': item.status != '1'}"
                @tap="onItemTap(item, index)"
            >
                <view class="coupon-wrap__list__item__price">
                    <text class="coupon-wrap__list__item__price__unit c-font-normal">￥</text>
                    <text class="coupon-wrap__list__item__price__val">{{ item.price }}</text>
                </view>
                <view class="coupon-wrap__list__item__desc c-font-small">{{ item.desc }}</view>
                <view class="coupon-wrap__list__item__btn c-font-normal">{{ item.btnText }}</view>
                <view v-if="item.num" class="coupon-wrap__list__item__num img-bg c-font-small">{{ item.num }}张</view>
            </view>
        </view>
    </view>
</template>

<script>
import {navigate} from '@utils/navigate';
import { ubcSend } from '@utils/log';
/**
 * @file 优惠券列表
 * @author jiaxiangju
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
    },
    data() {
        return {};
    },
    props: {
        /**
         * 列表数据
         */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        title: {
            type: String,
            default: ''
        },
        /**
         * 日志
         */
        log: {
            type: Object,
            default: () => {
                return {
                    value: '',
                    ext: {
                    }
                };
            }
        }
    },
    methods: {
        onItemTap(item) {
            if (item.url && item.status == 1) {
                let urlType = item.url.indexOf('/gy/medstorehome/index') !== -1 ? 5 : 0;
                ubcSend({
                    type: 'clk',
                    value: this.log.value,
                    ext: Object.assign({
                        pd: 'member',
                    }, this.log.ext || {})
                });
                navigate({
                    url: item.url,
                    urlType,
                    // log: {
                    //     type: 'clk',
                    //     value: this.log.value,
                    //     ext: Object.assign({
                    //         pd: 'member',
                    //         value_type: 'coupon',
                    //         value_id: item.mkId
                    //     }, this.log.ext || {})
                    // }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.img-bg {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.coupon-wrap {
    &__title {
        display: flex;
        justify-content: center;
        align-items: center;
        &__text {
            color: #D19443;
            font-weight: bold;
            padding: 0 .15rem;
        }
        &__line {
            flex: 1;
            opacity: 0.4;
            border-top: 1px dashed #D19443;
        }
    }
    &__list {
        margin-top: .15rem;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: normal;
        &__item {
            position: relative;
            flex: initial;
            // overflow: hidden;
            margin-bottom: .2rem;
            background-image: url(https://medactivity.cdn.bcebos.com/vip/coupon_bg.png);
            margin-right: 2%;
            padding: 0;
            width: 32%;
            height: 29vw;
            text-align: center;
            &.gray {
                background-image: url(https://medactivity.cdn.bcebos.com/vip/coupon_bg_gray.png);
                .coupon-wrap__list__item__price,
                .coupon-wrap__list__item__desc,
                .coupon-wrap__list__item__btn {
                    color: #B5B5B5;
                }
                .coupon-wrap__list__item__num {
                    background-image: url(https://medactivity.cdn.bcebos.com/vip/coupon_icon_gray.png);
                }
            }
            &.c-span4:nth-child(3n) {
                margin-right: 0;
            }
            &.c-span4:nth-child(3n + 1):nth-last-child(-n + 3),
            &.c-span4:nth-child(3n + 1):nth-last-child(-n + 3) ~ &.c-span4{
                margin-bottom: 0 !important;
            }
            &__price{
                text-align: center;
                margin-top: .26rem;
                font-weight: bold;
                color: #FD503E;
                &__unit {
                    // color: #FD503E;
                    font-weight: bold;
                }
                &__val {
                    font-size: .28rem;
                }
            }
            &__desc {
                color: #D19443;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &__btn {
                color: #9D6B23;
                margin-top: .1rem;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &__num {
                background-image: url(https://medactivity.cdn.bcebos.com/vip/coupon_icon.png);
                width: .37rem;
                height: .21rem;
                position: absolute;
                top: -1px;
                left: -2px;
                color: #fff;
                font-weight: bold;
            }
        }
    }
}
// @media only screen and (max-width: 375px) {
    // .coupon-wrap__list__item__price {
    //     margin-top: .18rem;
    // }
    // .coupon-wrap__list__item__btn{
    //     margin-top: .1rem;
    // }
// }
// @media only screen and (max-width: 320px) {
    // .coupon-wrap__list__item__btn{
    //     margin-top: .04rem;
    // }
// }
</style>
