<template>
    <div class="page">
        <div class="title">关于我们</div>
        <van-cell-group :border="false">
            <van-cell title="平台简介" is-link :to="{ path: '/introduction' }" />
            <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>
export default {
    data() {
        return {
            codeImg: '',
            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);
                    }
                );
            }
        }
    }
};
</script>

<style lang="less" scoped>
.title {
    background-color: @bg;
    padding: 10px 16px;
    font-size: 20px;
    font-weight: bold;
    color: @text0;
    line-height: 30px;
}
.page {
    background-color: @bg3;
}

.van-cell-group {
    background-color: @bg;
}
.van-cell {
    padding: 23px 16px;
}
.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;
    }
}
</style>
