<template>
    <view v-if="(priceOff && priceOff.length) || (tickets && tickets.length)">
        <view
            @tap.stop="onOpen"
        >
            <view
                v-if="type === 'normal'"
                class="act-ticket"
            >
                <view
                    class="act-ticket-tag"
                >
                    <view class="act-ticket-tag__scroll">
                        <!-- <view
                            v-if="tickets && tickets.length"
                            class="act-ticket-tag__i c-gap-right-small"
                        >
                            {{ tickets[0].subtitle }}
                        </view> -->
                        <view
                            v-for="(tag, tagIndex) in priceTag"
                            :key="tagIndex"
                            :class="['act-ticket-tag__i', 'act-ticket-tag__i--' + tag.color, 'c-gap-right-small']"
                        >
                            {{ tag.text }}
                        </view>
                    </view>
                    <view
                        class="act-ticket-tag__btn"
                        :class="{
                            'act-ticket-tag__btn__tickets': btnHasBgc,
                        }"
                    >
                        <view
                            class="act-ticket-tag__btn__wrap"
                            :class="{
                                'c-color-mall-gradient': btnHasBgc,
                            }"
                        >
                            <text :class="btnColor">{{ btnText }}</text>
                            <c-icon
                                :class="btnColor"
                                font-size="13px"
                                name="more"
                                class="icon right-icon"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-else-if="type === 'separate'"
                class="act-separate"
            >
                <!-- 满减标签 -->
                <view
                    v-if="priceOff && priceOff.length"
                    class="act-separate__off c-gap-bottom c-gap-inner-bottom-mini"
                >
                    <view
                        class="act-separate__off__tag"
                    >
                        <c-label
                            v-for="(bdItem, index) in priceOffList"
                            :key="index"
                            :font-size="12"
                            :color="'box_' + bdItem.color"
                            :text="bdItem.label"
                            class="c-gap-right-small c-inline-block"
                        />
                    </view>
                    <view
                        class="act-separate__off__handler"
                    >
                        <text
                            class="c-inline-block c-font-normal c-color-gray"
                        >{{ (priceOff.length || 0) + (tickets.length || 0) }}个优惠</text>
                        <c-icon
                            name="more"
                            font-size="12px"
                            :style="{
                                color: '#858585',
                                'margin-right': '-3px',
                            }"
                        />
                    </view>
                </view>
                <!-- 优惠券 -->
                <view
                    v-if="tickets.length"
                    class="act-separate__tickets"
                >
                    <scroll-view
                        scroll-x
                        class="act-separate__tickets__scroll"
                    >
                        <view
                            v-for="(ticket, ticketIndex) in tickets"
                            :key="ticketIndex"
                            class="act-separate__tickets__item-box"
                        >
                            <ticket-item
                                :ticket="ticket"
                                card-type="small"
                                @onClick="onTicketBtnClick"
                            />
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <!--
            :height="'calc(100vh - 120px)'"
         -->
        <c-popup
            :show="show"
            :z-index="'921'"
            :title="'优惠'"
            :show-close="true"
            :show-title-line="false"
            show-close-handler
            min-height="50vh"
            :max-height="'calc(100vh - 150px)'"
            :btns="btns"
            class="rule-popup"
            scroll-view
            @close="onClose"
            @masktap="onClose"
        >
            <view class="c-gap-inner-bottom-large">
                <view v-if="tickets && tickets.length">
                    <view class="c-gap-bottom c-gap-top">领券</view>
                    <view>
                        <view
                            v-for="(ticket, ticketIndex) in tickets"
                            :key="ticketIndex"
                            class="c-gap-bottom"
                        >
                            <ticket-item
                                :ticket="ticket"
                                card-type="weaken"
                                @onClick="onTicketBtnClick"
                            />
                        </view>
                    </view>
                </view>
                <view v-if="priceOff && priceOff.length">
                    <view class="c-gap-inner-bottom">促销</view>
                    <view
                        v-for="(item, index) in priceOff"
                        :key="index"
                        class="c-gap-bottom c-flex-row bz-info"
                    >
                        <view class="c-span1 tit">
                            <view
                                v-if="item.icon"
                                class="m-icon"
                                :class="'m-icon-' + item.icon"
                            />
                            <view
                                v-else
                            >
                                <c-label
                                    :text="item.badge"
                                    font-size="12"
                                    height="16"
                                    padding="5"
                                    custom
                                    color="#fd503e"
                                    bg-color="rgba(253,80,62,.1)"
                                    border-color="#fd503e"
                                />
                            </view>
                        </view>
                        <view class="c-span11 cic">
                            <view v-if="item.label" class="c-color">{{ item.label }}</view>
                            <view v-if="item.explain" class="c-color-gray c-font-13">{{ item.explain }}</view>
                            <view v-if="item.desc" class="c-color-gray c-font-13">{{ item.desc }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </c-popup>
    </view>
</template>
<script>
/**
 * @file 优惠
 * @author zhangeryi@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
/* eslint-disable */
/* global Page swan  getApp */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CLabel from '@baidu/med-ui/components/Label/Label';
import TicketItem from '@components/brand/ticket-item';
import CouponList from '@components/vaccine/CouponList';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CPopup,
        CLabel,
        TicketItem,
        CouponList
    },
    props: {
        priceOff: {
            type: Array,
            default: () => []
        },
        priceTag: {
            type: Array,
            default: () => []
        },
        tickets: {
            type: Array,
            default: () => []
        },
        // 是否有活动腰封
        hasPromotion: {
            type: Boolean,
            default: false
        },
        /**
         * 展现类型；separate: 分离样式，normal：默认样式
         */
        type: {
            type: String,
            default: 'normal'
        },
        // 是否有券后价
        hasCalced: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        show(v) {
            this.$emit('popupUpdate', v);
            if (!v) {
                // 关闭弹窗后更新券信息
                this.$emit('updateTicket');
            }
        }
    },
    data() {
        return {
            show: false,
            btns: [],
            /*
                {
                    text: '确定',
                    color: '#fff',
                    background: 'linear-gradient(125deg, #FE7429 0%, #FF2C54 100%)'
                }
            */ 
        };
    },
    computed: {
        btnText() {
            return this.tickets && this.tickets.length ? '领券' : '查看';
        },
        btnHasBgc() {
            return (this.tickets && this.tickets.length && (this.hasPromotion || !this.hasCalced));
        },
        btnColor() {
            return this.btnHasBgc ? 'c-color-w' : 'c-color-mall';
        },
        // 只展示前三个优惠标签
        priceOffList(){
            if(this.priceOff && this.priceOff.length){
                return this.priceOff.slice(0,3);
            }
            return [];
        }
    },
    methods: {
        onOpen() {
            this.show = true;
        },
        onClose() {
            this.show = false;
        },
        onTicketBtnClick() {
            this.show = false;
        }
    }
};
</script>
<style lang="less" scoped>
.act-ticket {
    background: #fff;
    padding-top: .06rem;
    padding-bottom: .04rem;

    &-tag {
        position: relative;
        min-height: .26rem;
        padding-right: .5rem;

        &__scroll {
            height: .23rem;
            line-height: 0;
            overflow: hidden;
        }

        &__i {
            background: rgba(255, 230, 230);
            color: #fd503e;
            font-size: .14rem;
            line-height: .14rem;
            padding: .05rem .08rem;
            border-radius: .03rem;
            display: inline-block;
            position: relative;

            &--yellow {
                background: rgba(255, 235, 222);
                color: #f60;
            }

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%, -50%);
                width: .08rem;
                height: .08rem;
                background: #fff;
                border-radius: 100%;
            }

            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translate(50%, -50%);
                width: .08rem;
                height: .08rem;
                background: #fff;
                border-radius: 100%;
            }
        }

        .c-color-w {
            color: #fff;
        }

        .c-color-o {
            color: #f60;
        }

        .act-ticket-tag__btn__wrap {
            padding: 0 .05rem 0 .12rem;
        }

        &__btn__tickets {
            .act-ticket-tag__btn__wrap {
                color: #f60;

                &::before {
                    display: block;
                    background: rgba(255, 255, 255, .7);
                    width: 40px;
                    height: 100%;
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    animation: glint 3s linear 2s infinite;
                    filter: blur(30px);
                    transform: translateX(0) skewX(-15deg);
                    opacity: .6;
                }

                &::after {
                    display: block;
                    background: rgba(255, 255, 255, .5);
                    width: 20px;
                    height: 100%;
                    position: absolute;
                    content: '';
                    left: 60px;
                    top: 0;
                    animation: glintier 3s linear 2s infinite;
                    filter: blur(5px);
                    transform: translateX(100%) skewX(-15deg);
                    opacity: 1;
                }
            }
        }

        &__btn {
            position: absolute;
            top: 1px;
            right: -.13rem;

            &__wrap {
                overflow: hidden;
                position: relative;
                height: .24rem;
                color: #fd503e;
                border-top-left-radius: 33px;
                border-bottom-left-radius: 33px;
                font-size: .14rem;
                line-height: .24rem;
                padding: 0 .11rem 0 .12rem;
            }
        }
    }
}

.act-separate {
    &__off {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 0.1rem;
        overflow: hidden;

        &__tag {
            height: .22rem;
        }

        &__handler {
            flex: none;
            white-space: nowrap;
        }
    }

    &__tickets {
        &__scroll {
            white-space: nowrap;
        }

        &__item-box {
            vertical-align: top;
            display: inline-block;
            margin-right: 0.08rem;
        }
    }
}

.bz-info {
    .tit {
        white-space: nowrap;
        width: auto;
        flex: none;
        padding-left: 0;

        .m-icon {
            color: #fd503e;
        }
    }

    .cic {
        padding-right: 0;
    }
}
@keyframes glint {
    0% {
        transform: translateX(-400%) skewX(-15deg);
        opacity: 0;
    }

    75% {
        transform: translateX(-400%) skewX(-15deg);
        opacity: .6;
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 1;
    }
}
@keyframes glintier {
    0% {
        transform: translateX(-400%) skewX(-15deg);
        opacity: 0;
    }

    75% {
        transform: translateX(-400%) skewX(-15deg);
        opacity: .6;
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 1;
    }
}
</style>