<template>
    <view v-if="btns && btns.length">
        <view class="share-btn-wrapper swan-security-padding-bottom">
            <view class="share-btn-cont">
                <template v-for="(btn, btnIndex) in btns">
                    <template v-if="isSwan && btn.type === 'subscribe' && subscribeInfo && subscribeInfo.usePush">
                        <login-btn
                            v-if="useLogin"
                            :key="btnIndex"
                            :style="{
                                width: (btn.size ? btn.size : 100 / btns.length) + '%',
                                background: btn.bgColor,
                                boxShadow: btn.shadow,
                            }"
                            :z-index="9"
                            class="share-btn"
                            @onLoginSuccess="onLoginSuccess(btn)"
                        >
                            <image
                                v-if="btn.icon"
                                :src="btn.icon"
                                class="share-btn-icon"
                            />
                            <text class="c-gap-left-middle">{{ btn.btnText }}</text>
                            <text v-if="btn.btnSubText" class="c-gap-left-middle c-font-small c-gap-top3">{{ btn.btnSubText }}</text>
                            <share-img
                                v-if="show && btn.imgSrc"
                                :src="btn.imgSrc"
                                @close="onCloseShare"
                            />
                        </login-btn>
                        <form
                            v-else
                            :key="btnIndex"
                            class="share-btn"
                            :style="{
                                width: (btn.size ? btn.size : 100 / btns.length) + '%',
                                background: btn.bgColor,
                                boxShadow: btn.shadow,
                            }"
                            report-submit
                            skip-subscribe-authorize
                            report-type="subscribe"
                            :template-id="subscribeInfo.templateId"
                            :subscribe-id="subscribeInfo.subscribeId"
                            @submit="onFormSubmit($event, btn)"
                        >   
                            <image
                                v-if="btn.icon"
                                :src="btn.icon"
                                class="share-btn-icon"
                            />
                            <text class="c-gap-left-middle">{{ btn.btnText }}</text>
                            <text v-if="btn.btnSubText" class="c-gap-left-middle c-font-small c-gap-top3">{{ btn.btnSubText }}</text>
                            <button form-type="submit" class="auth-btn"></button>
                        </form>
                    </template>
                    <view
                        v-else
                        :key="btnIndex"
                        class="share-btn"
                        :style="{
                            width: (btn.size ? btn.size : 100 / btns.length) + '%',
                            background: btn.bgColor,
                            boxShadow: btn.shadow,
                        }"
                        @tap.stop="onTap(btn)"
                    >   
                        <image
                            v-if="btn.icon"
                            :src="btn.icon"
                            class="share-btn-icon"
                        />
                        <text class="c-gap-left-middle">{{ btn.btnText }}</text>
                        <text v-if="btn.btnSubText" class="c-gap-left-middle c-font-small c-gap-top3">{{ btn.btnSubText }}</text>
                        <share-img
                            v-if="show && btn.imgSrc"
                            :src="btn.imgSrc"
                            @close="onCloseShare"
                        />
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 分享按钮
* @author  chenshuo04
* @categories 业务组件
* @tags [component]
*/
/* global getApp, swan, Page, getCurrentPages, _pages */
import LoginBtn from '@components/common/login-btn';
import {ubcSend} from '@utils/log';
import ShareImg from '../common/share-img';
import {navigate} from '../../utils/navigate';

