<template>
    <view
        class="brand-operate-service"
    >
        <image
            :src="img.top"
            lazy-load
            mode="widthFix"
            class="brand-operate-service-tit"
        />
        <view
            class="service-cont"
            :style="{
                'background-image': 'url(' + img.cont + ')',
                'padding-left': screenWidth * 0.06 + 'px',
                'padding-right': screenWidth * 0.06 + 'px',
            } | imgCompress('background-image')"
        >
            <view
                v-for="(item, index) in serviceList"
                :key="index"
                class="service-item"
                @tap.stop="onServiceTap(item)"
            >
                <c-image
                    has-compress
                    :src="item.image"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    radius="0.1rem"
                    :extra="{column: 6}"
                    :hack-white-stroke="false"
                    :is-round="false"
                />
                <view class="service-item-cont">
                    <view
                        class="service-title c-gap-top c-gap-bottom-small c-line-clamp1"
                    >{{ item.service_name }}</view>
                    <view class="service-text c-line-clamp1">{{ item.service_desc }}</view>
                </view>
            </view>
        </view>
        <image
            :src="img.bottom"
            lazy-load
            mode="widthFix"
            class="brand-operate-service-tit"
            :style="{marginTop: '-2px'}"
        />
    </view>
</template>

<script>
/**
 * @file 打卡服务精选
 * @author mayifan02
 * @categories 打卡服务精选
 * @tags [component]
 */
import CImage from '@components/common/image';
import {navigate} from '../../../utils/navigate';
import {send} from '../../../utils/log';

export default {
    config: {
        component: true
    },
    components: {
        CImage
    },
    props: {
        /**
        * 屏幕宽度
        */
        screenWidth: {
            type: Number,
            required: true
        },
        /**
        * 图片
        */
        img: {
            type: Object,
            required: true
        },
        /**
        * 服务列表
        */
        serviceList: {
            type: Array,
            required: true
        },
        /**
        * 类型
        */
        type: {
            type: String,
            default: 'operate'
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan
        };
    },
    methods: {
        onServiceTap(item) {
            this.isSwan && this.$api.reportAnalytics(`${this.type}_new_service`, {
                /* eslint-disable */
                service_url: item.url.split('?')[0]
            });
            send({
                type: 'b',
                action: 'navigate',
                extra: {
                    type: `${this.type}_new_service`,
                    service_url: item.url.split('?')[0]
                }
            });
            navigate({url: item.url, openType: item.url.indexOf('pages/gy/medstorehome') >= 0 ? 'switchTab' : 'navigate'});
        }
    }
};
</script>
<style lang="less" scoped>
.brand-operate-service {
    &-tit {
        width: 100%;
    }
}

.service-cont {
    margin-top: -7px;
    padding: 0 10px;
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.service-item {
    width: 40.82vw;
    border-radius: 10px;
    margin-bottom: 15px;

    &:last-child {
        margin-bottom: 6px;
    }

    &:nth-last-child(2) {
        margin-bottom: 6px;
    }
}

.service-title {
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    font-weight: 500;
}

.service-text {
    font-size: 13px;
    line-height: 13px;
    color: #fff;
}

.service-img {
    width: 100%;
    border-radius: 10px;
    display: block;
}
</style>
