<template>
    <view class="share-img" @touchmove.prevent>
        <view class="share-img-mask" @touchmove.prevent/>
        <view class="share-img-cont">
            <view v-if="env === 'swan' && hideSwanTopClose" class="share-img-close-wrap">
                <c-icon
                    class="close"
                    name="close-circle"
                    font-size="22px"
                    @tap.stop="onClose"
                />
            </view>
            <template-mars target="swan">
                <view class="share-img-swan-container">
                    <c-image
                        :has-compress="!disableCompress"
                        :src="src"
                        width="37vh"
                        height="auto"
                        mode="widthFix"
                        radius="8px"
                        :extra="{column: 10}"
                        :hack-white-stroke="false"
                        :is-round="false"
                        @tap.stop="onWebSave"
                        @longpress.stop="onWebSave"
                    />
                    <view
                        v-if="saveTips"
                        class="share-img-tips share-img-tips--swan"
                        @tap.stop="onWebSave"
                        @longpress.stop="onWebSave"
                    >
                        <img
                            class="icon"
                            src="https://med-fe.cdn.bcebos.com/act/fission/download.png"
                            alt=""
                        >
                    </view>
                </view>
            </template-mars>
            <template-mars target="h5">
                <view class="share-img-h5-container">
                    <!--                     <img
                        class="share-img-h5"
                        :src="src"
                        :style="{height: height ? height : 'auto'}"
                        :class="{'c-filter-gray': isGray}"
                    > -->
                    <c-image
                        :has-compress="!disableCompress"
                        :src="src"
                        width="37vh"
                        :height="height ? height : 'auto'"
                        mode="widthFix"
                        radius="8px"
                        :extra="{column: 10}"
                        :hack-white-stroke="false"
                        :is-round="false"
                    />
                    <view v-if="saveTips" class="share-img-tips share-img-tips--h5"> 长按保存 </view>
                </view>
            </template-mars>
            <view v-if="env === 'h5'">
                <view class="share-img-text c-font-15 c-gap-top-large c-gap-bottom-large">{{ text }}</view>
                <c-icon
                    class="share-img-close"
                    name="close-circle"
                    font-size="32px"
                    @tap.stop="onClose"
                />
            </view>
            <view v-if="env === 'swan'" class="swan-btn-wrap c-gap-top-large">
                <template v-if="showSwanBtnOpts">
                    <view
                        v-for="(btn, idx) in btnOpts"
                        :key="'btn' + idx"
                        class="c-font-normal"
                        :class="[
                            'share-img-' + btn.type,
                            btn.type === 'close' && 'share-img-hide',
                            idx > 0 && 'c-gap-left',
                        ]"
                        :style="{
                            background: btn.bgColor ? btn.bgColor : btn.type === 'save' ? '#fff' : 'transparent',
                            color: btn.color ? btn.color : btn.type === 'save' ? '#ff6161' : '#fff',
                            border: btn.bgColor
                                ? 'none'
                                : btn.borderColor
                                    ? '1px solid ' + borderColor
                                    : '1px solid #fff',
                        }"
                        @tap="btnOptTag(btn)"
                    >{{ btn.text }}</view>
                </template>
                <template v-else>
                    <view class="share-img-text c-font-15 c-gap-top-large c-gap-bottom-large">{{ text }}</view>
                    <c-icon
                        class="share-img-close"
                        name="close-circle"
                        font-size="32px"
                        @tap.stop="onClose"
                    />
                </template>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 图片分享
 * @author  chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
/* global swan */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from './image';

