<template>
    <view class="home-nav--wrap">
        <view
            v-for="(item, index) in data"
            :key="index"
            class="home-nav"
            @tap="onTap(item, index)"
        >
            <view 
                class="home-nav__title c-color-title"
                :style="{
                    color: selectIndex === index ? selectTitleColor : titleColor,
                }"
            >{{ item.text }}</view>
            <view
                class="home-nav__subTitle c-font-normal"
                :style="{
                    color: selectIndex === index ? selectSubColor : subColor,
                    backgroundColor: selectIndex === index ? selectSubBackground : subBackground,
                }"
            >{{ item.subTitle }}</view>
        </view>
    </view>
</template>

<script>
/**
 * @file 基因检测
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {},
    props: {
        /**
         * 选中标题颜色
         */
        selectTitleColor: {
            type: String,
            default: '#00C8C8'
        },
        /**
         * 标题颜色
         */
        titleColor: {
            type: String,
            default: '#1F1F1F'
        },
        /**
         * 选中子标题颜色
         */
        selectSubColor: {
            type: String,
            default: '#FFFFFF'
        },
        /**
         * 选中子标题背景色
         */
        selectSubBackground: {
            type: String,
            default: '#00C8C8'
        },
        /**
         * 子标题颜色
         */
        subColor: {
            type: String,
            default: '#525252'
        },
        /**
         * 子标题背景色
         */
        subBackground: {
            type: String,
            default: ''
        },
        /**
         * 选中
         */
        selectIndex: {
            type: Number,
            default: 0
        },
        /* 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        onTap(item, index) {
            const params = {
                item,
                index
            };
            /**
             * nav点击
             */
            this.$emit('onNavTap', params);
        }
    }
};
</script>

<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.home-nav {
    &--wrap {
        display: flex;
        justify-content: space-between;
        text-align: center;
        padding: 0 2px;
    }
    &__title {
        font-size: 0.18rem;
        line-height: 0.24rem;
        font-weight: bold;
    }
    &__subTitle {
        color: #525252;
        border-radius: 33px;
        line-height: 0.19rem;
        height: 0.19rem;
        margin: 0 1px;
    }
}
</style>
