<template>
    <view class="service-list">
        <view
            v-for="(service, index) in serviceList"
            :key="index"
            :style="{
                'background-image': 'url(' + service.img + ')',
                'height': __height + 'px',
            }"
            class="service-list__item img-background"
            @tap="onItemTap(service)"
        />
    </view>
</template>

<script>
import {send} from '@utils/log';
import {navigate} from '@utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
/**
 * @file 服务列表
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        const screenWidth = getSystemInfo().screenWidth;

        return {
            isSwan,
            screenWidth
        };
    },
    computed: {
        __height() {
            return Math.floor(this.screenWidth / this.imgRatio * 10) / 10;
        }
    },
    props: {
        /**
         * 服务列表
         */
        serviceList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /**
         * 图片比例，宽/高
         */
        imgRatio: {
            type: Number,
            default: 4
        },
        /**
         * 日志参数
         */
        extra: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        onItemTap(data) {
            send({
                type: 'b',
                action: 'click_act_v_service',
                extra: Object.assign({serviceType: data.type, serviceName: data.title}, this.extra)
            });
            navigate({
                url: data.h5url && !this.isSwan ? data.h5url : data.url,
                openType: data.url.indexOf('pages/gy/medstorehome') >= 0 ? 'switchTab' : 'navigate',
                urlType: data.h5url && !this.isSwan ? 3 : 0
            });
        }
    }
};
</script>
<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}

.service-list {
    padding: 0 13px;
    box-sizing: border-box;
    &__item {
        width: 100%;
        &:not(:last-child) {
            margin-bottom: 8px;
        }
    }
}
</style>
