<template>
    <view>
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="doctorWrap" :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx);'">
            <view :style="notilte_style"></view>
            <view class="card">
                <view :style="card_inner_style">
                    <view class="tocenter hospital">
                        {{ userData.hospDesc }}
                    </view>
                    <view class="tocenter userinfo">
                        <text>{{ userData.userName }}</text>
                        <text class="septalline">|</text>
                        <text>{{ userData.locDesc }}</text>
                        <text class="septalline">|</text>
                        <text>{{ userData.groupDesc }}</text>
                    </view>
                    <view class="tocenter qrcode">
                        <image mode="aspectFit" class="doccard" :src="imgsrc" show-menu-by-longpress></image>
                        <canvas style="width: 220px; height: 220px" canvas-id="canvas" id="canvas" class="canvas"></canvas>
                    </view>
                    <view class="tocenter tips">使用微信扫一扫，关注医生</view>
                    <view class="tocenter tips">长按二维码分享给好友</view>
                </view>
                <view class="usericon">
                    <image class="icon" :src="userData.image"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import navBar from '@/pages/components/navbar/index';
// pages/tabBar/personalcenter/doctorCard/doctorCard.js
//医生名片
import { $http } from '../../../../config/https.js';
import { httpconfig as httpConfig } from '../../../../config/httpConfig.js';
import drawQrcode from '../../../../utils/weapp.qrcode.js';
const app = getApp();
console.log(httpConfig);
let card_inner_style =
    `
position: absolute;
top: -10rpx;
text-align: center;
width: 100%;
font-size: 38rpx;
background: url(` +
    httpConfig.imgDomain +
    `/images/icon/doctor/cardback.png) no-repeat;
background-size: 100% 100%;
height: 1000rpx;
`;
let notilte_style =
    `
  text-align: center;
  color: #666;
  width: 100%;
  background: url(` +
    httpConfig.imgDomain +
    `/images/icon/doctor/cardtitle.png) no-repeat;
  height: 180rpx;
  background-size: 100% 100%;`;
export default {
    components: {
        navBar
    },
    data() {
        return {
            card_inner_style: card_inner_style,
            notilte_style: notilte_style,
            userData: {
                hospDesc: '',
                userName: '',
                locDesc: '',
                groupDesc: '',
                image: ''
            },
            imgsrc: '',
            userimg: '',
            navbarData: {
                background: '',
                title: '我的名片',
                //导航栏 中间的标题
                height: '100',
                bottom: true,
                isGoBack: true,
                cleanPat: 'Y'
            },
            height: app.globalData.height
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        const userData = Cache.get('userData');
        this.setData({
            userData: userData
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getDataUrl();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        canvasToBase64: function (callback) {},

        getDataUrl: function () {
            const userData = Cache.get('userData');
            let that = this;
            var accountInfo = typeof uni.getAccountInfoSync === 'function' ? uni.getAccountInfoSync() : { miniProgram: { appId: '' } };
            var appID = accountInfo.miniProgram.appId;
            // let data = {
            //     params: [
            //         {
            //             doctorID: userData.userID,
            //             locID: userData.locID,
            //             hospCode: userData.hospCode,
            //             appID: appID
            //         }
            //     ]
            // };
            that.drawImage(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa050d2f47895b9f8&redirect_uri=https%3A%2F%2Fhlwyy.scsmysgkyy.cn%2Fpatientapp%2Fpages%2Findex%2Fpages%2FdoctorInfo%2FdoctorInfo%3FhospCode%3D${userData.hospCode}%26locID%3D${userData.locID}%26doctorID%3D${userData.userID}&response_type=code&scope=snsapi_base&state=MYGKHLWYYH5#wechat_redirect`);
            // $http.post('urlDeault', that, {
            //     code: '03100087',
            //     data: data,
            //     success: function (res) {
            //         if (res.errorCode == '0') {
            //             that.drawImage(res.result.url);
            //         }
            //     }
            // });
        },

        drawImage: function (url) {
            const userData = Cache.get('userData');
            let that = this;
            drawQrcode({
                x: 10,
                y: 10,
                width: 200,
                height: 200,
                canvasId: 'canvas',
                text: url,
                image: {
                    imageResource: userData.image,
                    dx: 80,
                    dy: 80,
                    dWidth: 60,
                    dHeight: 60
                },
                callback: function (e) {
                    uni.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        canvasId: 'canvas',
                        success: function (res) {
                            that.setData({
                                imgsrc: res.tempFilePath
                            });
                        },
                        fail: function (res) {}
                    });
                }
            });
        }
    }
};
</script>
<style>
/* pages/tabBar/personalcenter/doctorCard/doctorCard.wxss */

page {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.doctorWrap {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    background-color: #fff;
}

.card {
    width: 80%;
    position: relative;
    top: -60rpx;
}

.introduce {
    height: 140rpx;
    width: calc(100% - 40rpx);
    padding: 20rpx;
}

.hospital {
    padding-top: 100rpx;
    padding-bottom: 20rpx;
    font-weight: 500;
    text-shadow: 1px 1px 1px #ccc;
}

.userinfo {
    font-size: 32rpx;
}

.usericon {
    width: 100%;
    position: absolute;
    top: -80rpx;
    text-align: center;
}

.icon {
    height: 170rpx;
    width: 170rpx;
    border-radius: 50%;
    margin: 0 auto;
    background: #e3e4fc;
}

.username {
    text-align: right;
    font-weight: bold;
    float: left;
}

.locdesc {
    text-align: center;
    color: #999;
    float: left;
}

.grouddesc {
    text-align: left;
    color: #999;
    float: left;
}

.canvas {
    height: 220px;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1000px;
}

.doccard {
    height: 220px;
    width: 220px;
}

.tocenter {
    margin: 0 auto;
}

.qrcode {
    height: 280px;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 60rpx;
    padding-top: 60rpx;
}

.tips {
    font-size: 34rpx;
    color: #666666;
}

.btn {
    width: 70%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #0079fe;
    margin-left: auto;
    margin-right: auto;
    border-radius: 70px;
    margin-top: 10px;
}

.septalline {
    color: #cccccc;
    font-size: 22rpx;
    padding-left: 15rpx;
    padding-right: 15rpx;
    position: relative;
    top: -4rpx;
}
</style>
