<template>
    <view class="article-list">
        <swiper class="article-list__swiper" @change="onSwiperChange">
            <swiper-item
                v-for="(item, i) in list"
                :key="i"
                class="article-list__swiper__item"
            >
                <view
                    v-for="(article, index) in item"
                    :key="index"
                    class="article-list__swiper__item__inner"
                >
                    <view
                        class="article-item"
                        @tap="onTap(article)"
                    >
                        <view class="article-item__header">
                            <c-image
                                has-compress
                                :src="article.img"
                                :extra="{column: 6}"
                                width="100%"
                                height="24.47vw"
                                :hack-white-stroke="false"
                                :is-round="false"
                                radius="0.06rem"
                            />
                        </view>
                        <view class="article-item__title c-color-title">
                            <view class="c-line-clamp2 article-item__title__text">{{ article.title }}</view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="c-gap-top-large">
            <indicator
                :length="list.length"
                :cur-index="selectIndex"
                :selected-color="'#00C8C8'"
                :color="'#E0E0E0'"
            /></view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
import Indicator from '@commonComponents/indicator';
import {navigate} from '@utils/navigate';
/**
 * @file 基因检测
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        Indicator,
        CImage
    },
    props: {
        /* 数据 */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    value: ''
                };
            }
        }
    },
    data() {
        return {
            selectIndex: 0
        };
    },
    methods: {
        onSwiperChange(e) {
            const index = e.detail.current;
            this.selectIndex = index;
        },
        onTap(article) {
            if (article.url) {
                navigate({
                    url: article.url,
                    log: {
                        page: this.log.page,
                        type: 'clk',
                        value: this.log.value,
                        ext: Object.assign({
                            pd: 'gene',
                            value_id: article.id
                        }, this.log.ext || {})
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.article-list {
    &__swiper {
        height: 1.62rem;

        &__item {
            display: flex;
            justify-content: space-between;

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

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

    &__header {
        width: 100%;

        &__img {
            display: block;
            width: 100%;
            height: 24.47vw;
        }
    }

    &__title {
        padding: 6px 11px 11px;
        background: #f5f5f5;
        font-size: 15px;
        line-height: 21px;

        &__text {
            margin-bottom: 0;
        }
    }
}
</style>
