<template>
    <login-btn
        v-if="data && !isLogin && isSwan"
        :z-index="9"
        @onLoginSuccess="onLoginSuccess(data)"
    >
        <view
            v-if="data"
            :id="data.tpCaseCode"
            class="sku-recommend"
            :class="[isShowSkuAnimation ? 'sku-animation' : '']"
            @tap="onTap(data)"
        >
            <view class="sku-recommend__left">
                <c-image
                    has-compress
                    :src="data.imgUrl"
                    width="1.17rem"
                    height="1.17rem"
                    mode="widthFix"
                    :hack-white-stroke="false"
                    :is-round="false"
                    radius="0.09rem 0.09rem 0.1rem 0.1rem"
                    :extra="{column: 3}"
                />
                <view class="company c-font-small">{{ data.company }}</view>
            </view>
            <view class="sku-recommend__right">
                <view class="sku-recommend__right__title c-color-title c-font-medium">{{ data.title }}</view>
                <view class="sku-recommend__right__des c-color c-font-normal">
                    {{ data.des }}
                </view>
                <view v-if="data.label && data.label.length" class="sku-recommend__label">
                    <view
                        v-for="(item, index) in data.label"
                        :key="index"
                        :class="['common', 'c-font-small', 'sku-recommend__label__' + item.color]"
                    >
                        {{ item.text }}
                    </view>
                </view>
                <view class="sku-recommend__op">
                    <view v-if="data.priceInteger && data.priceDecimal && data.unit" class="sku-recommend__op__des">
                        <text class="price__integer c-font-normal c-color-mall c-font-wb">￥</text>
                        <text class="price c-font-large c-color-mall c-font-wb">{{ data.priceInteger }}</text>
                        <text class="price c-font-normal c-color-mall c-font-wb">.{{ data.priceDecimal }}</text>
                        <text class="unit c-color-gray c-font-normal">{{ data.unit }}</text>
                    </view>
                    <view v-if="data.btn" class="sku-recommend__op__btn c-font-normal">{{ data.btn.text }}</view>
                </view>
            </view>
        </view>
    </login-btn>
    <view
        v-else-if="data"
        :id="data.tpCaseCode"
        class="sku-recommend"
        :class="[isShowSkuAnimation ? 'sku-animation' : '']"
        @tap="onTap(data)"
    >
        <view class="sku-recommend__left">
            <c-image
                has-compress
                :src="data.imgUrl"
                width="1.17rem"
                height="1.17rem"
                mode="widthFix"
                :hack-white-stroke="false"
                :is-round="false"
                radius="0.09rem 0.09rem 0.1rem 0.1rem"
                :extra="{column: 3}"
            />
            <view class="company c-font-small">{{ data.company }}</view>
        </view>
        <view class="sku-recommend__right">
            <view class="sku-recommend__right__title c-color-title c-font-medium">{{ data.title }}</view>
            <view class="sku-recommend__right__des c-color c-font-normal">
                {{ data.des }}
            </view>
            <view v-if="data.label && data.label.length" class="sku-recommend__label">
                <view
                    v-for="(item, index) in data.label"
                    :key="index"
                    :class="['common', 'c-font-small', 'sku-recommend__label__' + item.color]"
                >
                    {{ item.text }}
                </view>
            </view>
            <view class="sku-recommend__op">
                <view v-if="data.priceInteger && data.priceDecimal && data.unit" class="sku-recommend__op__des">
                    <text class="price__integer c-font-normal c-color-mall c-font-wb">￥</text>
                    <text class="price c-font-large c-color-mall c-font-wb">{{ data.priceInteger }}</text>
                    <text class="price c-font-normal c-color-mall c-font-wb">.{{ data.priceDecimal }}</text>
                    <text class="unit c-color-gray c-font-normal">{{ data.unit }}</text>
                </view>
                <view v-if="data.btn" class="sku-recommend__op__btn c-font-normal">{{ data.btn.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 保险商城产品
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
import LoginBtn from '@components/common/login-btn';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        LoginBtn,
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /* 索引 */
        skuIndex: {
            type: Number,
            default: 0
        },
        // 登录状态
        isLogin: {
            type: Number,
            default: 0
        },
        // 应该锚到哪项
        scrollId: {
            type: String,
            default: ''
        },
        // 是在首页还是其他页
        source: {
            type: String,
            default: ''
        },
        // topbar高度
        topbarHeight: {
            type: Number,
            default: 44
        },
        // 标签栏高度
        heightNavs: {
            type: Number,
            default: 0
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            isShowSkuAnimation: false
        };
    },
    mounted() {
        if (this.scrollId && this.scrollId.length && this.data.tpCaseCode === this.scrollId) {
            setTimeout(() => {
                // 首页和其他页逻辑不同
                if (this.source === 'home') {
                    setTimeout(() => {
                        this.isShowSkuAnimation = true;
                    }, 500);
                }
                else {
                    const query = this.$api.createSelectorQuery().select('#' + this.scrollId);
                    query.boundingClientRect(rect => {
                        const systemInfo = this.$api.getSystemInfoSync();
                        /* eslint-disable max-len */
                        this.$api.pageScrollTo({
                            scrollTop: this.isSwan ? (rect.top - (this.topbarHeight + this.heightNavs + 10 + systemInfo.statusBarHeight)) : (rect.top - (this.heightNavs + this.topbarHeight + 10)),
                            duration: 100
                        });
                        /* eslint-ENable max-len */
                        setTimeout(() => {
                            this.isShowSkuAnimation = true;
                        }, 500);
                        this.$emit('resetScrollId');
                    })
                        .exec();
                }
            }, 300);
        }
    },
    methods: {
        onLoginSuccess(data) {
            this.$emit('skuTap', data, this.skuIndex);
        },
        onTap(data) {
            this.$emit('skuTap', data, this.skuIndex);
        }
    }
};
</script>

