<template>
    <view
        v-if="isShow"
        class="coupon-pop-wrap"
        @tap="close"
    >
        <view
            class="coupon-card"
            :class="item.tickets && item.tickets.length === 1 ? 'coupon-card-offset' : ''"
            @tap.stop
        >
            <view
                v-if="item.title"
                class="coupon-card-title"
            >
                {{ item.title }}
            </view>
            <view
                v-if="item.subtitle"
                class="coupon-card-subtitle"
            >
                {{ item.subtitle }}
            </view>
            <!-- 激励任务 -->
            <view v-if="item.style === 'mission'">
                <view
                    v-for="(ticket, index) in item.tickets"
                    :key="index"
                    class="tsk-row c-gap-top-large c-gap-inner-left c-gap-inner-right c-gap-inner-left c-gap-inner-right c-row"
                >
                    <view class="tsk-left c-span-middle">
                        <view>
                            <c-image
                                :src="ticket.icon"
                                width="37px"
                                height="37px"
                                class="c-inline-block"
                            />
                            <view class="c-inline-block c-gap-inner-left-middle">
                                <view class="c-line-clamp1 tsk-row-title c-font-15">{{ ticket.title }}</view>
                                <view class="c-line-clamp1 tsk-row-text c-font-small">{{ ticket.subtitle }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="tsk-right c-span-middle">
                        <c-button
                            type="primary"
                            background="linear-gradient(42deg, #07D2C7 0%, #2FEBA7 100%)"
                            border-radius="20px"
                            :height="28"
                            :font-size="13"
                            class="tsk-row-btn"
                            @tap="onTapBtn(ticket)"
                        >{{ ticket.btnText }}</c-button>
                    </view>
                </view>
            </view>
            <!-- 卡券 -->
            <view
                v-else
                class="c-gap-inner-bottom-large coupon-card-list"
            >
                <view
                    v-for="(ticket, index) in item.tickets"
                    :key="index"
                    class="coupon-card-ticket c-gap-top"
                    @tap="close"
                >
                    <view
                        v-if="ticket.priceText"
                        :class="['card-free',
                                 (ticket.useStatus === '0') ? '' : 'ticket-used']"
                    >
                        {{ ticket.priceText }}
                    </view>
                    <view
                        v-else
                        :class="['card-value',
                                 (ticket.useStatus === '0') ? '' : 'ticket-used']"
                    >
                        <text class="card-value-num">{{ ticket.price }}</text>元
                    </view>
                    <view class="card-info">
                        <view
                            :class="['card-info-title', 'card-info-maintitle',
                                     (ticket.useStatus === '0') ? '' : 'ticket-used']"
                        >{{ ticket.title }}</view>
                        <view
                            :class="['card-info-title', 'card-info-subtitle',
                                     (ticket.useStatus === '0') ? '' : 'ticket-used']"
                        >{{ ticket.subtitle }}</view>
                        <view
                            :class="['card-info-title', 'card-info-subtitle',
                                     (ticket.timecolor && ticket.timecolor === 1) ? 'card-hightlight' : '',
                                     (ticket.useStatus === '0') ? '' : 'ticket-used']"
                        >{{ ticket.times }}</view>
                    </view>
                    <view
                        v-if="ticket.watermark "
                        class="card-stamp"
                        :style="{'background-image': 'url(' + ticket.watermark + ')'}"
                    />
                </view>
            </view>
            <view class="coupon-card-declaim">
                {{ item.warning }}
                <navigate
                    :url="item.url"
                    class-name="c-inline c-line-bottom"
                >
                    {{ item.linkText }}
                </navigate>
            </view>
            <view
                v-if="item.btnText"
                class="coupon-card-btn"
                @tap="close"
            >{{ item.btnText }}</view>
            <c-icon
                name="close"
                font-size="20px"
                :style="{
                    color: '#fff',
                }"
                class="coupon-card-close"
                @tap="close"
            />
        </view>
    </view>
</template>

