<template>
    <view
        :class="['service-list', 'layout-style' + layout]"
    >
        <view
            v-for="(service, index) in serviceList"
            :key="index"
            class="service-list__item c-gap-bottom-small img-background"
            @tap="onItemTap(service)"
        >
            <view class="service-list__item__icon">
                <c-image
                    v-if="iconPosition === 'left'"
                    :mode="'aspectFit'"
                    has-compress
                    :src="service.img"
                    width="100%"
                    height="100%"
                    :extra="{column: 1}"
                    :hack-white-stroke="false"
                    :is-round="false"
                />
            </view>

            <view class="service-list__item__content c-line-clamp1">
                <view class="service-list__item__content__title c-font-medium c-line-clamp1">{{ service.title }}</view>
                <view class="service-list__item__content__desc c-font-13 c-line-clamp1">{{ service.desc }}</view>
            </view>
            <image
                v-if="iconPosition === 'right'"
                :mode="'aspectFit'"
                class="service-list__item__icon"
                :src="service.img"
                lazy-load
            />
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
import {send} from '@utils/log';
import {navigate} from '@utils/navigate';
/**
 * @file 服务列表
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
        // CIcon
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan
        };
    },
    props: {
        /**
         * 服务列表
         */
        serviceList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /**
         * 布局
         */
        layout: {
            type: [String, Number],
            default: '1'
        },
        /**
         * icon位置
        */
        iconPosition: {
            type: String,
            default: 'left'
        },
        /**
         * 日志参数
         */
        extra: {
            type: Object,
            default: () => ({})
        },
        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: ''
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onItemTap(data) {
            let log = null;
            if (this.logPrefix) {
                log = {
                    page: this.page,
                    type: 'clk',
                    value: `${this.logPrefix}_service`,
                    ext: {
                        pd: 'act',
                        value_id: data.type
                    }
                };
            } else {
                send({
                    type: 'b',
                    action: 'click_act_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,
                log
            });
        }
    }
};
</script>
<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}

.service-list {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &__item {
        &:nth-last-child(1),
        &:nth-last-child(2) {
            margin-bottom: 0 !important;
        }

        &__icon {
            border-radius: 50%;
        }

        &__content {
            flex: 1;
        }
    }
}

/* 样式1 */
.layout-style1 {
    padding: 0 0.13rem;

    .service-list {
        &__item {
            width: calc(50% - 3px);
            padding: 0 20px;
            height: 19.72vw;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            background-image: linear-gradient(-42deg, #fdd48d, #ffedc5);
            border-radius: 5px;

            &__icon {
                margin-right: 12px;
                width: 48px;
                height: 48px;
            }

            &__content {
                &__title {
                    font-weight: bold;
                    color: #e31218;
                }

                &__desc {
                    margin-top: -5px;
                    color: #e31218;
                }
            }
        }
    }
    @media screen and (max-width: 400px) {
        .service-list__item {
            padding: 0 10px;
        }
    }
}

.layout-style2 {
    .service-list {
        &__item {
            width: calc(50% - 3px);
            padding: 0.05rem 0.07rem 0.05rem 0.11rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            background-image: linear-gradient(147deg, #fff1db 3%, #ffe0b6 100%);
            border-radius: 0.06rem;

            &__icon {
                width: 0.6rem;
                height: 0.6rem;
                border-radius: 50%;
                background-color: #fff;
            }

            &__content {
                &__title {
                    font-weight: bold;
                    font-size: 0.14rem;
                    line-height: 0.18rem;
                    color: #a25708;
                }

                &__desc {
                    font-size: 0.12rem;
                    line-height: 0.16rem;
                    color: #a25708;
                }
            }
        }
    }
}
</style>
