<template>
	<view class="wechatLogin" v-if="flag">
		<view class="topImg" v-if="meetingInfo.image">
			<image :src="meetingInfo.image" style="width:100%;height:100%"/>
		</view>
		<view class="main">
			<view class="title tn-text-2xl tn-text-bold tn-text-center tn-mt-lg tn-ml-sm tn-mr-sm tn-pb tn-border-bottom tn-grey-light_border">
				{{meetingInfo.title}}
			</view>

			<view class="info tn-m">
				<view class="option" v-if="meetingInfo.meeting_time">
					<view class="time tn-flex tn-text-bold tn-text-lg">
						<view class="icon tn-text-2xl">
							<TnIcon name="time-fill" color="#19be6b"></TnIcon>
						</view>
						<view class="tn-flex tn-flex-center tn-pl-xs">
							会议时间
						</view>
					</view>
					<view class="text tn-p-sm tn-pl-xl">
						{{meetingInfo.meeting_time}}
					</view>
				</view>
				<view class="option">
					<view class="address tn-flex tn-text-bold tn-text-lg">
						<view class="icon tn-text-2xl">
							<TnIcon name="map-fill" color="#ff9900"></TnIcon>
						</view>
						<view class="tn-flex tn-flex-center tn-pl-xs">
							会议地点
						</view>
					</view>

					<view class="text tn-p-sm tn-pl-xl">
						{{meetingInfo.room}}
					</view>
					<view class="map">
						<map :latitude="meetingInfo.latitude" :longitude="meetingInfo.longitude" :scale="14" :markers="markers" @tap="showMap" style="width: 100%;"></map>
					</view>
				</view>
			</view>

			<view class="content tn-m">
				<view class="label tn-flex tn-text-bold tn-text-lg">
					<view class="icon tn-text-2xl">
						<TnIcon name="tip-fill" color="#2979ff"></TnIcon>
					</view>	
					<view class="tn-flex tn-flex-center tn-pl-xs">
						会议详情
					</view>
				</view>
				<view class="text tn-text">
					<TnReadMore :height="350" expand-text="详情">
						<mp-html :content="htmlNodes"></mp-html>
					</TnReadMore>
				</view>
			</view>
			
			<view class="btns tn-pb-xl">
				<view v-if="!storeUser.openid" @click="getWechatCode" class="tn-radius tn-text-center tn-p-sm tn-type-primary_bg">授权登录</view>
				<view  class="buttons">
					<view v-if="storeUser.openid && isEntryTime && !hasEntry"  class="tn-radius tn-text-center tn-p-sm tn-type-success_bg" @click="openModal">{{meetingInfo.mode === 0?'报名参会':'会议签到'}}</view>
					<view v-if="storeUser.openid && isSignTime && hasEntry"  @click="signIn" class="tn-radius tn-text-center tn-p-sm tn-type-warning_bg">{{signInfo.isSign === 1?'查看签到信息':'会议签到'}}</view>
				</view>
			</view>
		</view>

		<TnModal ref="modalRef" />
		
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref,  } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import TnReadMore from '@/uni_modules/tuniaoui-vue3/components/read-more/src/read-more.vue'
	import TnModal from '@/uni_modules/tuniaoui-vue3/components/modal/src/modal.vue'
	import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3/components/modal'
	
	const modalRef = ref<TnModalInstance>()	
	
	const meetingId = ref()
	
	const htmlNodes = ref()
	
	const flag = ref(false)
	
	const isEntryTime = ref(false)
	
	const isSignTime = ref(false)
	
	const hasEntry = ref(false)
	
	const storeUser = reactive<{
		openid?:string
	}>({})
	
	const appid = ref()
	
	const dateNow = ref<number>()
	
	const signInfo = reactive<{
		isSign?:number
	}>({})
	
	const markers = ref([{
	    latitude: '',
	    longitude: '',
	    title: '',
	    iconPath: '/static/location.png',
		width:40,
		height:40
	}])
	
	const meetingInfo = reactive<{
		title?:string,
		room?:string,
		image?:string,
		mode?:string,
		sign_time?:string,
		entry_time?:string,
		meeting_time?:string,
		latitude?:string,
		longitude?:string
	}>({})
	
	const openModal = () => {
	  modalRef.value?.showModal({
	    title: '操作提示',
	    content: meetingInfo.mode == '0'?'确定参会':'确定签到',
	    showCancel: true,
	    confirmText: '确定',
	    cancelText: '取消',
		cancel: () => {
			console.log('点击了取消按钮')
		},
		confirm: () => {
		    entry()
		},
	  })
	}
	
	const getTime = () => {
		let time = new Date().getTime()
		dateNow.value = time
	}
	
	const getMeetingInfo = (id:number) =>{
		request({
			url:'/sign/meeting/'+id,
			method:'GET'
		}).then((res)=>{
			meetingInfo.title = res.data.data.title
			meetingInfo.room = markers.value[0].title = res.data.data.room
			meetingInfo.image = res.data.data.image
			meetingInfo.mode = res.data.data.mode
			meetingInfo.sign_time = res.data.data.sign_time
			meetingInfo.entry_time = res.data.data.entry_time
			meetingInfo.meeting_time = res.data.data.meeting_time
			meetingInfo.latitude = markers.value[0].latitude = res.data.data.location[0]
			meetingInfo.longitude = markers.value[0].longitude = res.data.data.location[1]
			if(res.data.data.content!=null){
				let htmlString = res.data.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"width:100%;height:auto\"");
				htmlNodes.value = htmlString
			}
			isEntry(JSON.parse(res.data.data.entry_time))
			isSign(JSON.parse(res.data.data.sign_time))
			flag.value = true
			uni.setNavigationBarTitle({title:res.data.data.title})
		})
	}
	
	const isWechat = () => {
		return String(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	
	const isEntry = (timeArr:any) => {
		if(!timeArr || timeArr === ''){
			isEntryTime.value = true
		}else{
			isEntryTime.value = dateNow.value >= Date.parse(timeArr[0]) && dateNow.value <= Date.parse(timeArr[1])
		}
	}
	
	const isSign = (timeArr:any) => {
		isSignTime.value = dateNow.value >= Date.parse(timeArr[0]) && dateNow.value <= Date.parse(timeArr[1])
	}
	
	//获取appid
	const getAppid = () =>{
		request({
			url:'/front/wechat/setting',
			method:'GET'
		}).then((res:any)=>{
			appid.value = res.data.data
			// appid.value = 'wx31fc3f85a64bc26f'
		})
	}
	//通过code获取微信信息
	const getUserInfo = (code:string) => {
		request({
			url:'/postCode',
			method:'POST',
			data:{code:code}
		}).then(res=>{
			if (res.statusCode != 200){
				uni.showToast({
					title:'出错了！',
					duration:3000,
					icon:'none'
				})
			}else{
				afterLogin(res)
			}
		})
	}
	
	//保存微信信息
	const afterLogin = (res:any) =>{
		let user = {
			avatar:res.data.headimgurl,
			nickname:res.data.nickname,
			openid:res.data.openid
		}
		uni.setStorageSync('user',user)
		request({
			url: '/sign/check/register',
			method:'GET',
			data:{'openid':res.data.openid}
		}).then(result=>{
			if(result.data.code === 1){
				uni.navigateTo({
					url:'/pages/attendance/register?id=' + meetingId.value
				})
			}else{
				uni.reLaunch({
					url:'/pages/attendance/index?id=' + meetingId.value
				})
			}
		})
	}
	
	//获取code
	const getUrlCode = (name:string) =>{
		return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,''])[1].replace(/\+/g,'%20'))||null
	}
	//检查code
	const checkWechatCode = () =>{
		let code = getUrlCode('code');
		if (code) {
			getUserInfo(code)
		}
	}
	
	const getSignInfo = (meetingId:number) => {
		request({
			url: '/sign/signUser',
			method:"GET",
			data:{meetingId:meetingId,openid:storeUser.openid}
		}).then(res=>{
			if(res.data.code === 0){
				hasEntry.value = true
				Object.assign(signInfo,res.data.data) 
			}else{
				console.log('没有报名')
			}
		})
	}
	
	//跳转获取code
	const getWechatCode = () =>{
		let local = encodeURI(window.location.href);
		window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
		+ appid.value +
		'&redirect_uri='
		+ local +
		'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
	}
	
	const entry = () =>{
		let data = {
	        mode:meetingInfo.mode,
	        openid:storeUser.openid,
	        meetingId:meetingId.value
	    }
		request({
			url:'/sign/check/entry',
			method:'POST',
			data:data
		}).then( exist => {
			if(exist.data.code === 1){
				request({
					url:'/sign/entry',
					method:'POST',
					data:data
				}).then( res => {
					uni.showToast({
						title:res.data.message,
						icon:'none'
					})
					if(res.data.code === 0){
						uni.navigateTo({
							url:'/pages/attendance/entry_success?id='+meetingId.value
						})
					}
				})
			}else{
				uni.navigateTo({
					url:'/pages/attendance/entry_success?id='+meetingId.value
				})
			}
		})
	}
	
	const signIn = () =>{
		let data = {openid:storeUser.openid,meetingId:meetingId.value}
		request({
			url: '/sign/check/sign',
			method:'POST',
			data:data
		}).then( exist => {
			if(exist.data.code === 1){
				request({
					url: '/sign/sign',
					method:'POST',
					data:data
				}).then( res => {
					uni.showToast({
						title:res.data.message,
						icon:'none'
					})
					uni.navigateTo({
						url:'/pages/attendance/success?id=' + meetingId.value
					})
				})
			}else{
				uni.showToast({
					title:"您已经签过到了",
					icon:'none',
					success: () => {
						uni.navigateTo({
							url:'/pages/attendance/success?id=' + meetingId.value
						})
					}
				})
			}
		})
	}
	
	const showMap = () => {
		uni.openLocation({
			latitude: parseFloat(meetingInfo.latitude),
			longitude: parseFloat(meetingInfo.longitude),
			name:meetingInfo.title,
			address:meetingInfo.room,
			success: function () {
				console.log('success');
			}
		});
	}
	
	const getStoreUser = () =>{
		Object.assign(storeUser,uni.getStorageSync('user'))
	}
	
	onMounted(()=>{
		getMeetingInfo(meetingId.value)
		getTime()
	})
	
	onLoad((options)=>{
		meetingId.value = options.id
		if (isWechat()) {
			getStoreUser()
			if(!storeUser.openid){
				getAppid()
				checkWechatCode()
			}else{
				getSignInfo(options.id)
			}
		}else{
			uni.navigateTo({
				url:'/pages/attendance/error'
			})
		}
	})
	
</script>

<style lang="scss">
	.wechatLogin{
		background-color: #f5f5f5;
		height: 100vh;
		position: relative;
		.topImg{
			width: 100%;
			height: 380rpx;
		}
		.main{
			position: absolute;
			top: 340rpx;
			width: 100%;
			background-color: #fff;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
		}
		.info{
			.option{
				.map{
					width: 100%;
				}
			}
		}
		
		.btns{
			width: 60%;
			margin: auto;
		}
	}
</style>