const baseBottomBtnData = {
    hpv: [
        {
            bgColor: 'linear-gradient(rgb(255, 183, 183) 0%, rgb(255, 62, 62) 100%)',
            btnText: '回到HPV疫苗主会场',
            log: 'hpv-form',
            path: '/pages/act/hpv-pcr/index?from=bottomBtn'
        }
    ],
    flu: [
        {
            bgColor: 'linear-gradient(180deg, #84A2FF 0%, #6A80F4 53%, #7881FF 100%)',
            btnText: '回到流感疫苗主会场',
            log: 'flu-form',
            path: '/pages/act/hpv-pcr/index?from=bottomBtn&topic=flu'
        }
    ],
    shingles: [
        {
            bgColor: 'linear-gradient(180deg, #FFC380 0%, #FE5F3E 100%)',
            btnText: '回到带状疱疹疫苗主会场',
            log: 'shingles-form',
            path: '/pages/act/hpv-pcr/index?from=bottomBtn&topic=shingles'
        }
    ],
    covid: [
        {
            bgColor: 'linear-gradient(180deg, #7C9AFF 0%, #4477FB 100%)',
            shadow: '0 3px 8px 0 #6C92FF',
            btnText: '回到新冠疫苗主会场',
            log: 'covid-form',
            path: '/pages/act/hpv-pcr/index?from=bottomBtn&topic=covid'
        }
    ],
    jhb: [
        {
            bgColor: 'linear-gradient(180deg, #7C9AFF 0%, #4477FB 100%)',
            shadow: '0 3px 8px 0 #6C92FF',
            btnText: '返回北京普惠健康保主页',
            log: 'jhb-form',
            path: '/pages/act/hpv-pcr/index?from=bottomBtn&topic=jhb'
        }
    ],
    gene: [
        {
            bgColor: 'linear-gradient(180deg, #00C8C8 0%, #00C8C8 100%)',
            btnText: '返回主会场',
            log: 'gene-form',
            path: '/pages/gene-sub/home/index?from=bottomBtn'
        }
    ]
};
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * @bgColor String
         * @btnText String
         * @btnSubText String
         * @shareData Object
         * @imgSrc String
         */
        custom: {
            type: Array,
            default: () => []
        },
        /* 指定类型 */
        type: {
            type: String,
            default: ''
        },
        /* 日志 */
        log: {
            type: String,
            default: 'share'
        },
        /* 订阅 */
        subscribeInfo: {
            type: Object,
            default: () => {}
        },
        /* 登录状态 */
        isLogin: {
            type: Number,
            default: 0
        },
        /* 城市 */
        city: {
            type: String,
            default: ''
        },
        /* sfRef */
        sfRef: {
            type: String,
            default: ''
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    components: {
        ShareImg,
        LoginBtn
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            show: false,
            btns: null,
            useLogin: false
        };
    },
    watch: {
        custom(nval, oval) {
            if (!this.type) {
                Object.assign(this, {btns: nval});
            }
            else if (this.type === 'jhb' && nval && nval.length) {
                Object.assign(this, {btns: nval});
            }
        }
    },
    created() {
        if (this.isLogin === 0 && this.isSwan) {
            this.useLogin = true;
        }
        if (this.type === 'jhb' && this.custom && this.custom.length) {
            Object.assign(this, {btns: this.custom});
        }
        else if (this.type) {
            this.btns = baseBottomBtnData[this.type] ? baseBottomBtnData[this.type] : null;
        }
        else if (this.custom) {
            Object.assign(this, {btns: this.custom});
        }
    },
    methods: {
        onLoginSuccess(data) {
            this.useLogin = false;
            if (data.type === 'join'){
                this.$emit('onSubscribe', data);
            }
        },
        onCloseShare() {
            this.show = false;
        },
        onFormSubmit(e, btn) {
            if (btn.type === 'join'){
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'share-btn',
                    ext: {
                        pd: 'bx',
                        city: this.city,
                        value_type: 'insured',
                        page_type: this.log || ''
                    }
                });
                this.$emit('onSubscribe', btn);
                return;
            }
            const {status, formId} = e.detail;
            /* 订阅 */
            this.$emit('onSubscribe', {status, formId, ...btn});
        },
        onTap(btn) {
            if (btn.type === 'join'){
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'share-btn',
                    ext: {
                        pd: 'bx',
                        city: this.city,
                        value_type: 'insured',
                        page_type: this.log || ''
                    }
                });
                this.$emit('onSubscribe', btn);
            }

            else if (btn.type === 'subscribed' || btn.type === 'subscribe') {
                /* 订阅 */
                this.$emit('onSubscribe', btn);
            }

            else if (btn.path) {
                const path = this.sfRef ? `${btn.path}&sf_ref=${this.sfRef}` : btn.path;
                navigate({
                    url: path,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: 'bottom-btn',
                        ext: {
                            pd: 'bx',
                            city: this.city,
                            page_type: this.pageTopic || ''
                        }
                    }
                });
            }
            else if (btn.shareData) {
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'share-btn',
                    ext: {
                        pd: 'bx',
                        city: this.city,
                        value_type: 'share',
                        page_type: this.log || ''
                    }
                });
                const isInApp = getApp().globalData.isInApp;
                if (process.env.MARS_ENV === 'swan' || isInApp) {
                    this.$api.openShare({
                        ...btn.shareData,
                        imageUrl: btn.shareData.imageUrl || 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2652066159,3382944355&fm=179&app=35&f=JPEG?w=144&h=144',
                        success: res => {
                            /* 分享 */
                            this.$emit('onShare');
                            !isInApp && this.$api.showToast({title: '分享成功'});
                        }
                    });
                }
                else {
                    /* 分享 */
                    this.$emit('onShare');
                    this.show = true;
                }
            }
            else if (btn.phone) {
                if (process.env.MARS_ENV === 'swan') {
                    this.$api.makePhoneCall({
                        phoneNumber: btn.phone
                    });
                }
                else if (process.env.MARS_ENV === 'h5') {
                    window.location.href = `tel:${btn.phone}`;
                }
            }
        },
        onSubscribeCallback(type) {
            this.btns.forEach((item, index) => {
                if (item.type === 'subscribe' || item.type === 1) {
                    Object.assign(this.btns[index], {
                        type: 'subscribed',
                        disabled: true,
                        btnText: '已订阅'
                    });
                }
                else if (item.type === 'subscribed' || item.type === 0) {
                    Object.assign(this.btns[index], {
                        type: 'subscribe',
                        disabled: false,
                        btnText: '订阅'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.share-btn-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    // background: #fff;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 6%, #FFFFFF 91%);
    z-index: 99;
}
.share-btn-cont {
    display: flex;
    justify-content: space-between;
    padding: 8px 17px;
    width: 100%;
    box-sizing: border-box;
}
.share-btn {
    position: relative;
    border-radius: 22px;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.share-btn-icon {
    width: 18px;
    height: 18px;
}
.c-gap-top3 {
    margin-top: 3px;
}
.auth-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
}
</style>
