<template>
	<view class="home_page_container">
		<view :style="{paddingTop:styles.top+styles.height + 'px'}" class="home_page_header">
			<view class="home_page_header_title">
				 {{user.name?`Hi ,${user.name}` : user.userPhone?user.userPhone:'暂未设置'}}
				<uni-icons @tap.stop='close()' class="iconclass" color="#ffffff" custom-prefix="iconfont" type="iconkaiguan" size="35">
				</uni-icons>
			</view>
			<view class="home_page_header_identity">{{user.roles[0].roleName}}</view>
		</view>

		<view :style="{transform:`rotate(${180}deg)`}" class="home_page_menu">
			<view class="home_page_menu_name">
				{{menuList[menuIndex].name?menuList[menuIndex].name:''}}
			</view>
			<view class="bgtracking"></view>
			<view class="bj"></view>
			<view :style="{transform:`rotate(${trackingPosition.angle}deg)`}" @click="gestureAnalysis"
				class="home_page_menu_circular">
				<view @click="menuClick(index)" class="home_page_menu_item" v-for="(item,index) in menuList"
					:style="{left:item.x,top:item.y,transform:`rotate(${180+trackingPosition.fangle}deg)`}">
					<uni-icons class="menu_icon" :style="{transform:`scale(${menuIndex==index?1.2:1})`}"
						:color="menuIndex==index? '#2866FF': '#ffffff'" custom-prefix="iconfont" :type="item.icon"
						size="25"></uni-icons>
				</view>
			</view>
		</view>
		<view :style="{transform:`translateY(${menuIndex!==null&&Submenu?0:-433}rpx)`}" class="Submenu">
			<view @tap.stop="jump(item)" v-if="user.authList.includes(item.lable)"  v-for="(item,index) in menuList[menuIndex].submenu" class="Submenu_item">
				<view @tap.stop="collectionFn(item)" class="label">
					<uni-icons   :color=" iconFn(item) " custom-prefix="iconfont" type="iconshoucang-yishoucang" size="30"></uni-icons>
				</view>
				<view class="Submenu_item_name">{{item.name}}</view>
			</view>
		</view>
		<view class="collection">
			<view @tap.stop="jump(item)" v-for="(item,index) in collection" class="collection_item">
				<view @tap.stop="remove(item)" class="tip">
					<uni-icons custom-prefix="iconfont" color="#ffffff" type="iconchiping" size="20"></uni-icons>
				</view>
				<view   class="collection_item_name">
					<uni-icons custom-prefix="iconfont" color="#2866FF" :type="item.icon" size="30"></uni-icons>
					<view  class="collection_item_text">{{item.name}}</view>
				</view>
			</view>
			<view class="collectionbg">
				<view v-for="(item,index) in 3" class="collection_itembg">
					<view>
					 <text>点击</text>	<uni-icons  style="margin-left: 10rpx;" color="#bbbbbb" custom-prefix="iconfont" type="iconshoucang-yishoucang" size="12"></uni-icons>
					</view>
					 <view>收藏</view>
					<!--
					<view>Here</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import menus from './menu'
	import oilIdentityApi from '@/api/oil-identity'
	export default {
		data() {
			return {
				user:null,
				collection:[],
				menuList: [],
				trackingPosition: {
					angle: 0,
					fangle: 0
				},
				Submenu: false,
				menuIndex: 0,
				styles: null,
				mousePosition: 0,
				circle_w: 520, //圆盘的宽
				circle_h: 600, //圆盘的高
				PI: 360, //分布角度，默认为360deg
				stard: 360, //起始角度
				stard_s: null, //用来默认储存第一个初始值
				boxNum: 5, //圆盘上覆盖的小圆点个数
				descTitle: '', //模块描述标题
				descContent: '', //模块描述内容
				activeIndex: 1, //默认下标
			}
		},
		onLoad() {
			this.styles = uni.getMenuButtonBoundingClientRect();
		},
		created() {
			this.initFn();
		},
		watch:{
			collection:function(n,o){
				uni.setStorageSync('collection',n);
			}
		},
		methods: {
			close() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录',
					success: function (res) {
						if (res.confirm) {
							oilIdentityApi.logoutAuthSystem().then(res => {
								uni.redirectTo({
									url: '../login/login?type=1'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			jump(e){
				if(this.user.authList.includes(e.lable)){
					uni.navigateTo({
						url:e.router,
						fail(e) {
							console.log('失败')
						},
					})
				}else{
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
				}
			},
			remove(e){
				let indexk ;
				this.collection.forEach((item,index)=>{
					if(e.name==item.name){
						indexk = index
					}
				})
				this.collection.splice(indexk,1);
			},
			iconFn(e){
				return this.collection.filter((item)=>e.name==item.name).length==0?'#bbbbbb':'#FFB730';
			},
			initFn() {
				this.menuList = menus
				this.menuList.forEach((item, index) => {
					item = Object.assign(item, this.circularPositioning(index))
				})
				this.trackingPosition.x = this.menuList[0].x;
				this.trackingPosition.y = this.menuList[0].y;
				this.collection = uni.getStorageSync('collection')||[];
				this.user = uni.getStorageSync('user');
			},
			collectionFn(e){
				console.log(this.collection)
				if(this.collection.length==0){
					this.collection.unshift(e)
				}else{
					let repeatTest = this.collection.filter((item)=>e.name==item.name).length==0?true:false;
					if(repeatTest){
						if(this.collection.length>=3){
							this.collection.splice(this.collection.length-1,1)
						}
						this.collection.unshift(e)
					}else{
						this.remove(e)
						// uni.showToast({
						// 	title:'无需重复添加',
						// 	icon:'none'
						// })
					}
				}
			},
			gestureAnalysis(e) {
				console.log(e, '*****')
			},
			indexDis(e){
				let x = this.menuIndex
				let y = e
				console.log(x,y)
				let average = 360 / this.menuList.length;
				 let a  =  x-y;
				 let b =  this.menuList.length - 1 - (x-y-1);
				 let deg  = a>b?b*average:a*average;
				 if(b>a){
					this.trackingPosition.angle = deg*-1
				 }else{
					 this.trackingPosition.angle = deg
				 }
				 console.log(this.trackingPosition.angle)
				 
				this.menuIndex = null
				setTimeout(() => {
					this.menuIndex = e
				}, 500);
			},
			menuClick(index) {
				// let newList = []
				// // let arrayList =  this.menuList.length
				// let arrayList =  8
				// let alient = 0
				// if (arrayList % 2 == 0){
				//     alient = Math.floor(arrayList/2)
				// }else{
				// 	alient = Math.floor(arrayList/2)+1
				// }
				// let bbb = 7;
				// index =6;
				// console.log("index:{}alient:{},menuIndex{}arrayList{}",index,alient,bbb,arrayList);
				// // // 计算当前坐标点和目标左边点差值0
				// for(let i = 0; i <= arrayList-1; i++){
				// 	let aaa = bbb;
				// 	if(i<=alient){
				// 		aaa = bbb-(alient-i);
				// 		if(aaa < 0){
				// 			aaa = arrayList-aaa
				// 			console.log("1inde:{},aaa:{}",i,aaa)
				// 		}else{
				// 			console.log("2inde:{},aaa:{}",i,aaa)
				// 		}
				// 	}else{
				// 		aaa = bbb+(i-alient);
				// 		if(aaa >= arrayList){
				// 			aaa = aaa-arrayList
				// 			console.log("3inde:{},aaa:{}",i,aaa)
				// 		}else{
				// 			console.log("4inde:{},aaa:{}",i,aaa)
				// 		}
				// 	}
					
				// }
				// // NO=8
				this.Submenu = true
				let average = 360 / this.menuList.length;
				this.trackingPosition.angle = index * average;
				this.trackingPosition.fangle = -this.trackingPosition.angle;
				this.menuIndex = null
				setTimeout(() => {
					this.menuIndex = index
				}, 500);

			},
			circularPositioning(index, position) {
				let avd = this.PI / this.menuList.length //每一个 img-box 对应的角度
				let ahd = (avd * Math.PI) / 180 //每一个 img-box 对应的弧度
				let radius = this.circle_w / 2 //圆的半径
				let x = (Math.sin(ahd * index) * radius) - 30 + 300 + 'rpx'
				let y = (Math.cos(ahd * index) * radius) - 30 + 300 + 'rpx'
				return {
					x,
					y
				}
			}
		}
	}
</script>

<style>
	@import url("./newindex.css");
</style>
