<template>
	<view class="container">
		<view v-if="info.value == 4">
			<web-view :src="info.url"></web-view>
		</view>
		<view class="" v-else>
			<view class="card" v-if="info.value == 1">
				<view class="title">
					<view class="t1">添加客服微信咨询</view>
					<view class="t2">{{ info.wx }}</view>
				</view>
				<view class="content">
					<image class="img" :src="info.qrcode" mode="widthFix" @click="checkQrcode"></image>
				</view>
			</view>
			<view class="card" v-if="info.value == 2">
				<view class="title">
					<view class="t1">添加客服微信咨询</view>
					<view class="t2">{{ info.wx }}</view>
				</view>
				<view class="content">
					<image class="img" :src="info.qrcode" mode="widthFix" @click="checkQrcode"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		commonType
	} from '@/api/me/me.js';
	const info = ref({});
	async function commonTypeAjax() {
		try {
			const Ttype = await commonType(202);
			// "客服配置  1  二维码客服 2 微信公众号客服  3电话客服 4外链 ",
			info.value.value = Ttype.value
			switch (info.value.value) {
				case '1':
					const res1 = await commonType(205);
					const res2 = await commonType(207);
					info.value.wx = res2.value;
					info.value.qrcode = res1.value;
					break;
				case '2':
					console.log('wu')
					break;
				case '3':
					uni.makePhoneCall({
						phoneNumber: uni.getStorageSync('kefuPhone') //仅为示例
					});
					break;
				case '4':
					info.value.url = uni.getStorageSync('kefuPhone')
					break;
			}
		} catch (error) {
			console.log(error);
		}
	}

	// 预览二维码
	function checkQrcode() {
		uni.previewImage({
			urls: [info.value.qrcode]
		});
	}

	onLoad(() => {
		commonTypeAjax();
	});
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
	}

	.container {
		padding: 28upx;
	}

	.card {
		padding: 28upx;
		border-radius: 20upx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.t1 {
				color: #555;
			}
		}

		.content {
			display: flex;
			justify-content: center;
			padding-top: 28upx;

			.img {
				width: 100%;
				display: block;
			}
		}
	}
</style>