<template>
    <view>
        <view class="act-ticket" @tap.stop="onOpen">
            <image class="act-ticket-img" src="https://med-fe.cdn.bcebos.com/physical/baidubutie.png"/>
            <view class="act-ticket-redPacket">
                <view
                    v-for="(tag, tagIndex) in tags.value "
                    :key="tagIndex"
                    class="act-ticket-redPacket-i c-font-normal"
                >
                    {{ tag }}
                </view>
            </view>
            <view class="act-ticket-btn">
                <span>{{ tags.text }}</span>
                <c-icon name="right" font-size="14px"/>
            </view>
        </view>
        <c-popup
            :show="show"
            :z-index="'921'"
            :title="popupTile"
            :title-style="{fontSize: '18px'}"
            :show-close="true"
            :show-close-handler="false"
            max-height="390px"
            height="390px"
            stop-scroll-through
            border-radius="21px"
            close-icon="close"
            close-icon-size="23px"
            class="rule-popup"
            scroll-view
            :btns="btns"
            @close="onClose"
            @masktap="onClose"
        >
            <!-- <view class="act-ticket-popup"> -->
            <view v-if="coupons && coupons.length" class="c-gap-top">
                <view
                    v-for="(coupon, ticketIndex) in coupons"
                    :key="ticketIndex"
                    class="c-gap-bottom-middle"
                >
                    <ticket-item
                        :ticket="coupon"
                        card-type="weaken"
                        :log-info="logInfo"
                        @onClick="onTicketBtnClick"
                        @onUpdate="onTicketBtnClick('update')"
                    />
                </view>
            </view>
            <view v-if="!coupons.length && !tips.length" class="c-color-333 act-ticket-none">{{ !init ? '加载中...' : '来晚一步，优惠券已被领光~' }}</view>
            <!-- </view> -->
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 活动券
 * @author  hongzhou@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
/* eslint-disable */
/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/Label';
import TicketItem from '../physical/ticket-item';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup,
        CLabel,
        TicketItem,
        CIcon
    },
    props: {
        /* tag */
        tags: {
            type: Object,
            default: () => {}
        },
        /* sku id */
        serviceId: String,
        /* 优惠券浮层列表 */
        coupons: {
            type: Array,
            default: () => []
        },
        /* 展现类型 */
        type: {
            type: String,
            default: 'normal'
        },
        /* popupTile */
        popupTile: {
            type: String,
            default: '优惠'
        },
        showCoupon: {
            type: Boolean,
            default: false
        },
        /* 打点信息 */
        logInfo: {
            type: String,
            default: ''
        },
        // ubc打点必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    mounted() {
        if (this.showCoupon) {
            this.$nextTick(() => {
                this.show = true;
                ubcSend({
                    page: this.page,
                    type: 'view',
                    value: this.logInfo + '_coupon_half'
                });
            })
        }
    },
    data() {
        return {
            show: false,
            tips: [],
            init: false,
            // 强制更新优惠券列表
            isUpdateList: false,
            btns: [{
                text: '完成',
                type: 'primary',
                color: '#FD503E'
            }]
        };
    },
    methods: {
        onOpen() {

            ubcSend({
                page: this.page,
                type: 'clk',
                value: this.logInfo + '_coupon'
            });

            this.show = true;

            ubcSend({
                page: this.page,
                type: 'view',
                value: this.logInfo + '_coupon_half'
            });
        },
        onClose() {
            this.show = false;
            this.$emit('closeCoupon');
        },
        onTicketBtnClick(type) {
            if (type === 'update') {
                // 下次点击领券btn，去强制更新列表
                this.isUpdateList = false;
                /* 刷新页面 */
                this.$emit('onUpdate');
            }
            else {
                this.show = false;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.act-ticket {
    background: #FFF3F3;
    padding: 8px 10px;
    min-height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    
    &-img{
        width: 54px;
        height: 12px;
    }

    &-redPacket{
        flex: 1;
        display: flex;
        margin-left: 5px;
        flex-flow: wrap;
        height: 24px;
        overflow: hidden;

        &-i {
            background: #FF4C3E;
            color: #FFF;
            padding: 6px 12px;
            border-radius: 4px;
            margin-left: .06rem;
            display: inline-block;
            position: relative;
            line-height: 12px;
            font-size: 12px;
            white-space: nowrap;
            
            &::before,&::after {
                content: '';
                width: .06rem;
                height: .06rem;
                border-radius: .03rem;
                background: #FFF3F3;
                position: absolute;
                z-index: 1;
                top: 50%;
                transform: translateY(-50%);
            }

            &::before {
                left: -.03rem;
            }

            &::after {
                right: -.03rem;
            }
        }
    }

    &-btn {
        line-height: .2rem;
        width: 44px;
        white-space: nowrap;
        color: #EA5B46;
        font-weight: 500;
        font-family: PingFangSC-Medium;
        
        .right-icon {
            position: relative;
            top: -.01rem;
        }
    }
    &-none {
        padding: 12vh 0 21vh 0;
        text-align: center;
    }
}
</style>
