<template>
    <view class="mch-share" :class="{model: is_share_model || is_poster_model}" @click="closeModel">
        <view v-if="is_poster_model" class="poster-share main-center" @click.stop="handleStop">
            <view class="poster-share-info">
                <view class="poster-wt dir-top-nowrap cross-center" v-if="type === 'detail' && detail">
                    <view class="t-omit-two wt-name">{{ detail.title }}</view>
                    <view class="dir-left-nowrap cross-center main-between" style="width: 100%">
                        <view class="wt-read">{{ detail.read_number }}人浏览</view>
                        <view class="wt-notice" :style="{background: detail.tag.extra_attributes.color}">
                            {{ detail.tag.name }}
                        </view>
                    </view>
                    <view class="dir-left-nowrap cross-center wt-pic">
                        <image v-for="(pic,index) in detail.pic_url"
                               v-if="index < 3"
                               :src="pic.pic_url"
                               :key="index"
                        ></image>
                    </view>
                    <view class="dir-top-nowrap main-center cross-center">
                        <view class="wt-yellow-text">打开小程序阅读全文</view>
                        <image class="wt-yellow-icon" src="./image/weitao-detail-down.png"></image>
                    </view>
                    <view class="p-w dir-left-nowrap cross-center main-center">
                        <image class="box-grow-0 p-w-icon" :src="detail.qr_code_url"></image>
                        <view class="dir-top-nowrap main-center">
                            <view class="p-w-code">长按识别小程序码</view>
                            <view class="p-w-show">查看更多精彩内容</view>
                        </view>
                    </view>
                </view>
                <view class="poster-btn main-center cross-center" @click.stop="submitSave">
                    <view class="main-center cross-center" :style="{background: getTheme.background_gradient_btn}">保存图片</view>
                </view>
            </view>
        </view>
        <view :class="{active: is_share_model}" class="share-end" @click.stop="closeModel"
              :style="{height:is_share_model ? `calc(110rpx + ${getBoolEmpty.emptyHeight}rpx)` : 0}">
            <view class="share-end-info dir-left-nowrap cross-center">
                <view class="box-grow-1 dir-left-nowrap cross-center main-center">
                    <view class="share-end-icon share-wechat" :style="{backgroundColor: getTheme.color}">
                        <view class="hide"></view>
                    </view>
                    <!--  #ifdef MP -->
                    <view class="share-end-text">
                        <app-jump-button open_type="share">分享给好友</app-jump-button>
                    </view>
                    <!--  #endif -->
                    <!--  #ifdef H5 -->
                    <view class="share-end-text" @click="quickShare">
                        <app-jump-button open_type="share">分享给好友</app-jump-button>
                    </view>
                    <!--  #endif -->
                </view>
                <!--  #ifndef MP-BAIDU -->
                <view class="box-grow-0 share-end-line"></view>
                <view class="box-grow-1 dir-left-nowrap cross-center main-center" @click.stop="openPosterModel">
                    <view class="share-end-icon share-download" :style="{backgroundColor: getTheme.color}">
                        <view class="hide"></view>
                    </view>
                    <view class="share-end-text">生成海报</view>
                </view>
                <!--  #endif -->
            </view>
            <view :style="{height: `${getBoolEmpty.emptyHeight}rpx`}"></view>
        </view>
    </view>
</template>

<script>
import {mapGetters} from "vuex";

export default {
    name: "mch-share",
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        detail: Object,
        type: String,//detail share
    },
    data() {
        return {
            iphone_h: 0,
            is_share_model: this.value,
            is_poster_model: false,
        }
    },
    watch: {
        value(newVal) {
            console.warn(newVal);
            this.is_share_model = newVal;
        }
    },
    computed: {
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
        ...mapGetters('iPhoneX', {
            getBoolEmpty: 'getBoolEmpty'
        })
    },
    methods: {
        quickShare(e) {
            this.$emit('share', e);
        },
        openShareModel() {
            this.is_share_model = !this.is_share_model;
            this.$emit('input', this.is_share_model);
        },
        handleStop() {
        },
        openPosterModel() {
            this.is_poster_model = true;
            this.is_share_model = false;
            this.$emit('input', this.is_share_model);
        },
        closeModel() {
            this.is_share_model = false;
            this.is_poster_model = false;
            this.$emit('input', this.is_share_model);
        },

        submitSave() {
            this.closeModel();
            ////
            this.$showLoading({text: '生成中'});
            this.$request({
                url: this.$api.topic.poster,
                data: {id: this.detail.id},
                method: 'POST',
            }).then(info => {
                this.$hideLoading();
                let {code, data, msg} = info;
                if (code === 0) {
                    this.$utils.batchSave(data.pic_url).then(() => {
                        uni.showToast({title: '保存成功'});
                    });
                } else {
                    uni.showToast({title: msg, icon: 'none'});
                }
            }).catch(() => {
                this.$hideLoading();
            })
        }
    }
}
</script>
<style scoped lang="scss">
.mch-share.model {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1601;
    top:0;
    transition: all 0.5s ease;
}

