<template>
  <view class="template-color tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    <!-- 图鸟_LEE，原创，勿喷，上线于2022年3月，开源于2023年9月，晚了1.5年才开源而已，此最新版本优化了界面 -->
    <view class="content" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}">
      <view class="dialog">
        <view id="colorBg" class="colorBg" @touchstart="startTouch" @touchmove="moveIng"
          @touchend="endTouch">
          <view class="roundBuff" :catchtouchmove="true" @c.stop="()=>{}" :style="{transform: `rotate(${degrees}deg)`}"></view>
          <view class="colorPan">HSL：{{degrees.toFixed(0)}}</view>
        </view>
        <!-- 按钮 -->
        <view class="tn-flex tn-padding-top-xl">
          <view class="tn-flex-1 justify-content-item tn-margin-left tn-margin-right-xs tn-text-center tn-bg-white" style="border-radius: 100rpx;">
            <tn-button backgroundColor="#4B98FE " padding="39rpx 0" width="100%" :fontSize="28" :plain="true" fontColor="#4B98FE" shape="round">
              <text class="">取 消</text>
            </tn-button>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-right tn-margin-left-xs tn-text-center">
            <tn-button backgroundColor="#4B98FE " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round">
              <text class="">确 认</text>
            </tn-button>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateColor',
    mixins: [template_page_mixin],
    data(){
      return {
        pointerShow: true,
				colorPanWidth: 20,
				colorPanRadius: 0,
				pointerBox: {},
				degrees: 0
      }
    },
    mounted() {
			uni.getSystemInfo({
				success: (res) => {
					uni.createSelectorQuery().select('#colorBg').boundingClientRect((rect) => {
						this.pointerBox = rect
					}).exec()
					this.colorPanRadius = res.screenWidth * 0.4
				}
			})
		},
    methods: {
      startTouch(e) {
				const {
					pageX,
					pageY
				} = e.touches[0]
				this.rotatePointer(pageX, pageY)
			},
			endTouch(e) {
				const {
					pageX,
					pageY
				} = e.changedTouches[0]
				this.rotatePointer(pageX, pageY)
			},
			moveIng(e) {
				const {
					pageX,
					pageY
				} = e.touches[0]
				this.rotatePointer(pageX, pageY)
			},
			rotatePointer(pageX = 0, pageY = 0) {
				const {
					pointerBox,
					colorPanWidth
				} = this
				const mouseX = pageX - colorPanWidth
				const mouseY = pageY - colorPanWidth
				var centerY = pointerBox.top + (pointerBox.height / 2) - 0,
					centerX = pointerBox.left + (pointerBox.height / 2) - 0,
					radians = Math.atan2(mouseX - centerX, mouseY - centerY)
				this.degrees = (radians * (180 / Math.PI) * -1) + 180;
			}
      
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .dialog {
  		display: block;
  		border-radius: 30rpx;
  		// background-color: #303030;
  		margin: 20rpx;
  		padding: 30rpx;
  	}
  
  	.flex {
  		display: flex;
  		justify-content: space-between;
  	}
  
  	.colorBg {
  		width: 80vw;
  		height: 80vw;
  		margin: 5vw;
  		background: conic-gradient(red,
  				yellow,
  				lime,
  				aqua,
  				blue,
  				fuchsia,
  				red);
  		border-radius: 50%;
  		position: relative;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  	}
  
  	.roundBuff {
  		width: 55vw;
  		height: 55vw;
  		-webkit-transform-origin: center 50%;
  		transform-origin: center 50%;
  		background: #FFFFFF;
  		border-radius: 50%;
  	}
  	.roundBuff::before {
        content: "";
        width: 15px;
        height: 15px;
  	    background: #FFFFFF;
        border: solid #FFFFFF;
        border-width: 10px 10px 0 0;
        transform: translate(-50%, -50%) rotate(-45deg);
        position: absolute;
        left: 50%;
        top: 2%;
  }
  
  	.colorPan {
  		position: absolute;
  		color: #080808;
      font-size: 42rpx;
  	}
</style>
