<template>
    <view class="section-list">
        <swiper class="section-list__swiper" @change="onSwiperChange">
            <swiper-item
                v-for="(item, i) in list"
                :key="i"
                class="section-list__swiper__item"
            >
                <view
                    v-for="(section, index) in item"
                    :key="index"
                    class="section-list__swiper__item__inner"
                >
                    <view
                        class="section-item"
                        @tap="onTap(section, index)"
                    >
                        <view class="section-item__header">
                            <view class="section-item__header__img">
                                <c-image
                                    :src="section.img"
                                    lazy-load
                                    has-compress
                                    mode="widthFix"
                                    :hack-white-stroke="false"
                                    :is-round="true"
                                    width="100%"
                                    height="100%"
                                    :extra="{column: 2}"
                                />
                            </view>

                        </view>
                        <view class="section-item__title c-color-title c-font-normal">
                            <view class="c-line-clamp1 c-color section-item__title__text">{{ section.text }}</view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="section-indicator">
            <indicator
                :length="list.length"
                :cur-index="selectIndex"
                :selected-color="'#00C8C8'"
                :color="'#E0E0E0'"
            /></view>
    </view>
</template>

<script>
import Indicator from '@commonComponents/indicator';
import {navigate} from '@utils/navigate';

import CImage from '@components/common/image';
/**
 * @file 首页专病专科
 * @author xuyong08
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
        Indicator,
        CImage
    },
    props: {
        /* 数据 */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            selectIndex: 0
        };
    },
    methods: {
        onSwiperChange(e) {
            const index = e.detail.current;
            this.selectIndex = index;
        },
        onTap(section, index) {
            if (section.url) {
                navigate({
                    url: section.url,
                    log: {
                        page: this.log.page,
                        type: 'clk',
                        value: this.log.value + (index + 1)
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.section-list {
    &__swiper {
        height: 88px;

        &__item {
            display: flex;
            padding-top: 15px;

            &__inner {
                width: 20%;
            }
        }
    }
}

.section-item {
    width: 100%;
    border-radius: 9px;
    overflow: hidden;

    &__header {
        width: 100%;
        display: flex;
        justify-content: center;

        &__img {
            display: block;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
    }

    &__title {
        margin-top: 2px;
        text-align: center;

        &__text {
            margin-bottom: 0;
        }
    }
}

.section-indicator {
    margin-top: 7px;
}
</style>
