<template>
	<view class="container">
		<!-- <view class="title-back">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<view style="font-size: 30rpx;">机构邀请</view>
			</view>
		</view> -->
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<view style="font-size: 30rpx;">机构邀请</view>
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 30}px`}"></view>
		<view
			style="width: 100%;margin-top: 190rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;"
			v-if="!hulijigouArray.length">
			<image style="height: 250rpx;width: 350rpx;"
				src="https://www.focusnu.com/media/directive/index/yuangongyaoqing.png" />
			<view style="color: #8E96AD;margin-top: 20rpx;">
				暂无邀请信息
			</view>
		</view>
		<view style="width: 100%;display: flex;flex-wrap: wrap;">
			<view v-for="(item,index) in hulijigouArray" :key="index" class="zhiling-box-card" :style="{
				    border: hulitarget === index ? '4rpx solid #0093FF' : 'none',
				    height: item.applyStatus == 1 ? '370rpx' : '330rpx'
				  }" style="margin-top: 30rpx;position: relative;width: 92%;flex-direction: column;">
				<view class="card-font">

					{{item.departName}}
				</view>
				<view class="gray-font">
					<image style="margin-left: 10rpx;height: 25rpx;width: 25rpx;margin-right: 10rpx;"
						src="https://www.focusnu.com/media/directive/index/ruzhu/man.png" />
					{{ item.comLegalPerson }} |
					<image style="margin-left: 10rpx;height: 25rpx;width: 25rpx;margin-right: 10rpx;"
						src="https://www.focusnu.com/media/directive/index/ruzhu/phone.png" />
					{{ item.tel }}
				</view>
				<view class="applying" v-if="item.applyStatus===`1`">
					待确认
				</view>
				<view class="applysuccess" v-if="item.applyStatus===`2`">
					已接受
				</view>
				<view class="applyfail" v-if="item.applyStatus===`3`">
					已拒接
				</view>

				<view class="gray-bgc">
					<image class="gray-img" src="https://www.focusnu.com/media/directive/index/ditu/bgc.png" />

					<view style="color: #999999;z-index: 1;font-size: 27rpx;width: 100%;">
						<image style="margin-left: 10rpx;height: 30rpx;width: 25rpx;margin-right: 10rpx;z-index: 1;"
							src="https://www.focusnu.com/media/directive/index/ditu/mark.png" />
						{{item.comRegisterAddress}}
					</view>
				</view>
				<view style="display: flex;justify-content: center;width: 100%;" v-if="item.applyStatus===`1`">
					<view class="blue-button" @click="changeStatus(item,true)">
						接受
					</view>
					<view class="white-button" @click="changeStatus(item,false)">
						拒绝
					</view>
				</view>

			</view>

		</view>
		<!-- 处理margin重叠 -->
		<view style="height: 200rpx;">

		</view>
		<queren :show="querenshow" @close="querenshow=false" @ok="querensecond" />
	</view>
</template>

<script setup lang="ts">
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	import { getInvited, invitedConfirm } from './api.js'
	import queren from './queren.vue'



	const hulijigouArray = ref([])
	const hulitarget = ref(-1)
	const popupshow = ref(false);
	const supervalue = ref("");
	const querenshow = ref(false);
	const buttonOpen = ref(false);
	const clearvalue = () => {
		hulitarget.value = -1;
		supervalue.value = ""
	}

	const goBack = () => {
		uni.navigateBack()
	}

	const search = () => {
		buttonOpen.value = false;
		hulitarget.value = -1;

		getInvited(uni.getStorageSync('openid')).then((res : any) => {
			if (res.success) {
				hulijigouArray.value = res.result
			}
		})
	}
	const sumbit = ref(false);
	const saveitem = ref({
		employeesId: "",
		orgCode: ""
	})

	const changeStatus = (item, status) => {
		if (!status) {
			querenshow.value = true;
			saveitem.value = {
				employeesId: item.employeesId,
				orgCode: item.orgCode
			}
			return
		}
		let data = {
			employeeId: item.employeesId,
			status: status ? 2 : 3,
			orgCode: item.orgCode
		}
		invitedConfirm(data).then(res => {
			if (res.success) {
				search()
			}
		})
	}

	const querensecond = () => {
		querenshow.value = false;
		let data = {
			employeeId: saveitem.value.employeesId,
			status: 3,
			orgCode: saveitem.value.orgCode
		}
		invitedConfirm(data).then(res => {
			if (res.success) {
				search()
			}
		})
	}

	search()
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: #F7F7F7;
		position: relative;
	}

	.title-back {
		background-color: #F7F7F7;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #cbd1d2;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.left-father {
		display: flex;
		align-items: center;

		.back-img {
			width: 45rpx;
			height: 40rpx;
			margin-left: 40rpx;
			margin-right: 15rpx;
		}
	}

	.zhiling-box {
		display: flex;
		justify-content: space-around;
		align-items: center;

		width: 92%;
		margin-left: 4%;
		height: 110rpx;
		background-color: #fff;
		border-radius: 35rpx;
		font-size: 32rpx;
		border: 4rpx solid #fff;
	}



	.input-all {
		width: 500rpx;
		height: 65rpx;
		border-radius: 30rpx;
		background-color: #F7F7F7;
		padding-left: 80rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.popop-father {
		width: 100%;
		height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.popop-font {
		margin-top: 40rpx;
		width: 70%;
		text-align: center;
		line-height: 40rpx;
		font-size: 30rpx;
		margin-bottom: 100rpx;
	}

	.popop-blue {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 35rpx;
		background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
					border: 2rpx solid #9AD1FF;
					color: #007CFF;
		font-size: 33rpx;
		margin-bottom: 30rpx;
	}

	.button-father {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #fff;
	}

	.blue-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 60rpx;
		margin: 0 30rpx;
		// margin: 0rpx auto;
		// margin-bottom: 80rpx;
		// margin-top: 20rpx;
		margin-top: 10rpx;
		background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
					border: 2rpx solid #9AD1FF;
					color: #007CFF;
		border-radius: 25rpx;
		font-size: 30rpx;
	}

	.white-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 60rpx;
		margin: 0 30rpx;
		margin-top: 10rpx;
		// color: #fff;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		border-radius: 25rpx;
		font-size: 30rpx;
	}

	.zhiling-box-card {
		display: flex;
		width: 92%;
		margin-left: 4%;
		// height: 190rpx;
		background-color: #fff;
		border-radius: 35rpx;
		font-size: 32rpx;
		border: 4rpx solid #fff;
		overflow: hidden;
	}



	.applying {
		position: absolute;
		right: 20rpx;
		top: 0rpx;
		background-color: #FFE8D3;
		color: #FF7900;
		width: 130rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-left: 35rpx;
		margin-top: 25rpx;
	}

	.applysuccess {
		position: absolute;
		right: 20rpx;
		top: 0rpx;
		background-color: #DEF1FF;
		color: #0093FF;
		width: 130rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-left: 35rpx;
		margin-top: 25rpx;
	}

	.applyfail {
		position: absolute;
		right: 20rpx;
		top: 0rpx;
		background-color: #fff4f7;
		color: #FC3D7F;
		width: 130rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-left: 35rpx;
		margin-top: 20rpx;
		// margin-bottom: 20rpx;
	}

	.card-font {
		margin-left: 40rpx;
		font-size: 32rpx;
		margin-top: 30rpx;
		word-wrap: break-word;
		width: 450rpx;
		font-weight: 600;
	}

	.gray-font {
		margin-left: 40rpx;
		font-size: 31rpx;
		margin-top: 30rpx;
		color: #B1B1B1;
		width: 100%;
	}

	.gray-bgc {
		margin: 20rpx 40rpx;
		width: 90%;
		height: 90rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
		line-height: 40rpx;

		.gray-img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
</style>