<script>
/**
* @file 问诊-免费券弹窗
* @author huanghongwei
*/
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Button from '@baidu/med-ui/components/Button/Button';
import Image from '../common/image';
import Navigate from '../common/navigate';
import {request} from '../../utils/request';
import {send} from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        item: {
            type: [Object, Array],
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            isShareSuccess: false
        };
    },
    components: {
        'navigate': Navigate,
        'c-icon': Icon,
        'c-image': Image,
        'c-button': Button
    },
    methods: {
        close() {
            this.$emit('close');
        },
        onTapBtn(data) {
            send({
                type: 'b',
                action: 'coupon_share'
            });
            // 兼容分享后，留在分享渠道，重新打开小程序，swan api回调不触发的问题
            const timeid = setTimeout(() => {
                this.share(data, 'wz_share_time');
                clearTimeout(timeid);
            }, 6000);
            this.$api.openShare({
                title: data.shareTitle,
                content: data.shareContent,
                path: data.sharePath,
                imageUrl: data.imageUrl,
                success: () => {
                    /* eslint-disable no-undef */
                    share(data, 'wz_share_cb');
                }
            });
        },
        // 分享成功请求，告知后端分享状态
        share(data, from) {
            if (this.isShareSuccess) {
                return;
            }
            // 分享成功
            request({
                url: data.callback,
                data: {
                    tg: from
                }
            }).then(res => {
                this.isShareSuccess = true;
                this.$emit('update', res.data);
            });
        }
    }
};
</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;
        width: 3.3rem;
        padding: .35rem 0 .3rem;
        margin: 0 auto;
        background-image: linear-gradient(135deg, #00CEA1 0%, #01D3E6 100%);
        border-radius: .09rem;
        border-radius: .09rem;
        color: #FFFFFF;
        text-align: center;
        &-offset {
            margin-top: -1rem;
        }
        &-title {
            font-family: PingFangSC-Semibold;
            font-size: .21rem;
            letter-spacing: 0;
        }
        &-subtitle {
            margin: .08rem 0 .1rem;
            font-family: PingFangSC-Regular;
            font-size: .14rem;
            letter-spacing: 0;
        }
        &-ticket {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            padding: .15rem 0;
            width: 2.78rem;
            background-image: url('https://expertimg.cdn.bcebos.com/expertcms%2Fmed%2Fallhealth%2Fback.png') ;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            .card-free {
                width: .78rem;
                font-family: PingFangSC-Medium;;
                font-size: .20rem;
                color: #FF6600;
                letter-spacing: 0;
                line-height: .16rem;
            }
            .card-hightlight {
                color: #FF6600;
            }
            .card-value {
                width: .78rem;
                font-family: PingFangSC-Regular;
                font-size: .14rem;
                color: #FF6600;
                letter-spacing: 0;
                line-height: .16rem;
                &-num {
                    font-size: .33rem;
                    line-height: .33rem;
                    font-family: PingFangSC-Medium;
                }
            }
            .card-info {
                font-family: PingFangSC-Regular;
                color: #013D3E;
                letter-spacing: 0;
                overflow: hidden;
                &-title {
                    font-size: .16rem;
                    line-height: .16rem;
                    width: 100%;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    text-align: left;
                }
                &-maintitle {
                    margin-bottom: .1rem;
                }
                &-subtitle {
                    font-size: .12rem;
                    line-height: .12rem;
                    margin-top: .05rem;
                }
                &-subtitle:nth-child(2) {
                    margin-top: -.05rem;
                }
            }
            .ticket-used {
                opacity: 0.5;
            }
            .card-stamp {
                position: absolute;
                right: .07rem;
                bottom: -.1rem;
                width: .5rem;
                height: .5rem;
                background-size: 100% 100%;
            }
        }
        &-list {
            max-height: 300px;
            overflow: auto;
        }
        &-declaim {
            opacity: .9;
            font-family: PingFangSC-Regular;
            font-size: .12rem;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: .2rem;
            padding: 0 .26rem;
            text-align: left;
        }
        &-btn {
            position: absolute;
            bottom: -.14rem;
            left: 50%;
            width: 2.4rem;
            height: .38rem;
            margin-left: -1.2rem;
            background: #FFFFFF;
            border-radius: .19rem;
            border-radius: .19rem;
            font-family: PingFang-SC-Medium;
            font-size: .16rem;
            color: #00C8C8;
            letter-spacing: 0;
            line-height: .38rem;
            text-align: center;
        }
        &-close {
            position: absolute;
            right: .07rem;
            top: .05rem;
            opacity: .8;
        }
        .tsk-row {
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 3px;
            height: .73rem;
            width: 2.9rem;
            margin-left: auto;
            margin-right: auto;
            display: flex;
        }
        .tsk-right {
            position: relative;
        }
        .tsk-row-title {
            text-align: left;
            color: #013D3E;
            font-weight: bold;
        }
        .tsk-row-text {
            color: #013D3E;
            opacity: .6;
            margin-top: -.02rem;
        }
    }
}
</style>
