<template>
    <view>
        <cps-wrap :title="data.title" :sub-title="data.subTitle">
            <view v-if="data.service && data.service.length" class="service-wrap c-gap-top">
                <view
                    v-for="(item, index) in data.service"
                    :key="'service' + index"
                    class="service-item c-inline-block"
                    :style="{
                        'background-image': 'url(' + item.bgImg + ')',
                    } | imgCompress('background-image')"
                >
                    <c-navigate :url="item.path" :extra="{module: 'service', type: item.title}">
                        <view class="service-item-left">
                            <view
                                class="c-font-medium font-medium service-item-title c-inline-block"
                            >{{ item.title }}</view>
                            <view
                                class="c-font-small service-item-sub c-inline-block"
                            >{{ item.subTitle }}</view>
                            <view
                                v-if="item.button && item.button.length"
                                class="service-item-btn-wrap c-gap-top-small"
                            >
                                <view
                                    v-for="(btn, idx) in item.button"
                                    :key="'btn' + idx"
                                    class="service-item-btn font-medium c-font-small"
                                    :class="[idx < item.button.length - 1 ? 'c-gap-right-middle' : '']"
                                    :style="{
                                        color: btn.color,
                                        background: btn.bgColor
                                    }"
                                    @tap.stop="toShare(btn.url)"
                                >
                                    {{ btn.text }}
                                </view>
                            </view>
                        </view>
                        <view class="service-item-right c-tar" :style="{top: index === 0 ? '33px' : '14px'}">
                            <view class="service-item-spread font-medium">
                                <text class="c-font-small">¥</text>
                                <text class="service-item-profit">{{ item.profit }}</text>
                                <text class="c-font-small">{{ item.extra }}</text>
                            </view>
                            <view class="c-font-small service-item-text">{{ item.text }}</view>
                        </view>
                    </c-navigate>
                </view>
            </view>
        </cps-wrap>
        <c-dialog
            :show="dialogCont.show"
            :title="dialogCont.title"
            content-text-align="center"
            :btn-opts="dialogCont.btnOpts"
            @confirm="dialogConfirm"
        >
        </c-dialog>
        <share-img
            v-if="showImg && materialUrl"
            disable-compress
            :src="materialUrl"
            :btn-opts="[{
                text: '保存海报',
                type: 'save',
                color: '#FF6050',
                borderColor: '#FF6050'
            }, {
                text: '立即分享',
                type: 'share',
                bgColor: 'linear-gradient(125deg, #FF754F 0%, #FB4556 100%)',
                color: '#fff'
            }]"
            @close="onCloseShare"
        />
    </view>
</template>
<script>
/**
* @file 热门服务
* @author zhangqian51
* @categories 业务组件
* @tags [component]
*/
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import CpsWrap from './cps-wrap';
import ShareImg from '@commonComponents/share-img';
import CNavigate from '@commonComponents/navigate';
import * as Log from '@utils/log';
import * as conf from '@utils/conf';
import {request} from '@utils/request';
import {getQueryObject} from '@utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CpsWrap,
        CDialog,
        ShareImg,
        CNavigate
    },
    props: {
        // 业务数据
        data: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            flag: '',
            materialUrl: '',
            url: '',
            // 弹窗
            dialogCont: {
                show: false,
                title: '分享链接已复制，赶快分享给好友吧',
                btnOpts: [{
                    event: 'confirm',
                    text: '我知道了',
                    color: '#FF6050'
                }]
            },
            showImg: false
        };
    },
    methods: {
        toShare(url) {
            this.flag = decodeURIComponent(getQueryObject(url).flag) || '';
            const type = decodeURIComponent(getQueryObject(url).type) || '';
            if (this.flag === 'img') {
                this.$api.showToast({
                    icon: 'loading',
                    title: '正在加载中……'
                });
            }
            request({
                url: conf.apiHost + url,
                isNeedLogin: false,
                isFirstScreen: false
            }).then(async res => {
                let {data} = res;
                let materialUrl = data.material_url;
                let url = data.url;
                Object.assign(this, {
                    materialUrl,
                    url
                });
                setTimeout(() => {
                    if (this.flag === 'url') {
                        this.urlCopy(url, () => {
                            this.$api.showToast({
                                title: '分享链接已复制，赶快分享给好友吧~',
                                icon: 'none'
                            });
                        }, () => {
                            this.$api.showToast({
                                title: '复制失败',
                                icon: 'none'
                            });
                        });
                        Log.send({
                            type: 'b',
                            action: 'share',
                            extra: {
                                type: type,
                                share: this.flag
                            }
                        });
                        return;
                    }
                    if (this.flag === 'img') {
                        this.$api.hideToast();
                        Log.send({
                            type: 'b',
                            action: 'share',
                            extra: {
                                type: type,
                                share: this.flag
                            }
                        });
                        this.showImg = true;
                    }
                }, 200);
            });
        },
        // 复制
        urlCopy(data, succClb, failClb) {
            this.$api.setClipboardData({
                data: data,
                success: succClb,
                fail: failClb
            });
        },
        dialogConfirm() {
            this.dialogCont.show = false;
        },
        onCloseShare() {
            this.showImg = false;
        }
    }
};
</script>

<style lang="less" scoped>
.service-item {
    border-radius: 6px;
    height: 100px;
    box-sizing: border-box;
    background-size: cover;
    padding: 10px;
    // display: flex;
    // justify-content: space-between;
    position: relative;
    width: calc(50% - 4px);

    &:first-child {
        width: 100%;
        margin-bottom: 8px;
    }

    &:last-child {
        margin-left: 8px;
    }

    &-row {
        display: flex;
        justify-content: space-between;
    }

    &-title {
        color: #fff;
    }

    &-sub {
        color: #fff;
        margin-top: -2px;
    }

    &-left,
    &-right {
        display: flex;
        flex-direction: column;
    }

    &-right {
        position: absolute;
        right: 10px;
    }

    &-spread {
        color: #fff8dd;
    }

    &-profit {
        font-size: 16px;
    }

    &-text {
        color: #fff8dd;
        margin-top: -5px;
    }

    &-btn-wrap {
        display: flex;
    }

    &-btn {
        width: 18vw;
        height: 24px;
        border-radius: 14px;
        text-align: center;
        line-height: 24px;
    }
}

.font-medium {
    font-family: PingFangSC-Medium;
}
</style>
