<template>
	<view>
		
		<view class="wrapper">
		    <!-- 上方邀请号和照片 -->
		    <view class="above">
		        <view>
		            <view class="aboveTitle">
		                <text>邀请号：</text>
		                <text>{{Info.requireId}}</text>
		            </view>
		            <view class="aboveTitle">
		                <text>对方：</text>
		                <text>{{Info.fromUname}}</text>
		            </view>
		        </view>
		        <!-- 头像 -->
		        <image class="headerPortrait" mode="widthFix" src="../../images/zly.jpeg"></image>
		    </view>
			
		     <!-- 中间详细信息 -->
		     <view>
		        <view class="midTitle">
		            <text>对方ID：</text>
		            <text>{{Info.fromUid}}</text>
		        </view>
		        <view class="midTitle">
		            <text>需求号：</text>
		            <text class="toLink" bindtap="toNeedDetail" style="color: rebeccapurple;">{{Info.requireId}}</text>
		            <text class="needState">{{needState}}</text>
		        </view>
		        <view class="midTitle">
		            <text>课程号：</text>
		            <text class="toLink" bindtap="toCourseDetail" style="color: red;">{{Info.courseId}}</text>
		            <text class="needState">{{courseState}}</text>
		        </view>
		        <view class="midTitle">
		            <text>需求金额：</text>
		            <text>{{Info.requireSalary}}</text>
		        </view>
		        <view class="midTitle">
		            <text>邀请内容：</text>
		            <text>{{Info.requireDetail}}</text>
		        </view>
		    </view>
		    <view class="bottomWrapper">
		        <view class="bottomTitle">
		            <text>邀请日期：</text>
		            <text>{{Info.datetime}}</text>
		        </view>
		        <view class="bottomTitle">
		            <text>我方操作状态：</text>
		            <text class="operateState">{{Info.operateStatus}}</text>
		        </view>
		    </view>
		    <view class="operation" v-if="Info.operateStatus!=='拒绝'&&Info.operateStatus!=='同意'">
		        <view class="operationBtn" @click="refuse">拒绝</view>
		        <view class="operationBtn" @click="agree">同意</view>
		    </view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info:[]
			};
		},
		created() {
			
		},
		onLoad(option) {
			this.Info = JSON.parse(decodeURIComponent(option.Info))
			console.log(this.Info)
			this.toRead()
		},
		methods:{
			async toRead(){
				const queryObj = {
					requireId: this.Info.requireId
				}
				const { data: result } = await uni.$http.get('/ucenter/invite-info/modifyStatusToHold',queryObj)
			},
			async refuse(){
				const queryObj = {
					requireId: this.Info.requireId
				}
				const { data: result } = await uni.$http.get('/ucenter/invite-info/refuse',queryObj)
				console.log(result)
				uni.navigateTo({
					url: 'subpkg/my_got_invitation/my_got_invitation'
				})
			},
			agree(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
/* 设置背景 */
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #FFF2CC;
    padding: 20rpx;
}

/* 上方邀请号和照片 */
.above{
    display: flex;
    width: 95%;
    justify-content: space-between;
}

/* 上方、中间左侧文字 */
.aboveTitle,
.midTitle,
.bottomTitle{
    padding-bottom: 20rpx;
}

/* 头像 */
.headerPortrait{
    width: 200rpx;
}

/* 设置链接样式 */
.toLink{
    color: skyblue;
    text-decoration: underline;
}

/* 需求号和课程号状态 */
.needState{
    padding-left: 30rpx;
    color: red;
    font-weight: bold;
}

/* 设置操作状态字体 */
.operateState{
    font-weight: bold;
    color: red;
}

.bottomWrapper{
    margin-top: 140rpx;
}

/* 底部按钮 */
.operation{
    display: flex;
    justify-content: space-around;
    margin-top: 120rpx;
}

/* 按钮 */
.operationBtn{
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1rpx solid #5B9BD5;
    border-radius: 30rpx;
    font-size: 40rpx;
    background-color: #5B9BD5;
    color: white;
}

</style>