.mch-share {
    .poster-share {
        position: fixed;
        top: 306#{rpx};
        width: 100%;
        z-index: 1601;

        .poster-share-info {
            width: 560#{rpx};

            .poster-head {
                width: 100%;
                height: 598#{rpx};
                position: relative;
                background: #FFFFFF;
                border-radius: 20#{rpx};
                overflow: hidden;

                .poster-head-icon {
                    position: absolute;
                    width: 100%;
                    top: 172#{rpx};
                    z-index: 200;

                    > image {
                        width: 120#{rpx};
                        height: 120#{rpx};
                        border-radius: 20#{rpx};
                        border: 3#{rpx} solid #FFFFFF;
                    }
                }

                .poster-head-bg {
                    width: 100%;
                    height: 224#{rpx};
                }

                .p-info {
                    padding-top: 92#{rpx};
                    width: 512#{rpx};
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

                    .p-info-name {
                        font-size: 32#{rpx};
                        color: #333333;
                    }

                    .p-info-place {
                        padding-top: 6#{rpx};
                        font-size: 24#{rpx};
                        color: #999999;
                        padding-bottom: 24#{rpx};
                    }

                    .p-info-place > text:first-child {
                        padding-right: 24#{rpx};
                    }
                }
            }

            .poster-wt {
                width: 100%;
                padding: 24#{rpx};
                background: #FFFFFF;
                border-radius: 20#{rpx};

                > view {
                    width: 100%;
                }

                .wt-name {
                    margin-top: 16#{rpx};
                    font-size: 28#{rpx};
                    color: #333333;
                    font-weight: bold;
                    margin-bottom: 10#{rpx};
                }

                .wt-read {
                    font-size: 28#{rpx};
                    color: #999999;
                }

                .wt-notice {
                    padding: 2#{rpx} 16#{rpx};
                    color: white;
                    font-size: 24#{rpx};
                    border-radius: 6#{rpx};
                    background: linear-gradient(106deg, #FCC602 0%, rgba(252, 198, 2, 0.75) 100%);
                }

                .wt-pic {
                    margin-top: 20#{rpx};

                    > image {
                        height: 160#{rpx};
                        width: 160#{rpx};
                        display: block;
                        margin-right: 16#{rpx};
                        border-radius: 16#{rpx};
                    }

                    > image:last-child {
                        margin-right: 0;
                    }
                }

                .wt-yellow-text {
                    margin-top: 30#{rpx};
                    color: #FF812D;
                    font-size: 28#{rpx};
                }

                .wt-yellow-icon {
                    height: 35#{rpx};
                    width: 35#{rpx};
                    margin-top: 4#{rpx};
                    margin-bottom: 24#{rpx};
                }

            }

            .p-w {
                border-top: 1px solid rgba(0, 0, 0, 0.1);
                padding-top: 24#{rpx};

                .p-w-icon {
                    height: 124#{rpx};
                    width: 124#{rpx};
                    display: block;
                    margin-right: 24#{rpx};
                }

                .p-w-code {
                    font-size: 28#{rpx};
                    color: #333333;
                }

                .p-w-show {
                    padding-top: 6#{rpx};
                    font-size: 24#{rpx};
                    color: #999999;
                }
            }

            .poster-btn {
                height: 80#{rpx};
                width: 100%;
                color: white;
                font-size: 32#{rpx};
                margin-top: 24#{rpx};
                background: white;
                border-radius: 40#{rpx};
                > view {
                    height: 100%;
                    width: 100%;
                    border-radius: 40#{rpx};
                }
            }
        }
    }

    .share-end {
        position: fixed;
        bottom: 0;
        width: 100vw;
        background: white;
        z-index: 1602;
        transition: all 0.5s ease;
        visibility: hidden;
        opacity: 0;
        overflow: hidden;

        .share-end-info {
            height: 110#{rpx};

            > view {
                width: 50%;
                height: 100%;
            }

            .share-end-line {
                width: 1px;
                height: 40#{rpx};
                background: #cccccc;
            }

            .share-end-icon {
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height: 50#{rpx};
                width: 50#{rpx};
                display: block;
                .hide {
                    height: 60#{rpx};
                    width: 60#{rpx};
                    border: 8#{rpx} solid #FFFFFF;
                    position: absolute;
                    z-index: 10;
                    margin-left: -6#{rpx};
                    top: 22#{rpx};
                }
            }


            .share-wechat {
                background-image: url("./image/c-wechat.png");
            }

            .share-download {
                background-image: url("./image/c-download.png");
            }

            .share-end-text {
                margin-left: 20#{rpx};
                font-size: 28#{rpx};
                color: #333333;
            }
        }
    }

    .share-end.active {
        transition: height 0.5s ease;
        opacity: 1;
        visibility: visible;
        overflow: inherit;
    }
}
</style>