<template>
	<view class="bg-max bg-gray" style="background: #ffffff;height: 100vh">
		<van-sticky>
			<view class="justify-center bg-white sh pd-px-20 mg-b-20" >
				<van-icon class="top-left" name="arrow-left" @tap="goBack" />
				<view class="top-center" >店铺名片</view>
			</view>
		</van-sticky>
		<view  id="aa"  style="position: absolute;margin: 20rpx 30rpx;top: -99999px" v-if="!state.temIMg" >
			<van-image   src="../../static/img/dz/info-bg.png"/>
			<view  style="position: absolute; left: 50%;top: 50%;transform: translate(-50%, -50%);">
				<view style="text-align: center">
					<img crossOrigin='anonymous' style="border-radius: 50%;border: 2rpx solid #DDDDDD;width: 140rpx;height: 140rpx"  radius="20rpx" :src="state.useInfo.headImg+'?t='+new Date().getTime()"
					/>
					<view style="font-size: 34rpx;font-weight: bold;margin-top: 20rpx">{{state.useInfo.storeName}}</view>
				</view>
				<view class="e-card">
					<van-row  class="pd-h-px-10">
						<van-col span="2" >
							<van-icon name="phone-o" />
						</van-col>
						<van-col span="18" style="text-align: left;font-size: 26rpx;">
							{{state.useInfo.contactPhone}}
						</van-col>
					</van-row>
					<van-row  class="pd-h-px-10" style="margin-top: 10rpx">
						<van-col span="2" >
							<van-icon name="location-o" />
						</van-col>
						<van-col span="22" style="text-align: left;font-size: 26rpx;font-weight: 400">
							{{state.useInfo.areaAddress}}
						</van-col>
					</van-row>
					<van-row class="e-logo" >
						<img crossOrigin='anonymous' style="width: 300rpx;height: 300rpx"
						     :src="state.useInfo.appletCode+'?t='+new Date().getTime()" />
					</van-row>
				</view>
				<view class="e-text">
					长按或扫码进入小程序商城
				</view>
			</view>
		</view>
		<view style="margin: 20rpx 30rpx" v-else>
			<img crossOrigin='anonymous' :src="state.temIMg" alt="" style="width: 100%">
		</view>

	</view>
</template>

<script setup lang="ts">
    import api from "@/api";
    import {  reactive ,onMounted} from 'vue';
    const state = reactive({
        temIMg:'',
        useInfo:{},
    })
    import html2Canvas from "html2canvas"
    import { PageUtils } from '@/utils/utils';
    function goBack() {
        PageUtils.goBack()
    }
    onMounted(()=>{
        getStoreInfo()
    })
    function getStoreInfo() {
        api.storeInfo({ link: uni.getStorageSync("subdomain") }).then(res=>{
            state.useInfo=res
        })
        drawBg()

    }
    // 再画卡片
    function drawBg() {
        // 等待1s画完卡片
        setTimeout(() => {

            const cardDom = document.getElementById("aa")
            if (!cardDom) return
            html2Canvas(cardDom, { useCORS: true }).then(canvas => {
                state.temIMg=canvas.toDataURL("image/png")
            })
        }, 500);
    }
</script>

<style lang="scss" scoped>
	.e-logo {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		text-align: center;
		width: 500rpx;
	}
	.e-text{
		margin-top: 40rpx;
		height: 24rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #606266;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
	}
	.e-card{
		margin-top: 50rpx;
		padding: 30rpx 20rpx;
		width: 500rpx;
		height: 586rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 24rpx 4rpx rgba(0,0,0,0.06);
		border-radius: 16rpx;
	}
	.card{
		background: #ffffff;
		height: 400rpx;
		width: 100%;
	}
</style>