<template>
    <view
        class="ticket-card"
        :style="cardStyle"
        @tap.stop="onTap(ticket, true, 'card')"
    >
        <view class="ticket-card-wrap"> 
            <view class="ticket-card-price cl-bold">
                <view class="c-inline-block c-font-normal c-gap-top">￥</view>
                <view class="c-inline-block ticket-card-price-text">{{ ticket.price }}</view>
            </view>
            <view class="ticket-card-info">
                <view v-if="ticket.title" class="ticket-card-title c-line-clamp1 cl-red ">{{ ticket.title }}</view>
                <view v-if="ticket.subtitle" class="ticket-card-subtitle cl-red c-line-clamp1">{{ ticket.subtitle }}</view>
                <view v-if="ticket.times" class="ticket-card-times cl-red c-line-clamp1">{{ ticket.times }}</view>
            </view>
            <view class="ticket-card-btn">
                <login-btn
                    v-if="btn"
                    :disabled="ticketDisabled"
                    class="ticket-card-btn-normal"
                    :class="!btn.apiUrl ? 'ticket-card-btn-received' : 'ticket-card-btn-unreceived'"
                    @onLoginSuccess="onTap(btn, false, 'btn')"
                    @onTapEndH5="onTap(btn, false, 'btn')"
                    @tap.stop
                >
                    {{ btn.text }}
                </login-btn>
            </view>
            <image
                v-if="status === 2"
                :src="IMG_GETTED"
                class="ticket-card-used"
            />
        </view>
        <view v-if="ticket.intro && ticket.intro.length === 2" class="ticket-card-note">
            <view>{{ all ? ticket.intro.join('') : ticket.intro[0] }}</view>
            <view class="ticket-card-note-icon">
                <c-icon
                    :name="all ? 'up' : 'down'"
                    font-size="12px"
                    @tap.stop="showIntro"
                />
            </view>
        </view>
        <view v-if="ticket.type" class="ticket-card-tag">{{ ticket.type }}</view>
    </view>
</template>

<script>
/**
 * @file 卡券
 * @author hongzhou@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {request} from '../../utils/request';
import {send} from '../../utils/log';
import {toLoginPage} from '../../utils/login';
import LoginBtn from '@commonComponents/login-btn';

const IMG_GETTED = 'https://med-drug.cdn.bcebos.com/getted.png';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        LoginBtn
    },
    props: {
        /* 卡券数据 */
        ticket: {
            type: Object,
            required: true
        },
        /* 是否选中 */
        isSelected: {
            'type': Boolean,
            'default': false
        },
        /* 卡片样式 */
        cardStyle: {
            type: Object,
            default: () => {}
        },
        /* 卡片类型: normal weaken banner */
        cardType: {
            type: String,
            default: 'normal'
        },
        /* 打点信息 */
        logInfo: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            btn: '',
            recieveStatus: -1,
            status: -1,
            locking: false,
            price: null,
            //是否完整展示intro
            all: false,
            IMG_GETTED,
        };
    },
    computed: {
        ticketDisabled() {
            return this.ticket.useStatus == 2 || this.ticket.useStatus == 1 || this.ticket.recieveStatus == 3;
        }
    },
    created() {
        this.btn = this.ticket.btn;
        this.recieveStatus = this.ticket.recieveStatus;
        this.status = this.ticket.status;
    },
    watch: {
        ticket(newVal) {
            this.btn = this.ticket.btn;
            this.recieveStatus = this.ticket.recieveStatus;
            this.status = this.ticket.status;
        }
    },
    methods: {
        onTap(item, type) {
            /* eslint-disable */
            if (this.status && this.status === 2) {
                send({
                    type: 'clk',
                    value: this.logInfo + '_coupon_use'
                });
                /* 点击 */
                this.$emit('onClick');
            }
            else if (item.apiUrl) {
                if (this.locking) {
                    return;
                }
                send({
                    type: 'clk',
                    value: this.logInfo + '_coupon_receive'
                });
                this.locking = true;
                request({
                    url: item.apiUrl,
                    method: 'POST',
                    data: {
                        metaId: this.ticket.market_metaid
                    },
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    isNeedLogin: false,
                    isFirstScreen: false
                }).then(res => {
                    if (res.data.toLogin) {
                        this.$api.setStorage({
                            key: 'selectCoupon',
                            data: this.ticket.market_metaid
                        });
                        toLoginPage({
                            href: window.location.href + '&firstLg=firstLg'
                        });
                        return;
                    }
                    this.locking = false;

                    const {toast, status} = res.data;
                    if (status === 0) {
                        this.btn.apiUrl = '';
                        this.btn.text = '去使用';
                        this.status = 2;
                    }
                    /* 刷新页面 */
                    this.$emit('onUpdate');
                    if (toast) {
                        this.$api.showToast({title: toast, icon: 'none'});
                    }
                })
                .catch( err  => {
                    // 老用户status: 102
                    if (err.status === 102) {
                        /* 刷新页面 */
                        this.$emit('onUpdate');
                        /* 关闭弹层 */
                        this.$emit('onClick');
                    }
                    this.locking = false;
                })
            }
        },
        //intro展开或收起
        showIntro() {
            this.all = !this.all;
        }
    }
};
</script>