<style lang="less" scoped>
.sku-recommend {
    display: inline-block;
    display: flex;

    &__left {
        margin-right: 0.08rem;
        width: 1.17rem;
        height: 1.17rem;
        border-radius: 0.09rem;
        position: relative;
        flex: 0 0 1.17rem;
        overflow: hidden;

        &__img {
            width: 1.17rem;
            height: 1.17rem;
            border-radius: 0.09rem 0.09rem 0.1rem 0.1rem;
        }

        .company {
            position: absolute;
            bottom: 0;
            width: 1.17rem;
            height: 0.24rem;
            background-color: #f5f5f5;
            text-align: center;
            line-height: 0.24rem;
            border-radius: 0 0 0.09rem 0.09rem;
            opacity: 0.85;
            color: #525252;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    &__right {
        min-height: 1.17rem;
        flex: 1 1 2.43rem;

        &__title {
            width: 100%;
            margin-bottom: 0.02rem;
            margin-top: -0.04rem;
        }

        &__des {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            margin-bottom: 0.06rem;
        }
    }

    &__label {
        width: 100%;
        display: flex;
        margin-bottom: 0.06rem;

        &__red {
            color: #fd5030;
            background-color: rgba(253, 80, 62, 0.10);
            border: 0.01rem solid #fd503e;
        }

        &__gary {
            color: #858585;
            background-color: rgba(133, 133, 133, 0.06);
            border: 0.01rem solid rgba(133, 133, 133, 0.50);
        }

        .common {
            height: 0.16rem;
            line-height: 0.14rem;
            text-align: center;
            border-radius: 0.08rem;
            margin-right: 0.06rem;
            box-sizing: border-box;
            padding: 0 0.05rem;
        }
    }

    &__op {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &__des {
            .unit {
                margin-left: 0.07rem;
            }
        }

        &__btn {
            width: 0.48rem;
            height: 0.28rem;
            background-color: #00c8c8;
            line-height: 0.28rem;
            text-align: center;
            color: #fff;
            border-radius: 0.14rem;
        }
    }
}

.sku-animation {
    animation: skuScale 0.5s linear 1 normal;
}
@keyframes skuScale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}
</style>
