<template>
    <view v-if="data && data.length" class="recommend">
        <c-navs
            class="recommend__navs line-superfine"
            :options="options"
            :scroll="options.length > 5 ? true : false"
            :height="45"
            :selected-index="optionsIndex"
            selected-font-color="#1F1F1F"
            selected-font-weight="700"
            color="#858585"
            bottom-line-height="4px"
            :font-size="16"
            bottom-line-width="18px"
            bottom-line-radius="2px"
            select-bottom-line-color="#00C8C8"
            @itemtap="handleItemTap"
        />
        <view
            v-if="data[optionsIndex] && data[optionsIndex].length"
            class="recommend-sku"
            :style="{padding: '0.15rem 0.13rem'}"
        >
            <view
                v-for="(item, index) in data[optionsIndex]"
                :key="index"
                class="recommend-sku__item"
                :style="{
                    marginBottom: index === data.length - 1 ? '0' : '0.17rem',
                }"
            >
                <sku-recommend
                    :scroll-id="scrollId"
                    :data="item"
                    :sku-index="index"
                    :is-login="isLogin"
                    :source="'home'"
                    @skuTap="ontap"
                    @resetScrollId="resetScrollId"
                />
            </view>
            
        </view>
    </view>
</template>

<script>
import CNavs from '@baidu/med-ui/components/Navs/Navs';
import SkuRecommend from './SkuRecommend';

import {navToBdBoxH5} from '@utils/navigate';
import {ubcSend} from '@utils/log';
import {toH5LoginPage} from '@utils/login';

/**
 * @file 保险商城推荐
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CNavs,
        SkuRecommend,
    },
    props: {
        /* 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        // 导航标签数组
        options: {
            type: Array,
            default: () => {
                return [];
            }
        },
        // 登录状态
        isLogin: {
            type: Number,
            default: 0
        },
        // 滚动id
        scrollId: {
            type: String,
            default: ''
        },
        // 选择哪项
        selectedIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            optionsIndex: this.selectedIndex,
            isSwan
        };
    },
    methods: {
        resetScrollId(){
            this.$emit('resetScrollId');
        },
        ontap(data, skuIndex) {
            if (!this.isLogin && !this.isSwan) {
                let url = window.location.href + '&tpCaseCode=' + data.tpCaseCode + '&tpName=' + data.tpName;
                toH5LoginPage({href: url});
                return;
            }
            if (!this.isLogin && this.isSwan) {
                this.$emit('goToProDetail', data.tpCaseCode, data.tpName);                
                return;
            }
            if (data && data.tcUrl) {
                if (process.env.MARS_ENV === 'h5') {
                    window.location.href = data.tcUrl;
                }
                else if (process.env.MARS_ENV === 'swan') {
                    navToBdBoxH5(data.tcUrl, data);
                }
            }
            ubcSend({
                type: 'clk',
                value: 'tab' + (this.optionsIndex + 1) + 'product',
                ext: {
                    pd: 'bx',
                    value_id: skuIndex + 1,
                    page_type: 'bx-home'
                }
            });
        },
        handleItemTap(obj) {
            ubcSend({
                type: 'clk',
                value: 'tab',
                ext: {
                    pd: 'bx',
                    value_id: obj.index + 1,
                    page_type: 'bx-home'
                }
            });
            this.optionsIndex = obj.index;
            // this.$emit('getProductListData', obj);
        },
    }
};
</script>

<style lang="less" scoped>
.recommend {
    margin-top: -0.15rem;
    &-sku {
        background-color: #FFFFFF;
    }
}
.line-superfine:after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
    box-sizing: border-box;
    transform: scaleY(0.333);
}
</style>
