<template>
    <view class="model-wrap">
        <view
            class="model-title"
            :style="{
                'background': 'linear-gradient(125deg, ' + startColor + ' 0%, ' + endColor + ' 100%)',
            }"
            @tap="jumpPage(jumpUrl)"
        >
            <view v-if="title" class="title-text c-font-large">{{ title }}</view>
            <view>
                <text v-if="subTitle" class="c-font-13">{{ subTitle }}</text>
                <c-icon
                    v-if="jumpUrl"
                    name="right"
                    font-size="10px"
                    class="modal-title-right"
                />
            </view>
        </view>
        <view class="model-cont">
            <swiper
                :style="{height: '364px'}"
                :indicator-dots="true"
                indicator-color="rgba(253, 80, 62, 0.3)"
                indicator-active-color="#FD503E"
                @change="swiperChange"
            >
                <swiper-item
                    v-for="(item, index) in skuList"
                    :key="index"
                >
                    <cps-package
                        v-for="(sku, i) in item"
                        :key="'sku' + i"
                        :data="sku"
                        :index="i"
                        :log="sku.title"
                        @share="toShare"
                    />
                </swiper-item>
            </swiper>
        </view>
        <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 cps业务模块框
* @author zhangqian51
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CpsPackage from './cps-package';
import ShareImg from '@commonComponents/share-img';
import {getQueryObject} from '@utils/core';
import {request} from '@utils/request';
import {send} from '@utils/log';
import * as conf from '@utils/conf';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CpsPackage,
        ShareImg
    },
    props: {
        // 标题
        title: {
            type: String,
            required: true
        },
        // 二级标题
        subTitle: {
            type: String
        },
        // 跳转地址
        jumpUrl: {
            type: String
        },
        // 背景色-渐变开始
        startColor: {
            type: String
        },
        // 背景色-渐变结束
        endColor: {
            type: String
        },
        // 商品List
        list: {
            type: Array,
            default: () => []
        },
        // 每页显示数量
        maxRowNum: {
            type: Number,
            default: 2
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            skuList: [],
            flag: '',
            materialUrl: '',
            url: '',
            swiperIndex: 0,
            showImg: false
        };
    },
    created() {
        this.list && this.list.length && this.list.forEach((item, index) => {
            !(index % this.maxRowNum) && this.skuList.push(this.list.slice(index, index + 2));
        });
    },
    methods: {
        toShare(url, type) {
            this.flag = decodeURIComponent(getQueryObject(url).flag) || '';
            if (this.flag === 'img') {
                this.$api.showToast({
                    icon: 'loading',
                    title: '正在加载中……'
                });
            }
            request({
                url: conf.apiHost + url,
                isNeedLogin: false,
                isFirstScreen: false
            }).then(async res => {
                let {material_url = '', url = ''} = res.data;
                Object.assign(this, {
                    materialUrl: material_url,
                    url
                });
                setTimeout(() => {
                    if (this.flag === 'url') {
                        this.urlCopy(url, () => {
                            this.$api.showToast({
                                title: '分享链接已复制，赶快分享给好友吧~',
                                icon: 'none'
                            });
                        }, () => {
                            this.$api.showToast({
                                title: '复制失败',
                                icon: 'none'
                            });
                        });
                        send({
                            extra: {
                                action: 'share',
                                type: 'url' + (type ? '_' + type : '')
                            }
                        });
                        return;
                    }
                    if (this.flag === 'img') {
                        this.$api.hideToast();
                        send({
                            extra: {
                                action: 'share',
                                type: 'img' + (type ? '_' + type : '')
                            }
                        });
                        this.showImg = true;
                    }
                }, 200);
            });
        },
        // 复制
        urlCopy(data, succClb, failClb) {
            this.$api.setClipboardData({
                data: data,
                success: succClb,
                fail: failClb
            });
        },
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        },
        jumpPage(url) {
            navigate({
                url: url
            });
        },
        onCloseShare() {
            this.showImg = false;
        }
    }
};
</script>

<style lang="less" scoped>
.model {
    &-wrap {
        margin: 10px 15px;
        border-radius: 10px;
    }

    &-title {
        border-radius: 10px;
        padding: 5px 15px 15px;
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        &-right {
            color: #fff;
        }
    }

    &-cont {
        background: #fff;
        margin-top: -13px;
        padding: 13px 13px 0;
        border-radius: 10px;
    }
}
</style>
