<template>
    <view 
        :class="['drug-swiper', 'drug-layout' + drugLayout]"
        :style="{width: wrapperWidth / 414 * 100 + 'vw'}"
    >
        <swiper
            circular
            autoplay
            class="drug-swiper__swiperview"
            :current="swiperIndex"
            :previous-margin="__swiperMargin.left"
            :next-margin="__swiperMargin.right"
            :style="{
                height: __itemHeight,
            }"
            @change="__swiperChange"
        >
            <swiper-item
                v-for="(item, index) in data"
                :key="index"
                class="drug-swiper__swiperitem"
            >
                <view 
                    class="drug-swiper__swiperitem__inner"
                    :style="{
                        width: __itemWidth,
                    }"
                >
                    <view class="drug-swiper__drug" @tap="onTap(item)">
                        <view class="drug-swiper__drug__slogan c-line-clamp1">{{ item.slogan }}</view>
                        <view class="drug-swiper__drug__header">
                            <image :src="item.img" class="drug-swiper__drug__header__img"/>
                        </view>
                        <view class="drug-swiper__drug__title c-line-clamp1">{{ item.title }}</view>
                        <view class="drug-swiper__drug__price c-line-clamp1">
                            <view class="drug-swiper__drug__price__text">{{ item.priceText }}</view>
                            <view class="drug-swiper__drug__price__value  c-line-clamp1">
                                <price
                                    v-if="item.price"
                                    :price="item.price"
                                    u-size=".14rem"
                                    i-size=".18rem"
                                    d-size=".14rem"
                                    :p-style="{'color': '#fff'}"
                                />
                            </view>
                        </view>
                        <view v-if="item.oriPrice" class="drug-swiper__drug__oriPrice">
                            <text class="drug-swiper__drug__oriPrice__text">{{ item.oriPriceText }}</text>
                            <text class="drug-swiper__drug__oriPrice__value">¥{{ item.oriPrice }}</text>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
/**
 * @file 运营营销轮播套件（swiper必须指定高度）
 * @author xueyanhui
 * @categories 优惠券横滑
 * @tags [component]
 */
/* global getApp */
import Price from '@commonComponents/Price';
import {navigate} from '@utils/navigate';

export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    components: {
        Price
    },
    props: {
        /**
         * 优惠券列表
         */
        data: {
            type: Array,
            default: () => []
        },
        /**
         * 商品样式
         */
        drugLayout: {
            type: String,
            default: '1'
        },
        /**
         * 模块的整体宽度(设计图), 默认是414, 最后会转为vw
         */
        wrapperWidth: {
            type: Number,
            default: 414
        },
        /**
         * 每项的宽度, 单位px最后会转为vw
         */
        itemWidth: {
            type: Number,
            default: 120
        },
        /**
         * 每项的高度, 单位px最后会转为vw
         */
        itemHeight: {
            type: Number,
            default: 138
        },
        /**
         * 每项的间距, 单位px最后会转为vw
         */
        itemGap: {
            type: Number,
            default: 5
        },
        /**
         * 向前爆露多少项, 可为小数
         */
        preAmount: {
            type: Number,
            default: 1.08333
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    value: '9month_prima_bmqd'
                };
            }
        }
    },
    data() {
        return {
            swiperIndex: 0
        };
    },
    created() {
        this.swiperIndex = parseInt(this.preAmount);
    },
    computed: {
        // swiper距离前后漏出的距离
        __swiperMargin() {
            let enableDist = this.__countEnableDist();
            const right = enableDist - this.preAmount * this.itemWidth;
            return {
                left: (enableDist - right) / 414 * 100 + 'vw',
                right: right / 414 * 100 + 'vw'
            };
        },
        // 每项的宽度
        __itemWidth() {
            return this.itemWidth / 414 * 100 + 'vw';
        },
        // 每项的高度
        __itemHeight() {
            return this.itemHeight / 414 * 100 + 'vw';
        }
    },
    methods: {
        // 可用的距离
        __countEnableDist() {
            return this.wrapperWidth - this.itemWidth - this.itemGap;
        },
        __swiperChange(e) {
            this.swiperIndex = e.detail.current;
        },
        // 跳转
        onTap(item) {
            if (item && item.url) {
                navigate({
                    url: item.url,
                    log: {
                        page: this.log.page,
                        type: 'clk',
                        value: this.log.value,
                        ext: Object.assign({
                            pd: 'gene',
                            value_id: item.id
                        }, this.log.ext || {})
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.drug-swiper {
    &__swiperview {
        overflow: visible;
    }
    &__swiperitem {
        overflow: visible;
        &__inner {
            height: 100%;
        }
    }
    &__drug {
        height: 100%;
    }
}
.drug-layout1 {
    .drug-swiper {
        &__drug {
            position: relative;
            background-image: linear-gradient(138deg, #FFF6E9 0%, #FFDDA9 46%, #FFECCE 81%);
            border-radius: 0.06rem;
            overflow: hidden;
            text-align: center;
            &__slogan {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                line-height: 0.19rem;
                text-align: center;
                width: calc(100% - 0.18rem);
                margin: 0 auto;
                background-image: linear-gradient(160deg, #FF8C11 0%, #FF4128 100%);
                border-radius: 0 0 0.12rem 0.12rem;
                color: #FFE7C3;
                font-size: 0.12rem;
            }
            &__header {
                margin: 0 auto;
                margin-top: 0.08rem;
                width: 0.94rem;
                height: 0.94rem;
                border-radius: 0.06rem;
                background-color: #fff;
                overflow: hidden;
                &__img {
                    width: 100%;
                    height: 100%;
                }
            }
            &__title {
                font-weight: bold;
                font-size: 0.13rem;
                line-height: 0.17rem;
                min-height: 0.17rem;
                color: #AE6938;
                margin-top: 0.05rem;
            }
            &__price {
                margin: 0 0.04rem;
                height: 0.24rem;
                min-height: 0.24rem;
                display: flex;
                align-items: center;
                background: url('https://medactivity.cdn.bcebos.com/act9/anniu.png') no-repeat;
                background-size: 100% 100%;
                line-height: 0.24rem;
                &__text {
                    width: 0.43rem;
                    font-size: 0.12rem;
                    line-height: 0.24rem;
                    color: #ff4128;
                    text-align: center;
                    font-weight: bold;
                    flex-shrink: 0;
                }
                &__value {
                    font-weight: bold;
                    flex: 1;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-right: 0.06rem;
                }
            }
            &__oriPrice {
                font-size: 0.12rem;
                line-height: 0.22rem;
                min-height: 0.22rem;
                color: #FF4128;
                text-decoration: line-through;
            }
        }
    }
}
</style>