<style lang="less" scoped>
.ticket-card {
    border-radius: 8px;
    background: #fff7f6;
    color: #fd503e;
    position: relative;

    &-wrap {
        position: relative;
        overflow: hidden;
        height: 82px;
        display: flex;
        align-items: center;
    }

    &-tag{
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(253, 80, 62, 0.16);
        border-radius: 8px 0 8px 0;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #FD503E;
        width: 82px;
        line-height: 12px;
        font-weight: 500;
        text-align: center;
        padding: 5px 0;
    }

    &-info {
        overflow: hidden;
        flex: 1;
        margin: 0 8px;
    }

    &-price {
        display: flex;
        justify-content: center;
        align-items: center;
        width: .89rem;
        &-text {
            font-size: 27px;
            line-height: 27px;
        }
    }

    &-title {
        font-weight: 900;
        color: #555;
        font-size: 16px;
        line-height: 16px;
    }

    &-subtitle, &-times {
        font-size: 12px;
        line-height: 12px;
        margin-top: 6px;
        color: #999;
    }

    &-btn {
        width: 1.04rem;
        height: 100%;
        margin-left: auto;
        border-left: 1px dashed rgba(227, 46, 27, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &-normal {
            padding: 7px 0;
            border-radius: 14px;
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            line-height: 14px;
            font-weight: 600;
            width: fit-content;
            border: 1px solid;
            min-width: 72px;
            text-align: center;
            z-index: 1;
        }

        &-received {
            color: #fd503e;
            border-color: #FD503E;
            background: #FFF;
        }

        &-unreceived {
            background-image: linear-gradient(90deg, #FD503E 0%, #FD503E 100%);
            color: #FFF;
        }

        &::before,&::after {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            z-index: 1;
            left: -4px;
        }

        &::before {
            top: -4px;
        }

        &::after {
            bottom: -4px;
        }
    }

    &-used {
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: -15px;
        right: -15px;
    }

    &-note {
        display: flex;
        font-size: 10px;
        line-height: 16px;
        padding: 5px 15px;
        color: #fd503e;
        background: #FFE6E6;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        &-icon{
            margin-left: auto;
        }
    }
}
.cl-bold {
    font-weight: bold;
}
.cl-red {
    color: #fd503e;
}
@media only screen and (max-width: 375px) {
    .ticket-card-poke {
        .ticket-card-subtitle {
            color: #fff;
            font-size: 16px;
            line-height: 22px;
            font-weight: bold;
        }
        .ticket-card-times {
            color: #fdcbc5;
            font-size: 13px;
            line-height: 19px;
        }
    }
}
@media only screen and (max-width: 340px) {

}
</style>
