<template>
    <view v-if="data" class="discount">
        <view
            class="discount__item daily-discount"
            @tap="onTap(data.dailyDiscount.targetUrl)"
        >
            <view class="discount__item__title-container">
                <view class="discount__item__title-container__title">
                    <text>{{ data.dailyDiscount.mainTitle.normal }}</text>
                    <text
                        class="discount__item__title-container__title_red"
                    >{{ data.dailyDiscount.mainTitle.highlight }}
                    </text>
                </view>
                <view class="discount__item__title-container__count-down">
                    <c-count-down
                        :timestamp-end="countDown"
                        :time-font-size="14"
                        splitor=":"
                        :show-day="false"
                        splitor-margin="0 3px"
                        background-color="#FD503E"
                        :splitor-color="'#FD503E'"
                        time-color="#FFFFFF"
                        mode="hh-mm-ss"
                        time-radius="4px"
                        time-width="16px"
                    />
                </view>
            </view>
            <text class="discount__item__subtitle">{{ data.dailyDiscount.subTitle }}</text>

            <view class="discount__item__item-container">
                <view
                    v-for="(switcher, switcherIndex) in data.dailyDiscount.items"
                    :key="switcherIndex"
                    class="switcher"
                >
                    <view
                        v-for="(item, index) in switcher"
                        :key="index"
                        :class="[
                            'switcher__item',
                            switcherIndex === 0 ?
                                (index === 0 ? animation0_0 : animation0_1) :
                                (index === 0 ? animation1_0 : animation1_1),
                        ]"
                    >
                        <view class="switcher__item__img-bg">
                            <image
                                class="switcher__item__img-bg__img"
                                :src="item.headImgUrl"
                            />
                        </view>
                        <view class="switcher__item__price">
                            <price
                                v-if="item.offPrice"
                                :price="item.offPrice"
                                :u-size="'.12rem'"
                                :i-size="'.15rem'"
                                :d-size="'.12rem'"
                            />
                            <price
                                v-if="item.price"
                                :price="item.price"
                                :u-size="'.11rem'"
                                :i-size="'.13rem'"
                                :d-size="'.11rem'"
                                :p-style="{'color': '#858585', 'text-decoration': 'line-through'}"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="horizontal-divider" />
        <view
            v-if="data.oneYuanZone"
            class="discount__item one-yuan-zone"
            @tap="onTap(data.oneYuanZone.targetUrl)"
        >
            <view class="discount__item__title-container">
                <text class="discount__item__title-container__title">{{ data.oneYuanZone.mainTitle }}</text>
                <text class="discount__item__title-container__tag">{{ data.oneYuanZone.tags }}</text>
            </view>
            <text class="discount__item__subtitle">{{ data.oneYuanZone.subTitle }}</text>
            <view class="discount__item__item-container">
                <view
                    v-for="(item, index) in data.oneYuanZone.items"
                    :key="index"
                    class="discount__item__item-container__item"
                >
                    <view class="discount__item__item-container__item__img-bg">
                        <image
                            class="discount__item__item-container__item__img-bg__img"
                            :src="item.headImgUrl"
                        />
                    </view>
                    <view class="discount__item__item-container__item__price">
                        <price
                            v-if="item.offPrice"
                            :price="item.offPrice"
                            :u-size="'.12rem'"
                            :i-size="'.15rem'"
                            :d-size="'.12rem'"
                        />
                        <price
                            v-if="item.price"
                            :price="item.price"
                            :u-size="'.11rem'"
                            :i-size="'.13rem'"
                            :d-size="'.11rem'"
                            :p-style="{'color': '#858585', 'text-decoration': 'line-through'}"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import CCountDown from '@baidu/med-ui/components/CountDown/CountDown';
import {navigate} from '@baidu/med-utils/lib/Mars/navigate';
import {ubcSend} from '@baidu/med-utils/lib/ubc';
import Price from '@commonComponents/Price';