import {send} from '@utils/log';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CImage
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 图片地址
         */
        src: {
            type: String,
            default: 'https://expertimg.cdn.bcebos.com/expertcms/med/sari_share.jpg'
        },
        /**
         * h5下方文案
         */
        text: {
            type: String,
            default: '长按保存，分享给你关心的人'
        },
        /**
         * 高度
         */
        height: {
            type: String,
            default: ''
        },
        /**
         * 是否置灰
         */
        isGray: {
            type: Boolean,
            default: false
        },
        /**
         * 边框色
         */
        borderColor: {
            type: String,
            default: ''
        },
        /**
         * 按钮
         */
        btnOpts: {
            type: Array,
            default: () => [
                {
                    text: '关闭',
                    type: 'close'
                },
                {
                    text: '保存到相册',
                    type: 'save'
                }
            ]
        },
        /**
         * 隐藏小程序顶部关闭按钮
         */
        hideSwanTopClose: {
            type: Boolean,
            default: true
        },
        /**
         * 展示小程序底部按钮
         */
        showSwanBtnOpts: {
            type: Boolean,
            default: true
        },
        /**
         * 保存提示
         */
        saveTips: {
            type: Boolean,
            default: false
        },
        /**
         * 禁用图片压缩
         */
        disableCompress: {
            type: Boolean,
            default: false
        }
    },
    data() {
        let env = process.env.MARS_ENV;
        return {
            swiperIndex: 0,
            scrollLeft: 0,
            env: env
        };
    },
    methods: {
        onClose() {
            /**
             * 关闭弹窗
             *
             * @event onClose
             */
            this.$emit('close');
        },
        onWebSave() {
            swan.showLoading({
                title: '正在加载...',
                mask: true
            });
            swan.downloadFile({
                url: this.src,
                // header: {
                //     'content-type': 'application/json, image/png'
                // },
                success: res => {
                    swan.hideLoading();
                    console.log(res);
                    let filePath = res.tempFilePath;
                    console.log(filePath);
                    swan.shareFile({
                        filePath: res.tempFilePath,
                        success: res => {
                            send({
                                action: 'share-img'
                            });
                            // swan.showToast({title: '分享成功'});
                            /**
                             * 关闭弹窗
                             *
                             * @event onClose
                             */
                            this.$emit('close');
                        }
                    });
                },
                fail: err => {
                    console.log('错误码：' + err.errCode);
                    console.log('错误信息：' + err.errMsg);
                }
            });
        },
        onSwanSave() {
            swan.authorize({
                scope: 'scope.writePhotosAlbum',
                success: res => {
                    console.log('authorize success', res);
                },
                fail: err => {
                    console.log('authorize fail', err);
                    swan.openSetting({});
                    swan.showToast({
                        title: '授权失败',
                        icon: 'none'
                    });
                }
            });
            swan.downloadFile({
                url: this.src,
                header: {
                    'content-type': 'application/json'
                },
                success: res => {
                    let filePath = res.tempFilePath;
                    swan.saveImageToPhotosAlbum({
                        filePath,
                        success: res => {
                            swan.showToast({
                                title: '已保存到本地相册',
                                icon: 'none'
                            });
                            /**
                             * 关闭弹窗
                             *
                             * @event onClose
                             */
                            this.$emit('close');
                        },
                        fail: err => {
                            swan.showToast({
                                title: '保存失败',
                                icon: 'none'
                            });
                        }
                    });
                },
                fail: err => {
                    console.log('错误码：' + err.errCode);
                    console.log('错误信息：' + err.errMsg);
                }
            });
        },
        hidePoster() {
            /**
             * 关闭弹窗
             *
             * @event onClose
             */
            this.$emit('close');
        },
        btnOptTag(obj) {
            if (obj.type === 'save') {
                this.onSwanSave();
                return;
            }
            if (obj.type === 'close') {
                this.onClose();
                return;
            }
            if (obj.type === 'share') {
                this.onWebSave();
            }
        }
    }
};
</script>
<style lang="less" scoped>
.share-img {
    z-index: 921;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    user-select: none;

    &-tips {
        position: absolute;
        padding: 1.2vw 4.83vw;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3.86vw;
        color: #fff;
        display: flex;
        align-content: center;
        justify-content: center;

        &--swan {
            right: 7.2vw;
            top: 6vw;

            .icon {
                width: 2.898vw;
                height: 3.86vw;
            }
        }

        &--h5 {
            padding: 1.2vw 2.89vw;
            right: 3.1vw;
            top: 6.2vw;
            font-size: 4vw;
        }
    }

    &-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
    }

    &-cont {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: calc(50% - 4vh);
    }

    &-h5,
    &-swan {
        width: 37vh;
        height: 66vh;
        border-radius: 8px;

        &-container {
            position: relative;
        }
    }

    &-text {
        color: #fff;
    }

    &-close {
        color: #fff;
    }

    &-hide {
        border-radius: 19px;
        padding: 6px 36px;
    }

    &-save,
    &-share {
        border-radius: 19px;
        padding: 6px 36px;
    }

    &-close-wrap {
        position: relative;
        width: 37vh;
        height: 22px;

        .close {
            position: absolute;
            right: 0;
            top: -8px;
            color: #999;
        }
    }
}

.swan-btn-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
}
</style>
