<template>
    <view>
        <b-navigate
            v-for="(group, index) in data"
            :key="index"
            :url="group.unifiUrl"
            :extra="{
                mod: page + '-hot-group-' + index
            }"
        >
            <view
                class="hot-group"
            >
                <view
                    :class="['hot-group-left--' + group.type]"
                    class="hot-group-left">
                    <text
                        v-for="(text, textIndex) in group.text"
                        :key="textIndex"
                    >
                        {{ text }}
                    </text>
                </view>
                <view class="hot-group-tabs">
                    <b-navigate
                        v-for="(tab, tabIndex) in group.tab"
                        :key="tabIndex"
                        :url="tab.unifiUrl"
                        :extra="{
                            mod: page + '-hot-group-tab-' + index + '-' + tabIndex
                        }"
                    >
                        <view
                            class="hot-group-tab"
                        >
                            <view class="hot-group-tab-icon c-gap-right-small m-icon m-icon-up-long"></view>
                            <view class="hot-group-tab-text">{{ tab.text }}</view>
                        </view>
                    </b-navigate>
                </view>
                <view v-if="group.total" class="hot-group-right">
                    <b-navigate
                        :url="group.unifiUrl"
                        :extra="{
                            mod: page + '-hot-group-more-' + index
                        }"
                    >
                        <view class="hot-group-right-content">
                            <c-icon name="arrow-right-circle" font-size="24px"/>
                            <view>共{{group.total}}篇</view>
                        </view>
                    </b-navigate>
                </view>
            </view>
        </b-navigate>
    </view>
</template>

<script>
/**
 * @file 精选
 * @author yantingxi
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import BNavigate from '../../../components/common/navigate';
export default {
    config: {
        component: true
    },
    props: {
        data: {
            type: Array,
            default: () => []
        },
        // 日志区别页面
        page: {
            type: String,
            default: 'feed'
        }
    },
    components: {
        CIcon,
        BNavigate
    }
};
</script>

<style lang="less" scoped>
.hot-group {
    display: flex;
    margin-bottom: .15rem;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0 3px 16px 0 rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 12px 0;

    &-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 20%;
        font-size: .17rem;
        color: #FFF;
        flex: 0 0 auto;
        padding: 0 10px;
        margin: -12px 0;
        border-radius: 8px 0 0 8px;
        font-weight: bold;
        &--normal {
            background: #26D1B7;
        }
        &--touch {
            background: #5FADFF;
        }
        &--doubt {
            background: #45C5EC;
        }
        &--confirm {
            background: #ff6050;
        }
    }

    &-tabs {
        flex: 1 1 auto;
        margin-left: 10px;
    }

    &-tab {
        display: flex;
        align-items: center;
        font-size: .15rem;
        color: #333;
        line-height: 1;
        padding: 7px 0;

        &-text {
            border-bottom: 1px dashed #333;
        }

        &-icon {
            color: #ff6050;
        }
    }

    &-right {
        display: flex;
        align-items: center;
        color: #CCC;
        margin-right: 20px;
        flex: 0 0 auto;

        &-content {
            display: flex;
            justify-content: center;
            flex-flow: column;
            align-items: center;
        }
    }
}
</style>