<template>
    <view>
        <!--  打卡按钮 -->
        <view
            class="brand-operate-card img-background"
            :style="{
                height: screenWidth / 1.03 + 'px',
                'background-image': 'url(' + img.sign.cont + ')',
            } | imgCompress('background-image')"
        >
            <view class="card-cont" :style="{paddingTop: screenWidth * 0.2 + 'px'}">
                <!-- 标题 -->
                <view
                    v-if="info.date"
                    class="card-title"
                    :style="{textShadow: ueConf.titleShadow}"
                >{{ info.date }}期打卡可平均瓜分金额(元)</view>
                <!-- switch -->
                <view class="card-switch" :style="{top: screenWidth * 0.158 + 'px'}">
                    <view class="card-switch-text">打卡提醒</view>
                    <login-btn
                        :disabled="isLogin"
                        :z-index="10"
                        @onLoginSuccess="$emit('updateData')"
                        @onTapEnd="onLoginBtnTapEnd"
                    >
                        <switch
                            class="card-switch-item"
                            :color="ueConf.switchColor"
                            :checked="info.remind == 1"
                            @change="onRemindChange($event)"
                        />
                    </login-btn>
                </view>
                <!-- 人数 -->
                <view class="card-number">
                    <text
                        class="text-background"
                        :style="{
                            'background-image': ueConf.textfontColor
                        }"
                    >{{ (info.totalCount || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</text>
                    <text class="card-number-unit">元</text>
                </view>
                <view class="card-text c-font-15 c-gap-top">
                    <image
                        class="card-text-img"
                        :src="img.sign.friend"
                    />
                    <text>已有</text>
                    <text
                        :style="{color: '#ee6727'}"
                    >{{ (info.totalCount || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</text>
                    <text>人报名</text>
                </view>
                <view class="card-btn-wrap">
                    <!-- 大按钮 -->
                    <form
                        v-if="usePush && info.can_push === 0 && isLogin"
                        report-submit
                        skip-subscribe-authorize
                        report-type="subscribe"
                        template-id="BD2376"
                        subscribe-id="daka"
                        class="auth-form"
                        @submit="onFormSubmit"
                    >
                        <view
                            class="card-btn img-background"
                            :style="{
                                // height: screenWidth / 4.24 + 'px',
                                backgroundImage: 'url(' + img.sign.btn + ')',
                            }"
                            :class="[
                                info.status !== 0 ? 'card-btn-gray' : 'card-btn-animation',
                            ]"
                        >
                            {{ btnText }}
                        </view>
                        <button form-type="submit" class="auth-btn"></button>
                    </form>
                    <login-btn
                        v-else
                        :disabled="isLogin"
                        :z-index="10"
                        @onLoginSuccess="$emit('updateData')"
                        @onTapEnd="onLoginBtnTapEnd"
                    >
                        <view
                            class="card-btn img-background"
                            :style="{
                                // height: screenWidth / 4.24 + 'px',
                                backgroundImage: 'url(' + img.sign.btn + ')',
                            }"
                            :class="[
                                info.status !== 0 ? 'card-btn-gray' : 'card-btn-animation',
                            ]"
                            @tap.stop="$emit('onBtnTap')"
                        >
                            {{ btnText }}
                        </view>
                    </login-btn>
                    <!-- 闪付气泡 -->
                    <view
                        v-if="info.status === 0"
                        class="card-btn-bubble"
                    >新用户减0.99元</view>
                </view>
                <!-- 提示 -->
                <view
                    class="card-tip"
                    :style="{bottom: screenWidth / 3.2 + 'px'}"
                >
                    <view
                        :style="{
                            transform: 'translateY(' + (-currentIndex * 15) + 'px)',
                            transition: showTrans ? 'all .7s cubic-bezier(0.2, 0, 0.2, 1)' : 'none',
                        }"
                    >
                        <view
                            v-for="(item, index) in tipslist"
                            :key="index"
                            class="bubble-li bubble-text-item"
                            :style="{
                                opacity: index === currentIndex ? 1 : 0,
                                transition: showTrans ? 'all .7s cubic-bezier(0.2, 0, 0.2, 1)' : 'none',
                            }"
                        >
                            <text
                                v-if="item.highlight"
                                class="c-line-clamp1 c-gap-left"
                            >
                                <text>{{ item.before }}</text>
                                <text :style="{color: '#faaf16'}">{{ item.highlight }}</text>
                                <text>{{ item.after }}</text>
                            </text>
                            <text v-else class="c-line-clamp1 c-gap-left">{{ item }}</text>
                        </view>
                    </view>
                </view>
                <image
                    class="card-text-rules"
                    :style="{
                        bottom: screenWidth / 4.36 + 'px',
                    }"
                    lazy-load
                    :src="img.sign.rules"
                    @tap.stop="onJumpTap(path.rule, 'rule')"
                />
            </view>
        </view>
        <!-- 道具卡 -->
        <login-btn
            :disabled="isLogin"
            :z-index="10"
            @onLoginSuccess="$emit('updateData')"
            @onTapEnd="onLoginBtnTapEnd"
        >
            <view
                v-if="tools"
                class="brand-operate-tools img-background"
                :style="{
                    height: screenWidth / 2 + 'px',
                    'background-image': 'url(' + img.tools.cont + ')',
                } | imgCompress('background-image')"
                @tap.stop="onJumpTap(path.rule, 'tools')"
            >
                <view class="card-cont" :style="{paddingTop: screenWidth * 0.2 + 'px'}">
                    <view
                        class="tools-list"
                        :style="{
                            paddingLeft: screenWidth * 0.07 + 'px',
                            paddingRight: screenWidth * 0.07 + 'px',
                        }"
                    >
                        <view
                            v-for="(day, index) in tools.list"
                            :key="index"
                            class="tools-item"
                            @tap.stop="onJumpTap(tools.path, 'tools')"
                        >
                            <view class="tools-day">{{ day.text }}</view>
                            <view class="c-gap-top-ll tools-i">
                                <image
                                    v-if="day.card"
                                    :src="day.status === '0' ? img.tools.cardGray : img.tools.card"
                                    :style="{
                                        width: '28px',
                                        height: '39px',
                                    }"
                                    class="tools-card"
                                />
                                <view
                                    v-else
                                    class="tools-dot"
                                    :style="{background: day.status === '0' ? '#cfcfcf' : ''}"
                                />
                                <view
                                    class="tools-line"
                                    :class="{
                                        'tools-line-gray': tools.list[index + 1] && tools.list[index + 1].status === '0'
                                    }"
                                    :style="{background: tools.list.length - 1 === index && 'transparent'}"
                                />
                            </view>
                            <view
                                v-if="day.btn"
                                :class="[
                                    day.status === '0' ? 'tools-get-disabled' : 'tools-get',
                                    !day.cardType && 'tools-get-done',
                                    (day.status == 1 && day.cardType) && 'card-btn-animation',
                                ]"
                                :style="{
                                    color: '#fff',
                                    background: !day.cardType ? '#29d6a9' : ueConf.btnBgColor,
                                }"
                                @tap.stop="onToolCardBtnTap(day, index)"
                            >
                                {{ day.btn }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </login-btn>
        <!-- 邀请 -->
        <view v-if="img.tools" class="c-gap-bottom-large">
            <view
                class="tools-btn img-background"
                :style="{
                    'background-image': 'url(' + img.tools.btn + ')',
                } | imgCompress('background-image')"
                @tap.stop="onShare"
            >
                {{ info.shareBtnText }}
            </view>
            <view
                v-if="info.shareText"
                class="tools-tip"
                :style="{color: ueConf.fontColor}"
            >
                {{ info.shareText }}
            </view>
        </view>
        <!-- 打卡情况 -->
        <login-btn
            :disabled="isLogin"
            :z-index="10"
            @onLoginSuccess="$emit('updateData')"
            @onTapEnd="onLoginBtnTapEnd"
        >
            <view
                class="brand-operate-vs img-background c-gap-bottom-small"
                :style="{
                    height: screenWidth / 2.2 + 'px',
                    'background-image': 'url(' + img.vs.cont + ')',
                    marginTop: !img.tools && '7px',
                } | imgCompress('background-image')"
                @tap.stop="onJumpTap(path.list, 'deatail')"
            >
                <template v-if="info.successNum">
                    <view class="vs-cont">
                        <view class="vs-item">
                            <view class="vs-title c-font-15">打卡成功</view>
                            <view class="vs-num vs-win">{{ info.successNum }}</view>
                        </view>
                        <view class="vs-item">
                            <view class="vs-title c-font-15">打卡失败</view>
                            <view class="vs-num vs-lose">{{ info.failNum }}</view>
                        </view>
                    </view>
                    <image
                        lazy-load
                        :src="img.vs.icon"
                        class="vs-icon"
                    />
                </template>
                <view v-else class="vs-empty c-font-big">
                    每日<text class="color-red">{{ dakaCheckTime }}</text>公布打卡战况,并瓜分奖金
                    <view>敬请期待!</view>
                </view>
            </view>
        </login-btn>
    </view>
