<template>
    <view v-if="content" class="psy-help">
        <swiper
            :style="{
                height: 260 + imgHeight + 'px',
                overflowY: 'visible',
                width: '100vw',
            }"
            class="swiper-class"
            :current="swiperIndex"
            next-margin="17px"
            previous-margin="17px"
            @change="swiperChange"
        >
            <swiper-item
                v-for="(swiper, index) in content"
                :key="index"
                :style="{overflow: 'visible'}"
            >
                <view
                    class="psy-help-item"
                    :style="{height: 220 + imgHeight + 'px'}"
                >
                    <view class="psy-help-item-img img-bg psy-bold c-line-clamp2" :style="{height: imgHeight + 'px', backgroundImage: 'url(' + swiper.img + ')'}">
                        {{ swiper.title }}
                    </view>
                    <slot :slotitem="swiper" :slotindex="index"></slot>
                </view>
            </swiper-item>
        </swiper>
        <view :style="{top: '-20px', position: 'relative'}">
            <indicator
                :length="content.length"
                :cur-index="swiperIndex"
                :selected-color="selectColor"
                :color="'#ccc'"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 卡片横滑
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
import Indicator from '../common/indicator';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        Indicator
    },
    props: {
        /* 数据 */
        content: {
            type: Array,
            required: true
        },
        /* 选中颜色 */
        selectColor: {
            type: String,
            default: '#70A6FD'
        }
    },
    data() {
        return {
            imgHeight: 0,
            swiperIndex: 0
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.imgHeight = (systemInfoSync.screenWidth - 54) * 0.2;
    },
    methods: {
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        }
    }
};
</script>

<style lang="less" scoped>
.psy-help {
    &-center {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin-top: -20px;
    }
    &-cont {
        position: relative;
    }
    &-item {
        background: #FFFFFF;
        box-shadow: 0 10px 50px 0 rgba(0,0,0,0.08);
        border-radius: 15px;
        width: calc(100% - 20px);
        position: relative;
        &-img {
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            width: 100%;
            font-size: 18px;
            line-height: 28px;
            color: #fff;
            padding: 0 15px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }
    }
}
.img-bg {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
</style>
