<template>
    <view
        class="coupon-pop-wrap"
        @tap="close">
        <view class="coupon-card" @tap.stop>
            <image
                v-if="item.bandIcon"
                :src="item.bandIcon"
                class="coupon-card-brandicon"
                mode="widthFix"
            />
            <image
                v-if="item.headIcon"
                :src="item.headIcon"
                class="coupon-card-headicon c-gap-top-small"
                mode="widthFix"
            />
            <!-- 卡券 -->
            <view
                v-if="item.tickets && item.tickets.length > 0"
                class="c-gap-inner-bottom coupon-card-list">
                <view
                    class="coupon-card-ticket c-gap-top"
                    v-for="ticket in item.tickets"
                    :style="{
                        'background-image': 'url(' + ticket.bgUrl + ')'
                    }">
                        <view v-if="ticket.priceText" class="card-free">{{ticket.priceText}}</view>
                        <view class="card-info">
                            <view v-if="ticket.ticketName" class="card-info-title">{{ticket.ticketName}}</view>
                            <view v-if="ticket.slogan" class="card-info-title card-info-subtitle">{{ticket.slogan}}</view>
                            <view v-if="ticket.time" class="card-info-title card-info-subtitle ">{{ticket.time}}</view>
                        </view>
                </view>
            </view>
            <view v-if="item.descs && item.descs.length > 0" class="coupon-card-declaim c-gap-bottom">
                <view v-for="desc in item.descs">
                    <text v-if="desc.type === 'text'">{{desc.text}}</text>
                </view>
            </view>
            <view
                v-if="item.btn"
                class="coupon-card-btn"
                @tap="onBtnTap(item.btn)">{{item.btn.text}}</view>
            <c-icon
                name="close-circle"
                font-size="40px"
                :style="{
                    color: '#fff'
                }"
                class="coupon-card-close"
                @tap="close"/>
        </view>
    </view>
</template>

<script>
/**
* @file 问诊-权益保障优惠券弹窗
* @author huanghongwei
* @categories 业务组件
* @tags [component]
*/
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 参数
        */
        item: {
            type: Object,
            default: {}
        }
    },
    components: {
        'CIcon': Icon
    },
    methods: {
        close() {
            /**
             * 关闭弹窗事件
            */
            this.$emit('close');
        },
        onBtnTap(item) {
            if (item.msUrl) {
                navigate({
                    url: item.msUrl
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.coupon-pop-wrap {
    display: flex;
    align-items: center;
    z-index: 999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    .coupon-card {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 300px;
        padding: 20px 0;
        margin: 0 auto;
        background-image: linear-gradient(135deg, #00CEA1 0%, #01D3E6 100%);
        border-radius: 9px;
        color: #FFFFFF;
        &-brandicon {
            width: 72px;
            height: auto;
        }
        &-headicon {
            width: 170px;
            height: auto;
        }
        &-ticket {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 260px;
            min-height: 100px;
            background-size: 100% 100%;
            .card-free {
                width: 37%;
                height: 100%;
                font-family: PingFangSC-Medium;
                font-size: 25px;
                color: #FF6600;
                text-align: center;
            }
            .card-info {
                width: 60%;
                height: 100%;
                font-family: PingFangSC-Medium;
                color: #C19D7E;
                letter-spacing: 0;
                overflow: hidden;
                &-title {
                    width: 90%;
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    text-align: left;
                }
                &-subtitle {
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                }
            }
        }
        &-list {
            max-height: 300px;
            overflow: auto;
        }
        &-declaim {
            opacity: .9;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 20px;
            padding: 0 26px;
            text-align: left;
        }
        &-btn {
            width: 240px;
            height: 38px;
            background: #FFFFFF;
            border-radius: 19px;
            font-family: PingFang-SC-Medium;
            font-size: 16px;
            color: #00C8C8;
            letter-spacing: 0;
            line-height: 38px;
            text-align: center;
        }
        &-close {
            position: absolute;
            left: 50%;
            bottom: -50px;
            margin-left: -20px;
            opacity: .8;
        }
    }
}
</style>