<template>
    <view class="swiper-list--wrap">
        <swiper
            class="swiper-list"
            @change="onSwiperChange"
        >
            <swiper-item
                v-for="(itm, i) in data"
                :key="i"
                class="swiper-list__item"
            >
                <view
                    v-for="(item, index) in itm"
                    :key="index"
                    class="swiper-list__item__inner img-background"
                    @tap="onTap(item)"
                >
                    <view class="swiper-list__item__bg">
                        <c-image
                            has-compress
                            :src="item.background"
                            width="100%"
                            height="100%"
                            :hack-white-stroke="false"
                            :is-round="false"
                            :extra="{column: 6}"
                            radius="0.08rem"
                        />
                    </view>

                    <view class="swiper-list__item__cont">
                        <view
                            class="swiper-list__item__title c-font-medium c-color-title c-line-clamp1"
                        >{{ item.title }}</view>
                        <view
                            class="swiper-list__item__subTitle c-color-gray c-font-normal c-line-clamp1"
                        >{{ item.subTitle }}</view>
                        <view class="swiper-list__item__bottom c-gap-top-small">
                            <view class="swiper-list__item__price c-line-clamp1">
                                <price
                                    v-if="item.prices"
                                    :price="parseInt(item.prices || '0')"
                                    u-size=".14rem"
                                    i-size=".19rem"
                                    d-size=".14rem"
                                    :p-style="{'color': '#FD503E'}"
                                />
                                <text class="swiper-list__item__price__text c-font-normal">起</text>
                            </view>
                            <view
                                v-if="item.btn"
                                class="swiper-list__item__btn c-font-small"
                                :style="{
                                    backgroundColor: item.btn.backgroundColor,
                                }"
                            >
                                {{ item.btn.text }}
                            </view>
                        </view>
                    </view>

                </view>
            </swiper-item>
        </swiper>
        <view class="c-gap-top-large">
            <indicator
                :length="data.length"
                :cur-index="selectIndex"
                :selected-color="'#00C8C8'"
                :color="'#E0E0E0'"
            /></view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
import Price from '@commonComponents/Price';
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,
        Price,
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /* 高度 */
        height: {
            type: String,
            default: '1.5rem'
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    value: ''
                };
            }
        }
    },
    data() {
        return {
            selectIndex: 0
        };
    },
    methods: {
        onSwiperChange(e) {
            const index = e.detail.current;
            this.selectIndex = index;
        },
        onTap(item) {
            if (item.btn && item.btn.unifiUrl) {
                navigate({
                    url: item.btn.unifiUrl,
                    log: {
                        page: this.log.page,
                        type: 'clk',
                        value: this.log.value,
                        ext: Object.assign({
                            pd: 'gene',
                            value_id: item.id
                        }, this.log.ext || {})
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.img-background {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.swiper-list {
    height: 0.96rem;

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

        &__title {
            font-weight: bold;
        }

        &__inner {
            padding: 0.1rem 0.13rem 0.15rem;
            box-sizing: border-box;
            width: calc(50% - 4px);
            height: 100%;
            position: relative;
        }

        &__bottom {
            display: flex;
            justify-content: space-between;
        }

        &__price {
            &__text {
                display: inline-block;
                color: #fd503e;
                margin-left: 1px;
            }
        }

        &__btn {
            height: 0.21rem;
            line-height: 0.21rem;
            border-radius: 0.3rem;
            padding: 0 0.08rem;
            color: #fff;
            font-weight: bold;
        }

        &__bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        &__cont {
            position: relative;
            z-index: 5;
        }
    }
}
</style>
