<template>
    <div class="pallet" ref="palletRef">
		<div class="palletColo" @click="openPallet">
			<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
				{{ selectColor.hex }}
			</div>
			<div v-show="selectColor.gradient" class="palletBackColor" :style="{'background-image':`linear-gradient(${selectColor.gradient?.angle}deg,${setGradient(selectColor.gradient)})`}">
			</div>
		</div>
		<div class="palletBox">
			<div class="color_setting_block" @click.stop>
				<Chrome class="chrome_color" v-model="color_"></Chrome>
				<div class="color_setting_operateSingle">
					<div class="color_setting_btn" :class="{active:!color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
					<a-switch :checked="color?.gradient?.gradientShow"  @click="setOperate"/>
					<div class="color_setting_btn" :class="{active:color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
				</div>
				<div class="color_setting_operate" v-if="color?.gradient?.gradientShow">
					<div class="color_setting_operate_item color_setting_operate_control">
						<div class="operate_item_box">
							<div>{{ $t('ColorboardUpload.Alignment') }}</div>
						</div>
						<div class="operate_item_box operate_item_angle">
							<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle(getMousePosition($event,false))" @touchstart="mousedownGradientAngle(getMousePosition($event,true))">
								<div :style="{'transform':`rotate(${color.gradient.angle}deg)`}"></div>
							</div>
						</div>
						<div class="operate_item_box operate_item_delete">
							<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
						</div>
					</div>
					<div class="color_setting_operate_item color_setting_operate_input">
						<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':color?.gradient?`linear-gradient(90deg,${setGradient(color.gradient)})`:'none'}">
						</div>
						<div v-for="item,index in color.gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == color.gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient(getMousePosition($event,false),item,index,)" @touchstart="mousedownGradient(getMousePosition($event,true),item,index,)"></div>
					</div>
				</div>
			</div>
		</div>
		
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,onMounted,onUnmounted,toRefs, reactive} from 'vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { message,Upload} from 'ant-design-vue';
import { Sketch, Chrome} from '@ans1998/vue3-color'
import { getMousePosition } from "@/tool/mdEvent";
import { rgbaToHex } from "@/tool/util"
import { color } from 'echarts/core';
export default defineComponent({
    components:{
		Chrome,
    },
	props:{
	    selectColor:{
	        type:Object,
			default:()=>{}
	    },
	},
	emits:['selectUplpadColor'],
    setup(props,{emit}) {
		const {t} = useI18n()
        const store = useStore();
		const palletData = reactive({
			palletShow: true,
			palletList:[],
			color_:{} as any,
			color:{} as any,
			updataSelectColorTime:null as any,
			gradient:{
				gradientList:[
					{
						rgba:{
							r:117,
							g:119,
							b:255,
							a:1,
						},
						left:'0%'
					},{
						rgba:{
							r:0,
							g:222,
							b:152,
							a:1,
						},
						left:'100%'
					},
				],
				angle:45,
				selectIndex:-1,
				gradientShow:false,
			},
			setGradient:computed(()=>{
				return (gradient:any)=>{
					let gradientStr = ''
					if(!gradient?.gradientList)return
					gradient.gradientList.sort((a:any, b:any) => {
						let aArr = a.left.split('%')[0]
						let bArr = b.left.split('%')[0]
						return aArr - bArr;
					});
					gradient.gradientList.forEach((item:any,index:any)=>{
						let str = ','
						if(gradient.gradientList.length == index+1)str = ''
						let rgba = item.rgba?item.rgba:{r:255,g:255,b:255}
						gradientStr += `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a}) ${item.left}${str}` 

					})
					return `${gradientStr}`
				}
			})
			
		})
		const getpalletListDom = reactive({
		})
		const palletRef = ref(null)
		watch(()=>palletData.color_,(newVal:any)=>{
			if(!newVal?.rgba?.r)return
			if(palletData.color?.gradient?.gradientShow){
				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
					r:newVal.rgba.r,
					g:newVal.rgba.g,
					b:newVal.rgba.b,
					a:newVal.rgba.a,
				}
			}else{
				palletData.color = newVal
			}
		})
		watch(()=>palletData.color,(newVal:any)=>{
			if(JSON.stringify(props.selectColor) != JSON.stringify(newVal)){
				newVal.name = ''
				newVal.tcx = ''
				let rgba = [newVal.rgba.r,newVal.rgba.g,newVal.rgba.b]
				let hex = rgbaToHex(rgba)
				newVal.hex = hex
				emit('selectUplpadColor',newVal)
			}
		},{deep: true })
		const setOperate = ()=>{
			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
			palletData.gradient.selectIndex = 0
			palletData.gradient.gradientShow = true
			if(!palletData.color.gradient){
				if(palletData.color.rgba.r){
					palletData.gradient.gradientList[palletData.gradient.selectIndex].rgba = {
						r:palletData.color.rgba.r,
						g:palletData.color.rgba.g,
						b:palletData.color.rgba.b,
						a:1,
					}
				}
				palletData.color.gradient = JSON.parse(JSON.stringify(palletData.gradient))
			}else{
				palletData.color.rgba = palletData.color.gradient.gradientList[0].rgba
				palletData.color.gradient = null
			}
		}
		const deleteGradientItem = ()=>{
			if(palletData.color.gradient.gradientList.length <= 2)return
			palletData.color.gradient.gradientList.splice(palletData.color.gradient.selectIndex,1)
		}
		const addGradient = (event:any)=>{
			let gradientWidth = event.target.clientWidth
			let left:any = event.offsetX/gradientWidth
			palletData.color.gradient.gradientList.push({
				rgba:palletData.color_.rgba,
				left:left.toFixed(2)*100+'%'
			})
		}
		const mousedownGradientAngle = (event:any)=>{
			// isMoible()  true为移动端
			let domPosition = event.target.getBoundingClientRect()
			let position = {
				x:domPosition.x+domPosition.width/2,
				y:domPosition.y+domPosition.height/2,
			}
			let angle
			let mousedown = function(event:any){
				let e = getMousePosition(event,false)
				mouseDownOperation(e)
			}

			let touchstart = function(event:any){
				let e = getMousePosition(event,true)
				mouseDownOperation(e)
			}
			let mouseDownOperation = (e:any)=>{
				let X = position.x 
				let Y = position.y
				let x = (e.clientX) - X
				let y = Y -( e.clientY)
				angle = Math.atan2(x,y)*(180 / Math.PI)
				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
				palletData.color.gradient.angle = angle

			}
			let mouseupGradientAngle = ()=>{
				window.removeEventListener('touchmove',touchstart)
				window.removeEventListener('touchend',mouseupGradientAngle)
				
				window.removeEventListener('mousemove',mousedown)
				window.removeEventListener('mouseup',mouseupGradientAngle)
			}
			window.addEventListener('touchmove',touchstart)
			window.addEventListener('touchend',mouseupGradientAngle)

			window.addEventListener('mousemove',mousedown)
			window.addEventListener('mouseup',mouseupGradientAngle)
		}

		const mousedownGradient = (event:any,item:any,index:number)=>{
			palletData.color.gradient.selectIndex = index
			
			
            // this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
			let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth
			let position = {
				x:event.clientX,
				left:event.target.style.left?event.target.style.left.split('%')[0]:0
			}
			let mousedown = function(event:any){
				let e = getMousePosition(event,false)
				mousedownGradient(e)
			}

			let touchstart = function(event:any){
				let e = getMousePosition(event,true)
				mousedownGradient(e)
			}
			let mousedownGradient = (e:any)=>{
				let left = ((e.clientX) - position.x)/gradientWidth*100+Number(position.left)
				left = (left<0?0:left>100?100:left)
				item.left = left+'%'
			}

			let mouseupGradientAngle = ()=>{
				window.removeEventListener('touchmove',touchstart)
				window.removeEventListener('touchend',mouseupGradientAngle)
				window.removeEventListener('mousemove',mousedown)
				window.removeEventListener('mouseup',mouseupGradientAngle)
			}
			window.addEventListener('touchmove',touchstart)
			window.addEventListener('touchend',mouseupGradientAngle)

			window.addEventListener('mousemove',mousedown)
			window.addEventListener('mouseup',mouseupGradientAngle)
			
			
		}
		const selectImgItem = ()=>{

		}
		const openPallet = ()=>{
			if(palletData.palletShow && props.selectColor?.rgba?.r){
				if(props.selectColor.gradient){
					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
				}else{
					palletData.color_ = JSON.parse(JSON.stringify(props.selectColor))
					palletData.gradient.gradientShow = false
				}
			
				palletData.color = JSON.parse(JSON.stringify(props.selectColor))
			}else{
			}
		}
		// 点击外部区域关闭颜色选择器
		const handleClickOutside = (event: Event) => {
			const target = event.target as HTMLElement;
			const colorSettingBlock = palletRef.value.querySelector('.color_setting_block');
			const palletColo = palletRef.value.querySelector('.palletColo');
			
			// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
			if (palletData.palletShow && colorSettingBlock && 
				!colorSettingBlock.contains(target) && 
				!palletColo?.contains(target)) {
				palletData.palletShow = false;
			}
		}

		onMounted(()=>{
			// 添加点击外部区域监听器
			// document.addEventListener('click', handleClickOutside);
			
			nextTick().then(()=>{
				const backIcon = document.createElement('div');
				backIcon.classList.add('vc-sketch-color-wrap')
				let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0]
				dropperDom.appendChild(backIcon);
				backIcon.addEventListener('click',async ()=>{
					try {
						const dropper = new EyeDropper();
						const result = await dropper.open();
						let hex = result.sRGBHex.replace("#", "");
						// 将十六进制颜色码拆分成红、绿、蓝三个部分
						const r = parseInt(hex.substring(0, 2), 16);
						const g = parseInt(hex.substring(2, 4), 16);
						const b = parseInt(hex.substring(4, 6), 16);
						palletData.color = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
						// return `rgb(${r}, ${g}, ${b})`;
						// box.style.backgroundColor = label.textContent = result.sRGBHex;
					} catch (e) {
						message.info(t('DesignDetailAlter.jsContent1'))
					}
				})
				openPallet();
			})
		})

		onUnmounted(()=>{
			// 清理事件监听器
			// document.removeEventListener('click', handleClickOutside);
		})
        return{
			...toRefs(palletData),
			...toRefs(getpalletListDom),
			palletRef,
			openPallet,
			selectImgItem,
			setOperate,
			deleteGradientItem,
			addGradient,
			mousedownGradientAngle,
			mousedownGradient,
			getMousePosition,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .pallet{
		// position: absolute;
		width: 100%;
		user-select: none;
		> .palletColo{
			width: 100%;
			height: 7rem;
			border-radius: .5rem;
			border: 1px solid #000;
			padding: .5rem .6rem;
			cursor: pointer;
			> .palletBackColor{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		> .palletBox{
			margin-top: 1.5rem;
			width: 100%;
			z-index: 2;
			> .color_setting_block{
				margin: auto;
				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
				width: 100%;
				// border-radius: calc(1rem*1.2);
				overflow: hidden;
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				.vc-chrome{
					background: rgba(0,0,0,0);
					box-shadow:none;
				}
				:deep(.chrome_color){
					width: 100%;
					overflow: hidden;

					.vc-chrome-saturation-wrap{
						width: 30rem;
						height: 30rem;
						margin: 2rem auto;
						padding-bottom: 0;
					}
					.vc-saturation-pointer{
						pointer-events: none;
					}
					.vc-chrome-body{
						padding: 0;
						width: 90%;
						margin: 2 auto;
						margin: 0 auto;
						background: rgba(0,0,0,0);
						margin-bottom: 3rem;
						// display: none;
						.vc-chrome-fields-wrap{
							margin-top: 5%;
							padding: 0;
							position: relative;
							.vc-chrome-toggle-btn{
								width: calc(3.2rem*1.2);
								.vc-chrome-toggle-icon{
									height: auto;
									margin-right: calc(-0.4rem*1.2);
									margin-top: calc(0rem*1.2);
									display: flex;
									flex-direction: column;
									align-items: center;
									svg{
										width: calc(2.4rem*1.2) !important;
										height: calc(2.4rem*1.2) !important;
									}
								}
							}
							.vc-chrome-fields{
								.vc-chrome-field{
									padding-left: calc(.6rem*1.2);
								}
								.vc-input__label{
									font-size: calc(1.6rem*1.2);
								}
								.vc-input__input{
									font-size: 2rem;
									height: 4rem;
								}
							}
							.ant-upload-list{
								
							}
							.vc-sketch-color-wrap{
								background-image: url(@/assets/images/homePage/dropper.png);
								background-size: 3rem;
								background-repeat: no-repeat;
								background-position: 50%;
								cursor: pointer;
								margin: 0;
								width: 4rem;
								height: 4rem;
								padding: calc(.7rem*1.2);
								border: 1px solid;
								position: absolute;
								bottom: -2rem;
								right: 0rem;
								border-radius: calc(.5rem*1.2);
								
							}
							.vc-chrome-fields{
								.vc-input__label{
									margin-top: calc(1rem*1.2);
								}
							}
							.vc-chrome-fields:nth-child(2){
								>:last-of-type {
									display: none;
								}
							}
							.vc-chrome-fields:nth-child(3){
								>:last-of-type {
									display: none;
								}
							}
						}
						.vc-chrome-controls{
							align-items: center;
							flex-direction: row-reverse;
							.vc-chrome-color-wrap{
								// width: 3.6rem*1.2);
								margin-left: calc(2rem*1.2);
								width: auto;
								.vc-chrome-active-color{
									border-radius: 50%;
								}
								.vc-chrome-active-color,.vc-checkerboard{
									width: calc(3rem*1.2);
									height: calc(3rem*1.2);
								}
							}
							.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
								.vc-hue{
									border-radius: 15px;
								}
								.vc-alpha{
									border-radius: 15px;
									overflow: hidden;
								}
								height: 2rem;
								margin: 0;
								.vc-hue-pointer{
									transform: translateX(-1.25rem);
								}
								.vc-hue-picker{
									width: 2.5rem;
									height: 2.5rem;
									border-radius: 50%;
									transform: translate(0px,-3px);
								}
							}
							.vc-chrome-alpha-wrap{
								display: none;
							}
						}
					}
					.vc-chrome-saturation-wrap .vc-saturation-circle{
						width: calc(1rem*1.2);
						height: calc(1rem*1.2);
					}
				}
				.color_block{
						// margin-top: calc(1rem;
						// display: flex;
						// justify-content: space-between;
						// font-size: calc(1.6rem;
						width: 100%;
						padding: 0 5%;
						padding-bottom: 5%;
						margin: calc(0.5rem*1.2) auto;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.color_right{
							width: 13rem;
							font-size: calc(1.2rem*1.2);
							color: #666666;
							.color_rgb_block{
								display: flex;
								.rgb_item{
									margin-left: calc(.2rem*1.2);
								}
							}
						}
						.color_left{
							cursor: pointer;
							color: rgb(153, 153, 153);
						}
						.color_right,.color_left{
							>div{
								display: flex;
								align-items: center;
							}
							.color_HEX_block,.color_rgb_block{
								padding: .25rem .6rem;
								box-shadow: inset 0 0 0 1px #ccc;
								border-radius: .5rem;
								justify-content: space-around;
								text-transform:uppercase;
								.color_block_bg{
									width: 1.8rem;
									height: 2.5rem;
									// margin-right: .5rem;
									display: flex;
									justify-content: space-between;
								}
							}
							.color_block_bg{
							}
						}
						
					}
					.color_setting_operateSingle{
						text-align: center;
						margin: 1rem 0;
						display: flex;
						justify-content: center;
						.color_setting_btn{
							margin: 0 1rem;
							color: rgba(0, 0, 0, 0.5);
							&.active{
								color: rgba(0, 0, 0, 0.7);
			                    font-weight: 900;
							}
						}
					}
					.color_setting_operate{
						*{
							-webkit-touch-callout: none; /* iOS Safari */
							-webkit-user-select: none; /* Safari */
							-moz-user-select: none; /* Firefox */
							-ms-user-select: none; /* Internet Explorer/Edge */
							user-select: none;
						}
						.color_setting_operate_item{
							display: flex;
							justify-content: space-around;
							align-items: center;
							.operate_item_box{
							}
						}
						.color_setting_operate_control{
							.operate_item_delete,.operate_item_angle{
								cursor: pointer;
							}
							.operate_item_delete{
								i{
								display: flex;
									font-size: 3rem;
								}
							}
							.operate_item_angle{
								.operate_item_angle_box{
									border-radius: 50%;
									width: 4rem;
									height: 4rem;
									border: solid 2px #000;
									display: flex;
									align-items: center;
									justify-content: center;
									cursor: pointer;
									>div{
										height: 100%;
										width: 1rem;
										position: relative;
										pointer-events:none;
									}
									>div::before{
										position: absolute;
										content: "";
										top: 0.2rem;
										left: 0;
										width: 1rem;
										height: 1rem;
										border-radius: 50%;
										background: #000;
									}
								}
							}
						}
						.color_setting_operate_input{
							width: 80%;
							// padding: 0 10%;
							margin: 1.2rem 10%;
							border-radius: 10%;
							position: relative;
							height: 2.5rem;
							.color_setting_operate_bg{
								border-radius: .5rem;
								width: 100%;
								height: 2.5rem;
								background: #fff;
								position: absolute;
							}
						}
						.color_setting_operate_btn{
							position: absolute;
							top: 50%;
							transform: translate(-50%,-50%);
							left: 0;
							width: 1rem;
							height: 110%;
							border: .2rem solid;
							border-radius: .5rem;
							cursor: pointer;
							box-sizing: content-box;
							z-index: 2;
							&.active{
								border: .3rem solid;
							}
						}
						.color_setting_operate_btn:hover{
							border: .3rem solid;
						}
					}
			}	
		}
	}
</style>