</template>

<script>
import LoginBtn from '@commonComponents/login-btn';
import * as login from '../../../utils/login';
/**
 * @file 打卡内容组件
 * @author chenshuo04
 * @categories 打卡内容组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        LoginBtn
    },
    props: {

        /**
        * 屏幕宽度
        */
        screenWidth: {
            type: Number,
            required: true
        },
        /**
        * 登陆状态
        */
        isLogin: {
            type: Boolean,
            required: true
        },

        /**
        * 打卡内容
        */
        info: {
            type: Object,
            required: true
        },

        /**
        * 打卡内容图片
        */
        img: {
            type: Object,
            required: true
        },

        /**
        * 道具卡
        */
        tools: {
            type: Object,
            required: false,
            default: () => {
                return null;
            }
        },

        /**
        * 按钮文本
        */
        btnText: {
            type: String,
            required: true
        },

        /**
        * ue样式属性
        */
        ueConf: {
            type: Object,
            required: true
        },

        /**
        * 跳转路径
        */
        path: {
            type: Object,
            default() {
                return {
                    rule: '/pages/act/dakarule/index',
                    list: '/pages/act/dakalist/index'
                };
            }
        },

        /**
        * 提示列表
        */
        tipslist: {
            type: Array,
            default() {
                return [
                    '报名后记得次日上午5点-8点打卡哦~',
                    {
                        before: '使用百度闪付支付新老用户前5次享',
                        highlight: '0.01元',
                        after: '报名特权'
                    },
                    '报名后记得次日上午5点-8点打卡哦~'
                ];
            }
        },

        /**
        * 打卡时间
        */
        dakaCheckTime: {
            type: String,
            default: '10:00'
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            currentIndex: 0,
            timer: 4000,
            showTrans: false,
            usePush: false
        };
    },
    watch: {
        currentIndex(newVal) {
            this.carouselLoop(newVal);
        }
    },
    created() {
        this.carouselLoop(0);
        this.usePush = this.isSwan && this.$api.canIUse('form.skip-subscribe-authorize');
    },
    methods: {
        onLoginBtnTapEnd() {
            if (!this.isSwan) {
                login.toH5LoginPage({
                    isReplaceUrl: true
                });
            }
        },
        onRemindChange(e) {
            const remindSet = e.detail ? e.detail.checked : e;

            /**
             * 打卡提醒
             */
            this.$emit('onRemindChange', remindSet, this.usePush);
        },
        onJumpTap(url, type) {

            /**
             * 跳转点击
             */
            this.$emit('onJumpTap', url, type);
        },
        onToolCardBtnTap(card, index) {
            if (card && card.cardType) {

                /**
                 * 道具卡按钮点击
                 */
                this.$emit('onGetToolCard', card.cardType, index);
            }
            return;
        },
        onShare() {

            /**
             * 分享
             */
            this.$emit('onShare');
        },
        carouselLoop(newVal) {
            if (newVal === this.tipslist.length - 1) {
                setTimeout(() => {
                    this.currentIndex = 0;
                    this.showTrans = false;
                }, 1000);
            }
            else {
                setTimeout(() => {
                    this.currentIndex += 1;
                    this.showTrans = true;
                }, this.timer);
            }
        },
        onFormSubmit(e) {
            /* eslint-disable */
            const {status, formId} = e.detail;

            /**
             * 报名点击
             */
            this.$emit('onBtnTap', {status, form_id: formId});
        }
    }
};
</script>
<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}