export default {
    config: {
        component: true
    },
    components: {
        Price,
        CCountDown
    },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            countDown: 0,
            animation0_0: 'ease-in',
            animation0_1: 'ease-out',
            animation1_0: 'ease-in',
            animation1_1: 'ease-out',
            switchCount: -1,
            switcherTimer: ''
        };
    },
    created() {
        this.play();
    },
    pageLifetimes: {
        show() {
            this.play();
        },
        hide() {
            this.stop();
        }
    },
    methods: {
        play() {
            this.stop();
            this.countDown = new Date(+new Date(new Date().toLocaleDateString()) + 24 * 60 * 60 * 1000 - 1).getTime();
            this.switcherTimer = setInterval(() => {
                this.switchCount++;
                let switchIndex = this.switchCount % 2;
                if (switchIndex === 0) {
                    let temp = this.animation0_0;
                    this.animation0_0 = this.animation0_1;
                    this.animation0_1 = temp;
                } else {
                    let temp = this.animation1_0;
                    this.animation1_0 = this.animation1_1;
                    this.animation1_1 = temp;
                }
            }, 4000);
        },
        stop() {
            this.countDown = 0;
            clearInterval(this.switcherTimer);
        },
        onTap(url) {
            ubcSend({
                page: this.page,
                type: 'clk',
                value: 'sczy_yingxiao'
            });
            navigate({
                url
            });
        }
    }
};
</script>

<style lang="less" scoped>
.discount {
    display: flex;

    &__item {
        padding: 15px 0 0 13px;
        flex: 1 0 calc(50% - 1px);
        box-sizing: border-box;

        &__title-container {
            height: 22px;
            display: flex;
            align-items: center;
            white-space: nowrap;

            &__title {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                line-height: 18px;
                color: #1f1f1f;
                display: inline;
                margin: auto 0;

                &_red {
                    color: #fd503e;
                }
            }

            &__count-down {
                display: inline-block;
                margin-left: 4px;
                height: 22px;
            }

            &__tag {
                line-height: 16px;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #fff;
                background-color: #f60;
                border-radius: 9px 3px 9px 3px;
                padding: 0 4px;
                margin-left: 4px;
            }
        }

        &__subtitle {
            margin-top: 6px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            line-height: 14px;
            color: #fd503e;
        }

        &__item-container {
            display: flex;

            &__item {
                flex: 1;
                display: flex;
                flex-direction: column;

                &__img-bg {
                    width: 80px;
                    height: 80px;
                    background-color: white;
                    border-radius: 9px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 5px;

                    &__img {
                        max-width: 70px;
                        max-height: 70px;
                    }
                }

                &__price {
                    display: flex;
                    align-items: flex-end;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    white-space: nowrap;

                    &__discount-price {
                        font-family: PingFangSC-Medium;
                        font-size: 15px;
                        line-height: 15px;
                        color: #fd503e;
                    }

                    &__discount-price-yuan {
                        font-family: PingFangSC-Medium;
                        font-size: 14px;
                        line-height: 14px;
                        color: #fd503e;
                    }

                    &__origin-price {
                        font-family: PingFangSC-Regular;
                        font-size: 13px;
                        line-height: 13px;
                        color: #858585;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }

    .horizontal-divider {
        width: 1px;
        transform: scaleX(0.333);
        background: #eeefef;
    }
}

.switcher {
    display: flex;
    position: relative;
    flex: 1;

    &__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: absolute;
        opacity: 0;

        &__img-bg {
            width: 80px;
            height: 80px;
            background-color: white;
            border-radius: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5px;

            &__img {
                max-width: 70px;
                max-height: 70px;
            }
        }

        &__price {
            display: flex;
            align-items: flex-end;
            margin-top: 10px;
            margin-bottom: 13px;
            white-space: nowrap;
        }
    }
}

@keyframes ease-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ease-out {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

.ease-in {
    animation-name: ease-in;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
}

.ease-out {
    animation-name: ease-out;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
}

.daily-discount {
    background-image: url("https://med-fe.cdn.bcebos.com/gy/daily_dscount_bg.jpg");
    background-size: 100% 100%;
    border-top-left-radius: 12px;
}

.one-yuan-zone {
    background-image: url("https://med-fe.cdn.bcebos.com/gy/one_yuan_zone.jpg");
    background-size: 100% 100%;
    border-top-right-radius: 12px;
}
</style>
