<template>
    <div class="page">
        <div class="logo">
            <van-image @click="showConsoleEve" width="89" height="89" :src="require('@assets/ic_launcher.png')" radius="20" />
            <div class="text1">拉索宇宙</div>
            <div class="text2">v 1.0.0</div>
        </div>
        <!-- <div class="title">关于我们</div> -->
        <van-cell-group :border="false">
            <!-- <van-cell title="平台简介" is-link :to="{ path: '/introduction' }" /> -->
            <!-- <van-cell title="了解更多" is-link :to="{ path: '/question' }" /> -->
            <van-cell
                title="用户协议"
                is-link
                :to="{
                    path: '/agreement',
                    query: {
                        page: 'service'
                    }
                }"
                :border="false"
            />
            <van-cell title="隐私政策" is-link :to="{ path: '/agreement' }" :border="false" />
            <!-- <van-cell title="联系客服" @click="show = true" is-link /> -->
        </van-cell-group>

        <van-overlay :show="show" @click="show = false">
            <div class="code-img" @click.stop>
                <van-image class="code" width="70vw" :src="codeImg" fit="scale-down" />

                <van-button class="save" @click="save" type="primary" round>点击保存图片</van-button>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import eruda from 'eruda';
export default {
    data() {
        return {
            codeImg: '',
            clickNum: 0,
            show: false
        };
    },
    mounted() {
        this.$http.get('/sysConfig/get/customer_group').then(res => {
            this.getImgBase64(res.value, 'codeImg');
        });
    },
    methods: {
        getImgBase64(img2, key) {
            let img = new Image();
            img.crossOrigin = 'anonymous';
            let _this = this;
            img.onload = function () {
                let src = _this.image2Base64(img);
                _this[key] = src;
            };
            img.src = img2;
        },
        image2Base64(img) {
            let canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let dataURL = canvas.toDataURL('image/png');
            return dataURL;
        },
        save() {
            if (window.cordova) {
                let _this = this;
                imageSaver.saveBase64Image(
                    { data: this.codeImg },
                    function (filePath) {
                        _this.$toast('图片已保存至文件夹');
                        _this.show = false;
                        console.log('File saved on ' + filePath);
                    },
                    function (msg) {
                        _this.$toast(msg);
                    }
                );
            }
        },
        showConsoleEve(){
            this.clickNum++;
            if (this.clickNum >= 10) {
                localStorage.setItem('showConsole', new Date().getTime() + 60 * 60 * 1000);
                eruda.init();
                this.clickNum = 0;

                this.$store.commit('setShowConsole', true);
                return;
            } else {
                if (this.timeout) {
                    clearTimeout(this.timeout);
                }
                this.timeout = setTimeout(() => {
                    this.clickNum = 0;
                }, 1000);
            }
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background-color: @bg;
    padding: 16px;
    padding-top: 24px;
}

.van-cell {
    padding: 23px 16px;
    background-color: @bg2;
    border-radius: 12px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
}
.van-cell + .van-cell {
    margin-top: 10px;
}
.logout {
    padding: 50px 30px 50px;
}
.code-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .flex-col();
    align-items: center;

    .save {
        margin-top: 30px;
    }
}

.logo {
    .flex-col();
    align-items: center;

    .van-image {
        border: 1px solid rgba(234, 204, 155, 1);
    }

    .text1 {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        line-height: 26px;
        margin-top: 16px;
    }

    .text2 {
        font-size: 14px;
        color: #ffffff;
        opacity: 0.5;
        line-height: 20px;
        margin-top: 6px;
        margin-bottom: 34px;
    }
}
</style>