.text-background {
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
}

.card-cont {
    padding-bottom: 15px;
}

.card-title {
    position: absolute;
    top: .185rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.card-switch {
    position: absolute;
    top: 5px;
    right: 7%;
    color: #5a5a5a;
    text-align: center;
    font-size: 10px;
    line-height: 12px;

    &-text {
        margin-left: -5px;
    }
}

.card-tip,
.tools-tip {
    text-align: center;
    line-height: 15px;
    font-size: 10px;
    color: #6d6d6d;
    height: 16px;
}

.tools-tip {
    padding-top: 10px;
}

.card-tip {
    position: absolute;
    left: 0;
    right: 0;
}

.card-img-btn {
    width: 72%;
    margin-left: 14%;
    margin-top: 10px;
    animation: breathe 1s infinite;
}

.card-btn,
.tools-btn {
    width: 72vw;
    height: 8.5vw;
    line-height: 8.5vw;
    margin-left: 14vw;
    margin-top: 5px;
    padding-top: .06rem;
    padding-bottom: .06rem;
    font-size: .22rem;
    color: #fff;
    text-align: center;
}

.card-btn-wrap {
    position: relative;
}

.card-btn-bubble {
    top: -17px;
    font-size: 9px;
    line-height: 11px;
    color: #fff;
    background: #ff6050;
    padding: 3px 5px;
    border-radius: 7px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    white-space: nowrap;
    right: 40px;
    display: inline-block;
    position: absolute;
}

.tools-btn {
    font-size: 19px;
}

.card-btn-animation {
    animation: breathe 1s infinite;
}

.card-btn-gray {
    filter: grayscale(100%);
}

.card-number {
    font-size: .72rem;
    font-weight: bold;
    line-height: .72rem;
    text-align: center;

    &-unit {
        color: #000;
        font-size: 15px;
        font-weight: normal;
        line-height: 17px;
    }
}

.card-text {
    text-align: center;
    position: relative;

    &-img {
        position: relative;
        top: 1px;
        display: inline-block;
        width: 18px;
        height: 15px;
        margin-right: 5px;
    }

    &-rules {
        width: 1.4rem;
        height: 15px;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
}
// 打卡情况
.vs-cont {
    position: absolute;
    bottom: 19.5%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.vs-item {
    text-align: center;
}

.vs-win {
    color: #fd7045;
}

.vs-lose {
    color: #aea5cb;
}

.vs-num {
    font-size: 33px;
    line-height: 43px;
}

.vs-icon {
    position: absolute;
    bottom: 32%;
    left: 0;
    right: 0;
    margin: auto;
    width: 42px;
    height: 29px;
}

.vs-empty {
    color: #333;
    position: absolute;
    bottom: 24%;
    left: 24px;
    right: 24px;
    margin: auto;
    text-align: center;
}

.tools-list {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.tools-item {
    position: relative;
    width: 14%;
    text-align: center;
}

.tools-day {
    color: #232323;
    font-size: 12px;
    line-height: 14px;
}

.tools-i {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.tools-line {
    height: 3px;
    background: #f8d55d;
    width: 100%;
    position: relative;
    left: 50%;

    &-gray {
        background: #ececec;
    }
}

.tools-card {
    z-index: 9;
    position: absolute;
    left: 10px;
    top: -18px;
}

.tools-dot {
    z-index: 9;
    position: absolute;
    left: 50%;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #f8d55d;
}

.tools-get {
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    padding: 3px 5px;
    border-radius: 10px;
    margin-top: -3px;
    width: 50px;
    margin-left: -5px;

    &-done {
        background: #29d6a9;
    }
}

.tools-get-disabled {
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    margin-top: 10px;
    min-width: 50px;
    background: transparent !important;
    color: #b0b0b0 !important;
}

.bubble-li {
    opacity: 0;
}

.bubble-item {
    color: #fff;
    background: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .08);
}

.auth-form .auth-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
}
@keyframes breathe {
    0% { transform: scale(.96); }
    25% { transform: scale(1); }
    50% { transform: scale(.96); }
    75% { transform: scale(1); }
    100% { transform: scale(.96); }
}
@media only screen and (max-width: 375px) {
    .card-title {
        font-size: 18px !important;
    }

    .card-tip {
        bottom: 114px !important;
    }

    .tools-btn {
        font-size: 17px;
    }
}
@media only screen and (max-width: 320px) {
    .card-title {
        font-size: 17px !important;
    }

    .card-tip {
        bottom: 94px !important;
    }

    .tools-btn {
        font-size: 15px;
    }

    .tools-tip {
        display: none;
    }

    .vs-cont {
        bottom: 12.5% !important;
    }

    .vs-icon {
        bottom: 25% !important;
    }
}
</style>
