<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module> -->
		<z-nav-bar title="五运六气"></z-nav-bar>
		<view class="">
			<canvas style="width: 100%; height:100vh;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		</view>
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	export default {
		data() {
			return {
				playData: {},
				pageWidth: uni.getSystemInfoSync().windowWidth,
				pageHeight: uni.getSystemInfoSync().windowHeight - 200,
				fiveYunNum: 5,
				zhuyun: [],
				keyun: [],
				nianyun: '',
				fiveTimes: []
			}
		},
		onLoad() {
			this.getYun()
		},
		onReady: function(e) {

		},
		onHide() {

		},
		methods: {
			getpanOne() {
				console.log(this.nianyun, 'nuanyun')
				var myCanvas = uni.createCanvasContext('firstCanvas')
				//将原点设置100,100位置
				myCanvas.translate(0, 0);
				//原点在100,100，则圆心设为0,0 ——> 100,100的位置
				myCanvas.setStrokeStyle("#00ff00")
				myCanvas.setLineWidth(1)
				// myCanvas.fillStyle = "#f3b2a7"
				// myCanvas.rect(0, 0, 200, 200)
				// myCanvas.stroke()			
				myCanvas.setLineWidth(1)
				//	console.log(-Math.PI/5,'-Math.PI/2')
				let yunNum = 360 / 5
				var angle = Math.PI * 2 / 5;
				// let startAng = 0
				// console.log(angle,'angle')
				var deg = Math.PI / 180
				// 最大圈
				for (var i = 0; i < this.fiveYunNum; i++) {
					myCanvas.setStrokeStyle("#000")
					let n = i + 1
					myCanvas.beginPath();
					myCanvas.moveTo(this.pageWidth / 2, this.pageHeight / 2)
					myCanvas.arc(this.pageWidth / 2, this.pageHeight / 2, 160, -deg * i * yunNum, -deg * yunNum * n, true)

					myCanvas.font = 'normal 16px Arial'
					myCanvas.fillStyle = "#f3b2a7"
					myCanvas.fill();
					myCanvas.closePath();
					myCanvas.stroke()
				}
				for (var i = 0; i < this.fiveYunNum; i++) {
					myCanvas.setStrokeStyle("#000")
					let n = i + 1
					myCanvas.beginPath();
					myCanvas.moveTo(this.pageWidth / 2, this.pageHeight / 2)
					myCanvas.arc(this.pageWidth / 2, this.pageHeight / 2, 90, -deg * i * yunNum, -deg * yunNum * n, true)
					myCanvas.closePath();
					myCanvas.fillStyle = "#fef9e4"
					myCanvas.fill();
					myCanvas.stroke()
				}
				// 中间的主运					
				myCanvas.beginPath();
				myCanvas.arc(this.pageWidth / 2, this.pageHeight / 2, 30, 0, 2 * Math.PI, true)
				myCanvas.fillStyle = "#f8d8d5"
				myCanvas.fill();
				myCanvas.fillStyle = "#000"
				myCanvas.fillText(this.nianyun, this.pageWidth / 2 - 9, this.pageHeight / 2 + 6)
				myCanvas.closePath();
				myCanvas.stroke()



				// 绘制文字(主运)		

				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.zhuyun[0], this.pageWidth / 2 + 90, this.pageHeight / 2 + 70)
				myCanvas.closePath();
				myCanvas.stroke()


				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.zhuyun[1], this.pageWidth / 2 - 30, this.pageHeight / 2 + 120)
				myCanvas.closePath();
				myCanvas.stroke()


				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.zhuyun[2], this.pageWidth / 2 - 140, this.pageHeight / 2)
				myCanvas.closePath();
				myCanvas.stroke()


				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.zhuyun[3], this.pageWidth / 2 - 50, this.pageHeight / 2 - 120)
				myCanvas.closePath();
				myCanvas.stroke()

				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.zhuyun[4], this.pageWidth / 2 + 90, this.pageHeight / 2 - 70)
				myCanvas.closePath();
				myCanvas.stroke()

				// 结束
				// 绘制文字（客运）
				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.keyun[0], this.pageWidth / 2 + 40, this.pageHeight / 2 + 40)
				myCanvas.closePath();
				myCanvas.stroke()


				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.keyun[1], this.pageWidth / 2 - 20, this.pageHeight / 2 + 60)
				myCanvas.closePath();
				myCanvas.stroke()


				 myCanvas.beginPath();				
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.keyun[2], this.pageWidth / 2 - 70, this.pageHeight / 2)
				myCanvas.closePath();				
				 myCanvas.stroke()


				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.keyun[3], this.pageWidth / 2 - 30, this.pageHeight / 2 - 50)
				myCanvas.closePath();
				myCanvas.stroke()

				myCanvas.beginPath();
				myCanvas.fillStyle = "#000"
				myCanvas.font = 'normal 16px Arial'
				// myCanvas.rotate((Math.PI/180)*5)
				myCanvas.fillText(this.keyun[4], this.pageWidth / 2 + 30, this.pageHeight / 2 - 20)
				myCanvas.closePath();
				myCanvas.stroke()
				// 结束	
							
				// 绘制时间
				 // myCanvas.beginPath();
				myCanvas.save();
				 myCanvas.translate(this.pageWidth / 2 + 170, this.pageHeight / 2 - 30);
				myCanvas.rotate(90 * Math.PI / 180 );
				// console.log(30 * Math.PI / 180 )
				myCanvas.fillStyle = "#000"
				// myCanvas.textBaseline = 'middle'
				myCanvas.font = 'normal 12px Arial'				
				myCanvas.fillText(this.fiveTimes[0],  0,  0)
				 // myCanvas.closePath();
				myCanvas.restore()				
				
				
				// myCanvas.beginPath();
				myCanvas.save();
				 myCanvas.translate(this.pageWidth / 2 + 80, this.pageHeight / 2 + 150);
				myCanvas.rotate((90+yunNum) * Math.PI / 180 );
				// console.log(30 * Math.PI / 180 )
				myCanvas.fillStyle = "#000"
				// myCanvas.textBaseline = 'middle'
				myCanvas.font = 'normal 12px Arial'				
				myCanvas.fillText(this.fiveTimes[1],  0,  0)
				 // myCanvas.closePath();
				myCanvas.restore()
				
				
				myCanvas.save();
				 myCanvas.translate(this.pageWidth / 2 - 120, this.pageHeight / 2  + 120);
				myCanvas.rotate((90+yunNum*2) * Math.PI / 180 );			
				myCanvas.fillStyle = "#000"			
				myCanvas.font = 'normal 12px Arial'				
				myCanvas.fillText(this.fiveTimes[2],  0,  0)				
				myCanvas.restore()
				
				myCanvas.save();
				 myCanvas.translate(this.pageWidth / 2 - 160, this.pageHeight / 2  - 70);
				myCanvas.rotate((90+yunNum*3) * Math.PI / 180 );			
				myCanvas.fillStyle = "#000"			
				myCanvas.font = 'normal 12px Arial'				
				myCanvas.fillText(this.fiveTimes[3],  0,  0)				
				myCanvas.restore()
				
				myCanvas.save();
				myCanvas.translate(this.pageWidth / 2 + 20, this.pageHeight / 2  - 170);
				myCanvas.rotate((90+yunNum*4) * Math.PI / 180 );			
				myCanvas.fillStyle = "#000"			
				myCanvas.font = 'normal 12px Arial'				
				myCanvas.fillText(this.fiveTimes[4],  0,  0)				
				myCanvas.restore()

				myCanvas.draw()
			},
			getYun() {
				$http.request({
						url: "book/point/TGDZForYear",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"date": "2023-11-16 13:25:15"
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {

						if (res.code == 0 && res.tgdz) {
							console.log('获取成功', res.tgdz)
							this.zhuyun = res.tgdz.wy.zhuYun
							this.keyun = res.tgdz.wy.keYun
							this.nianyun = res.tgdz.wy.nianYun
							this.fiveTimes = res.tgdz.wy.time
							// console.log(this.nianyun,'this.nianyun')
							this.getpanOne()
						} else {

						}

					}).catch(e => {
						console.log(e, 'e')
					});
			}
		},

		components: {
			musicPlay
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		height: 100vh;
		background-color: #fff;
	}


	.flexbox {
		display: flex;
	}
</style>