<template>
	<view style="background-color: #E2F0D9;">
		
		<my-requiredetail :item="item" :location="location" :marker="marker" :timeAM="timeAM" :timePM="timePM" :timeEvening="timeEvening" :collect="collect" :isShowCollect="isShowCollect" @click="collecting"></my-requiredetail>
		
		<button type="primary" class="publish-button" @click="invite">邀请</button>
			
	</view>
		
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				isShowCollect: true,
				collect: false,
				item: {},
				courseWeekday: [],
				location: [],
				marker: [{
					id: 1,
					joinCluster:true,
					latitude: 0,
					longitude: 0,
					width: 40,
					height: 40,
					iconPath: '/static/location.png',
				}],
				// 上课时间
				// 上午
				timeAM: [{
						value: 'A1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'A2',
						checked: false
					},
					{
						name: '3',
						value: 'A3',
						checked: false
					},
					{
						name: '4',
						value: 'A4',
						checked: false
					},
					{
						name: '5',
						value: 'A5',
						checked: false
					},
					{
						name: '6',
						value: 'A6',
						checked: false
					},
					{
						name: '7',
						value: 'A7',
						checked: false
					}
				],
				// 下午
				timePM: [{
						value: 'P1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'P2',
						checked: false
					},
					{
						name: '3',
						value: 'P3',
						checked: false
					},
					{
						name: '4',
						value: 'P4',
						checked: false
					},
					{
						name: '5',
						value: 'P5',
						checked: false
					},
					{
						name: '6',
						value: 'P6',
						checked: false
					},
					{
						name: '7',
						value: 'P7',
						checked: false
					}
				],
				// 晚上
				timeEvening: [{
						name: '1',
						value: 'E1',
						checked: false
					},
					{
						name: '2',
						value: 'E2',
						checked: false
					},
					{
						name: '3',
						value: 'E3',
						checked: false
					},
					{
						name: '4',
						value: 'E4',
						checked: false
					},
					{
						name: '5',
						value: 'E5',
						checked: false
					},
					{
						name: '6',
						value: 'E6',
						checked: false
					},
					{
						name: '7',
						value: 'E7',
						checked: false
					}
				],
			};
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item))
			this.location = this.item.locationAl.split(",")
			this.marker[0].latitude = Number(this.location[0])
			this.marker[0].longitude = Number(this.location[1])
			this.courseWeekday = this.item.courseWeekday.split(",")
			// console.log("选中的日期：" + this.courseWeekday)
			for (let i = 0; i < this.courseWeekday.length; i++) {
				for (let x = 0; x < this.timeAM.length; x++) {
					if (this.courseWeekday[i] == this.timeAM[x].value) {
						this.timeAM[x].checked = true
					}
				}
				
				for (let y = 0; y < this.timePM.length; y++) {
					if (this.courseWeekday[i] == this.timePM[y].value) {
						// console.log(this.timePM[y].value)
						this.timePM[y].checked = true
					}
				}
				
				for (let z = 0; z < this.timeEvening.length; z++) {
					if (this.courseWeekday[i] == this.timeEvening[z].value) {
						this.timeEvening[z].checked = true
					}
				}
			}
		},
		methods: {
			async collecting() {
				// console.log(this.item)
				const queryObj = {
					requireId: this.item.requireId
				}
				
				if (!this.collect) {
					
					const { data: result1 } = await uni.$http.get('/education/my-favorite-needs/collect', queryObj)
					// console.log(result)
					if (result1.message === '收藏成功') {
						this.collect = true
						
					} else if (result1.message === '收藏失败') {
						uni.$showMsg('收藏失败')
					}
					
				} else if (this.collect) {
					
					const { data: result } = await uni.$http.get('/education/my-favorite-needs/cancelCollect', queryObj)
					if (result.message === '取消收藏成功') {
						this.collect = false
					
					} else if (result.message === '取消收藏失败') {
						uni.$showMsg('取消收藏失败')
					}
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabbar {
	height: 64px;
	align-items: center;
}

.publish-button {
	width: 65%;
	border-radius: 15%;
}
</style>
