<template>
    <login-btn
        :disabled="isLogin"
        :z-index="80"
        @onLoginSuccess="onLoginSuccess"
        @onTapEnd="onLoginBtnTapEnd"
    >
        <view
            class="signle-coupon img-background"
            :class="'layout-style' + layoutStyle"
            :style="{
                backgroundImage: 'url(' + img.couponBg + ')',
            }"
            @tap="onCouponBtn"
        >
            <!-- 券价格 -->
            <view class="signle-coupon__price" :style="{color: fontColor.primaryColor}">
                <text class="signle-coupon__price__unit">¥</text>
                <text>{{ coupon.prices }}</text>
            </view>
            <!-- 券内容 -->
            <view class="signle-coupon__cont c-line-clamp1">
                <view class="signle-coupon__title" :style="{color: fontColor.primaryColor}">
                    <text class="signle-coupon__title__text">{{ coupon.title }}</text>
                    <text class="signle-coupon__title-sub">{{ coupon.subTitle }}</text>
                </view>
                <view class="signle-coupon__desc" :style="{color: fontColor.descColor}">
                    <text>{{ (coupon.desc && coupon.desc.textBefore) || coupon.desc }}</text>
                    <text class="signle-coupon__desc--active">{{ coupon.desc && coupon.desc.text }}</text>
                    <text>{{ coupon.desc && coupon.desc.textAfter }}</text>
                </view>
            </view>
            <!-- 券按钮 -->
            <view
                class="signle-coupon__btn img-background"
                :class="coupon.status !== 0 ? 'disable__' + layoutStyle : ''"
                :style="{
                    backgroundImage: 'url(' + img.btnBg + ')',
                    color: fontColor.btnColor,
                }"
            >
                <text>{{ coupon.btnText }}</text>
            </view>
        </view>
    </login-btn>
</template>

<script>
import LoginBtn from '@components/common/login-btn';
import {navigate} from '@utils/navigate';
import {request} from '@utils/request';
import {ubcSend} from '@utils/log';
import {getFkParamsAll} from '@utils/fk';
import * as conf from '@utils/conf';
import * as login from '@utils/login';

/**
 * @file 优惠券
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        LoginBtn
    },
    props: {
        /**
         * 优惠券样式
         */
        layoutStyle: {
            type: String,
            default: '1'
        },
        /**
         * 优惠券
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 图片
         * couponBg: 1148 * 259
         * btnBg: 117 * 204
         */
        img: {
            type: Object,
            default: () => {
                return {
                    // couponBg: 'https://medactivity.cdn.bcebos.com/act618/main/main-single-coupon-bj2.png',
                    couponBg: 'https://medactivity.cdn.bcebos.com/act618/main/main-single-coupon-bj-new.png',
                    btnBg: 'https://medactivity.cdn.bcebos.com/act618/main/main-single-coupon-btn-bj2.png'
                };
            }
        },
        /**
         * color
         */
        fontColor: {
            type: Object,
            default: () => {
                return {
                    primaryColor: '#FF4128',
                    btnColor: '#fff7ec',
                    descColor: '#AE6938'
                };
            }
        },

        /**
         * 按钮置灰样式
         */
        disableBtnStyle: {
            type: Object,
            default: () => {
                return {
                    opacity: 0.5
                };
            }
        },

        /**
         * 登陆状态
         */
        isLogin: {
            type: Boolean,
            default: false
        },

        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: '618_prima'
        },

        /**
         * 是否需要风控
         */
        isFk: {
            type: Boolean,
            default: false
        }
    },
    created() {
        this.coupon = this.data || {};
    },
    watch: {
        data(n, o) {
            this.coupon = n;
        }
    },
    data() {
        return {
            coupon: {}
        };
    },
    methods: {
        onLoginSuccess() {
            /**
             * 小程序登陆登陆成功回调
             */
            this.$emit('onLoginSuccess');
        },
        onCouponBtn() {
            const {status, coupon_id, apiUrl, url} = this.coupon;
            const log = {
                type: 'clk',
                value: `${this.logPrefix}_singlecoupon`,
                ext: {
                    pd: 'act',
                    value_id: coupon_id
                }
            };
            // TODO: 20已领取，10已使用, 0去领取
            if (status === 20 && url) {
                navigate({
                    url,
                    openType: url.indexOf('pages/gy/medstorehome') >= 0 ? 'switchTab' : 'navigate',
                    log
                });
                return;
            } else if (status === 0) {
                // 需要过风控
                if (this.isFk) {
                    this.gkFk().then(res => {
                        this.getCoupon(apiUrl, res);
                    });
                } else {
                    this.getCoupon(apiUrl);
                }
            }

            ubcSend(log);
        },
        getCoupon(apiUrl, riskInfo = '') {
            request({
                url: conf.apiHost + apiUrl,
                data: {
                    riskInfo
                },
                method: 'POST',
                isFirstScreen: false,
                isNeedLogin: true,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            }).then(res => {
                this.$api.hideLoading();
                const {toast, drawStatus, btnText} = res.data;

                if (toast) {
                    this.$api.showToast({
                        title: toast,
                        icon: 'none'
                    });
                }
                // 领券成功
                if (drawStatus === 20) {
                    this.coupon.btnText = btnText;
                    this.coupon.status = drawStatus;
                    /**
                     * 领券成功
                     */
                    this.$emit('getCouponSuccess');
                }
            });
        },
        onLoginBtnTapEnd() {
            if (process.env.MARS_ENV === 'h5') {
                login.toH5LoginPage();
            }
        },
        gkFk() {
            this.$api.showLoading({
                title: '正在领取',
                mask: true
            });
            // 需要传 log 参数
            return getFkParamsAll({
                ak: '5760',
                o: 'coupon_receive',
                ev: 'coupon_receive',
                /* eslint-disable max-len */
                dataApp:
                    'eyJhcHBfa2V5IjoiNTc2MCIsImFwcF92aWV3IjoicHJvbW90ZSIsImJyb3dzZXJfdXJsIjoiaHR0cHM6Ly9zb2ZpcmUuYmFpZHUuY29tL2RhdGEvdWEvYWIuanNvbiIsImZvcm1fZGVzYyI6IiIsInNlbmRfaW50ZXJ2YWwiOjUwLCJzZW5kX21ldGhvZCI6M30='
                /* eslint-disable max-len */
            })
                .then(res => {
                    res = JSON.stringify(res || {});
                    return res;
                })
                .catch(err => {
                    this.$api.showToast({title: '领券失败', icon: 'none'});
                });
        }
    }
};
</script>
<style lang="less" scoped>
.img-background {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.signle-coupon {
    display: flex;
    align-items: center;
    height: 20.85vw;
    &__price {
        font-size: 53px;
        color: #ec201c;
        font-weight: 700;
        margin-left: 13px;
        margin-right: 4.83vw;
        line-height: normal;
        &__unit {
            font-size: 15px;
        }
    }
    &__cont {
        flex: 1;
        overflow: hidden;
    }
    &__title {
        color: #ec201c;
        line-height: 23px;
        &__text {
            font-size: 20px;
            font-weight: bold;
        }
        &-sub {
            font-size: 14px;
            font-weight: normal;
        }
    }
    &__desc {
        color: #ae6938;
        font-size: 13px;

        &--active {
            color: #ff4128;
        }
    }
    &__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14.25vw;
        height: 16.42vw;
        color: #fff7ec;
        font-size: 15px;
        line-height: 16px;
        padding: 0 20px;
        box-sizing: border-box;
        font-weight: bold;
        text-align: center;
    }
}
.disable {
    &__1 {
        opacity: 0.5;
    }
}
</style>
