<template>
    <view class="about">
        <view class="content">
            <view class="qrcode">
                <image src="@/static/logo.png" @longtap="save"></image>
                <text class="tip">{{userinfo.username}}</text>
            </view>
            <view class="desc">
                欢迎登陆使用本系统（APP），如果您在使用过程中遇到问题，欢迎您及时向我们反馈，我们将第一时间响应，并及时根据情况进行优化或升级。
            </view>
            <view class="source">
                <view class="title">软件系统：</view>
                <view class="source-list">
                    <view class="source-cell">
                        <text space="nbsp">1. </text>
                        <text>
                            <text class="code">应用版本</text> ： {{config.version}}
                        </text>
                    </view>
                    <view class="source-cell">
                        <text space="nbsp">2. </text>
                        <text>
                            <text class="code">运营主体</text> ：{{config.poweredBy}}
                        </text>
                    </view>
                    <view class="source-cell">
                        <text space="nbsp">3. </text>
                        <text>
                            <text class="code">技术支持</text> ：{{config.supportedBy}}
                        </text>
                    </view>
                    <view class="source-cell">
                        <text space="nbsp">4. </text>
                        <text>
                            感谢 {{thanks}} 等公司/平台提供的云服务器、开发文档等支持。
                        </text>
                    </view>
                </view>
            </view>
            <view class="source">
                <view class="title">隐私安全：</view>
                <view class="source-list">
                    <view class="source-cell">
                        <text space="nbsp">1. </text>
                        <text>
                            <text class="code">用户服务协议</text> ：
                            <text @click="xieyi('fuwu')">
                                >>>点击查看
                            </text>

                        </text>
                    </view>

                    <view class="source-cell">
                        <text space="nbsp">2. </text>
                        <text>
                            <text class="code">隐私条款协议</text> ：
                            <text @click="xieyi('yinsi')">
                                >>>点击查看
                            </text>

                        </text>
                    </view>

                </view>
            </view>
            <view class="source">
                <view class="title">数据空间：</view>
                <view class="source-list">
                    <view class="source-cell">
                        <text space="nbsp">1. </text>
                        <text>
                            <text class="code">缓存大小</text> ： {{cacheSize}}
                            <button type="default" @click="clearCache">清除缓存</button>
                        </text>
                    </view>
                </view>
            </view>
            <!-- #ifdef APP-PLUS -->
            <button type="primary" @click="share">分享</button>
            <!-- #endif -->
        </view>
        <!-- #ifdef APP-PLUS -->
        <view class="version">
            当前版本：{{version}}
        </view>
        <!-- #endif -->
    </view>

</template>

<script>
    import config from "@/config/ctms.config.js";
    import utils from "@/utils/common.js";
    import ctms from '@/apis/ctms/index.js';

    export default {
        data() {
            return {
                userinfo: {},
                version: config.version,
                thanks: '',
                cacheSize: '计算中',
            }
        },
        onLoad() {
            this.userinfo = ctms.user.getInfo();
            var configApp = getApp().globalData.config;
            //使用扩展运算符合并对象
            var _cfg = {
                ...configApp,
                ...config
            };
            this.config = _cfg;
            this.thanks = _cfg.thanksFor.join(' , ');
        },
        onShow() {
            var size = ctms.cache.size();
            var m = size.m,
                kb = size.kb;
            this.cacheSize = '';
            if (m > 0) this.cacheSize += m + ' M ';
            this.cacheSize += kb + ' KB ';
        },

        methods: {
            clearCache() {
                var res = ctms.cache.clear();
                if (res) {
                    uni.showToast({
                        title: '已清除,请刷新页面',
                        icon: "success"
                    })
                }
            },
            // #ifdef APP-PLUS
            save() {
                uni.showActionSheet({
                    itemList: ['保存图片到相册'],
                    success: () => {
                        plus.gallery.save(
                            'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png',
                            function() {
                                uni.showToast({
                                    title: '保存成功',
                                    icon: 'none'
                                });
                            },
                            function() {
                                uni.showToast({
                                    title: '保存失败，请重试！',
                                    icon: 'none'
                                });
                            });
                    }
                });
            },
            share(e) {
                plus.share.sendWithSystem();
                uni.shareWithSystem({
                    summary: "安邮车联运车平台，一个专门服务于汽车托运的系统，致力于推动轿运市场标准化、现代化发展。",
                    href: "http://ctms.hiluker.cn",
                    success() {
                        // 分享完成，请注意此时不一定是成功分享
                    },
                    fail() {
                        // 分享失败
                    }
                })
            },
            // #endif

            goTo(page) {
                page = config.pageDir + page;
                uni.navigateTo({
                    url: page
                });
            },

            xieyi(op) {
                var url;
                switch (op) {
                    case 'fuwu':
                        url = this.config.about.agreements.serviceUrl;
                        break;
                    case 'yinsi':
                        url = this.config.about.agreements.privacyUrl;
                        break;
                }
                uni.navigateTo({
                    url: '/pages/common/webview/index?url=' + url
                })
            }
        }
    }
</script>

<style>
    page,
    view {
        display: flex;
    }

    page {
        min-height: 100%;
        background-color: #FFFFFF;
    }

    image {
        width: 360rpx;
        height: 360rpx;
    }

    .about {
        flex-direction: column;
        flex: 1;
    }

    .content {
        flex: 1;
        padding: 30rpx;
        flex-direction: column;
        justify-content: center;
    }

    .qrcode {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .qrcode .tip {
        margin-top: 20rpx;
    }

    .desc {
        margin-top: 30rpx;
        display: block;
    }

    .code {
        color: #e96900;
        background-color: #f8f8f8;
    }

    button {
        width: 100%;
        margin-top: 40rpx;
    }

    .version {
        height: 80rpx;
        line-height: 80rpx;
        justify-content: center;
        color: #ccc;
    }

    .source {
        margin-top: 30rpx;
        flex-direction: column;
    }

    .source-list {
        flex-direction: column;
    }

    .link {
        color: #007AFF;
    }
</style>