<template>
    <view
        class="brand-operate-service"
    >
        <c-image
            has-compress
            :src="img.top"
            width="100%"
            height="auto"
            mode="widthFix"
            :hack-white-stroke="false"
            :is-round="false"
        />
        <view
            class="service-cont"
            :style="{
                'background-image': 'url(' + img.cont + ')',
                'padding-left': screenWidth * 0.07 + 'px',
                'padding-right': screenWidth * 0.07 + 'px',
            } | imgCompress('background-image')"
        >
            <view
                v-for="(item, index) in serviceList"
                :key="index"
                class="service-item"
                :style="{height: screenWidth * 0.19 + 'px'}"
                @tap.stop="onServiceTap(item)"
            >
                <view class="service-left">
                    <view
                        class="service-img"
                        :style="'box-shadow: ' + serviceShadow[item.type]"
                    >
                        <c-image
                            has-compress
                            :src="item.icon"
                            width="48px"
                            height="48px"
                            :hack-white-stroke="false"
                            :is-round="true"
                            :extra="{column: 1}"
                        />
                    </view>

                    <view class="service-item-cont">
                        <view class="service-title c-font-15">{{ item.title }}</view>
                        <view class="service-text c-font-13 c-line-clamp1">{{ item.text }}</view>
                    </view>
                </view>
                <view class="service-btn c-font-13" :style="{background: ueConf.btnBgColor}">{{ item.btn }}</view>
            </view>
        </view>
        <c-image
            has-compress
            :src="img.bottom"
            width="100%"
            height="auto"
            mode="widthFix"
            :hack-white-stroke="false"
            :is-round="false"
        />
    </view>
</template>

<script>
/**
 * @file 打卡服务精选
 * @author chenshuo04
 * @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
        },
        /**
        * ue配置
        */
        ueConf: {
            type: Object,
            required: true
        },
        /**
        * 类型
        */
        type: {
            type: String,
            default: 'operate'
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            serviceShadow: {
                wz: '0px 1px 9px 0px rgba(4, 209, 206, 0.25)',
                hpv: '0px 1px 9px 0px rgba(237, 108, 102, 0.25)',
                gh: '0px 1px 9px 0px rgba(90, 192, 255, 0.25)',
                gy: '0px 1px 9px 0px rgba(237, 108, 102, 0.25)',
                tj: '0px 1px 9px 0px rgba(90, 192, 255, 0.25)',
                hs: '0px 1px 9px 0px rgba(86, 112, 246, 0.25)',
                bx: '0px 1px 9px 0px rgba(247, 198, 84, 0.25)',
                yy: '0px 1px 9px 0px rgba(135, 160, 226, 0.25)',
                ys: '0px 1px 9px 0px rgba(4, 209, 206, 0.25)'
            }
        };
    },
    methods: {
        onServiceTap(item) {
            this.isSwan && this.$api.reportAnalytics(`${this.type}_service_jump`, {
                /* eslint-disable */
                service_type: item.type
            });
            send({
                type: 'b',
                action: 'navigate',
                extra: {
                    type: `${this.type}_service_jump`,
                    service_type: item.type
                }
            });
            navigate({url: item.url, openType: item.type === 'gy' ? '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;
    position: relative;
    z-index: 3;
    margin-bottom: -2px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);
    padding: 0 15px;
    border-radius: 15px;
    margin-bottom: 10px;

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

    &-cont {
        padding-left: 10px;
        width: calc(100% - 48px);
    }
}

.service-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 64px);
    color: #363636;
}

.service-title {
    // font-weight: 500;
}

.service-text {
    margin-top: -1px;
    color: rgba(54, 54, 54, 0.8);
}

.service-img {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
}

.service-btn {
    min-width: 39px;
    max-height: 29px;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
}
</style>
