<template>
    <div class="colorboard_upload_modal">
		<div class="modal_layout">
			<div class="modal_text">
				<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
			</div>
			<div class="modal_img">
				<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
					</div>
				</div>
				<div>
					<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
				</div>
			</div>
		</div>
        <div class="colorboard_upload_right">
            <div class="upload_right_content">
                <div class="right_content_line">
                    <div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('ColorboardUpload.Palette') }}</span>
                    </div>
                    <div class="color_setting_block">
						<!-- <Sketch class="sketch_color" v-model="selectColor"  :show.sync="colorPickerVisible"/> -->
                        <Chrome class="chrome_color" v-model="selectColor"></Chrome>
                        <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
						<!-- <div class="color_block">
							<div class="color_left" @click="colorBlockHex = !colorBlockHex">
								<div v-show="colorBlockHex">
									{{ $t('ColorboardUpload.HEX') }}
								</div>
								<div v-show="!colorBlockHex">
									{{ $t('ColorboardUpload.RGBA') }}
								</div>
							</div>
							<div class="color_right">
								<div class="color_HEX_block" v-show="colorBlockHex">
									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
									<div>
										{{getSelectRGB(selectColor).hex}}
									</div>
								</div>
								<div class="color_rgb_block" v-show="!colorBlockHex">
									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
									<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
									<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
									<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
								</div>
							</div>
						</div> -->
						<div class="color_setting_operateSingle">
							<!-- <div class="started_btn" @click="setOperate">
								{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual':'Single'}}
							</div> -->
							<div class="color_setting_btn" :class="{active:!colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
							<a-switch :checked="colorList[selectIndex]?.gradient?.gradientShow"  @click="setOperate"/>
							<div class="color_setting_btn" :class="{active:colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>

						</div>
						<div class="color_setting_operate" v-if="colorList[selectIndex]?.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($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
										<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
									</div>
									<!-- <input type="number"> -->
								</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':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
								</div>
								<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
							</div>
						</div>
                    </div>
                    <!-- <div class="color_review_block">
                        <div class="clear_button" @click="clearCurrentColor()">Clear</div>
                    </div> -->
                </div>
                <div class="right_content_line right_content_line_upload">
                    <div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('ColorboardUpload.UploadImage') }}</span>
                    </div>
					<div class="upload_centetn">
						<div class="upload_item">
							<div class="upload_file_item upload_file_item_show">
								<i v-show="fileList.length == 0" class="fi fi-rr-square-plus"></i>
								<div v-show="fileList.length > 0" class="upload_file_item upload_file_item_upload" v-for="(file) in fileList" :key="file">
									<div class="upload_file_item_content" v-show="file.status !== 'done'">
										<a-spin  :indicator="indicator" tip="Uploading..."/>
									</div>
									<div class="upload_file_item_content"  v-show="file.status === 'done'">
										<img  :src="file?.imgUrl" class="upload_img" ref="colorImage">
										<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
									</div>
								</div>
								<div class="upload_file_item_scale" :style="[(driver__.driver && (driver__.index == 19 || driver__.index == 18))?'display :flex;':'']">
									<div style="position: relative;">
										<a-upload
										:title="$t('ColorboardUpload.uploadTitle')"
										:capture="null"
										:max-count="1"
										list-type="picture-card"
										:customRequest="function(){}"
										@change="fileUploadChange"
										:before-upload="beforeUpload"
										accept=".jpg,.png,.jpeg,.bmp"
										class=" Guide_1_10"
										>
										<div  class="upload_tip_block">
											<i class="fi fi-br-upload"></i>
										</div>
									</a-upload>
									</div>
									<div :title="$t('ColorboardUpload.selectTitle')" class="upload_file_item" @click="setPrintImg()">
										<i class="fi fi-rr-picture"></i>
									</div>
								</div>
							</div>
						</div>
						<div class="upload_color" :style="[driver__.driver?'    overflow: hidden !important;':'']">
							<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item" :class="[ index == 0?'Guide_1_11':'',index == 1?'Guide_1_11_2':'',]">
								<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
								</div>
								<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
								<img :title="pantongNameList[index]">
							</div>
						</div>
						<div class="upload_color_btn" :title="isSelectSuccessively?$t('ColorboardUpload.SelectSuccessivelyOnTitle'):$t('ColorboardUpload.SelectSuccessivelyOffTitle')" v-show="selectColorList.length>0">
							<span>{{$t('ColorboardUpload.SelectSuccessively')}}</span>
							<a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="ON" un-checked-children="OFF"/>
						</div>
					</div>
                </div>
				<div class="right_content_line">
					<div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('ColorboardUpload.ColorCode') }}</span>
                    </div>
                    <div class="get_color_block">
                        <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
                        <div class="get_color_button" @click="getTcxColor()">
                            <!-- <span class="icon iconfont icon-huoquduixiang"></span> -->
							<span class="fi fi-br-fill"></span>
                            <span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
                        </div>
						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
							<img :title="pantongName">
						</div>
                    </div>
				</div>
            </div>
        </div>
		<selectImgList ref="selectImgList" @setImgGetColor="setImgGetColor"></selectImgList>
    </div>
</template>
<script>
import { Chrome,Slider,Sketch,Material,Compact,Swatches,} from '@ans1998/vue3-color'
import { Https } from "@/tool/https";
import GO from "@/tool/GO";
import { defineComponent, h,ref,inject, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
import {useStore} from 'vuex'
import ColorThief from '@/tool/colorthief/colorthief'
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import selectImgList from "@/component/HomePage/selectImgList.vue";
import { useI18n } from 'vue-i18n';
export default defineComponent({
    components:{
        Chrome,
        Slider,
		Sketch,
		selectImgList,
    },
	props: {
		collectionStep: {
			type: Number,
		}
	},
    setup(){
		// console.log(isMoible());
        let fileList = ref([])
        let colorList = ref([{},{},{},{},{},{},{},{}])
        let selectColor = ref({
			rgba:{},
		}) //顔色选择器默认颜色
		let selectColorList = ref({
		})
		let driver__ = inject('driver__')
		let {t} = useI18n()
		let gradient = ref({
			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,
		})
		let isSelectSuccessively = ref(false)
        return {
            fileList,
            colorList,
            selectColor,
			selectColorList,
			driver__,
			t,
			gradient,
			isSelectSuccessively,
        }
    },
    watch:{
        // selectColor(newVal,oldVal){
		// 	console.log(this.selectIndex);
        //     this.colorList[this.selectIndex] = newVal.rgba
        //     let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
        //     this.setColorboardList(colorList)
		// 	// this.clearSelectColor()
        // },
		collectionStep:{
			handler(newVal,oldVal){
				if(newVal != 3)return
				const backIcon = document.createElement('div');
				if(backIcon.classList.contains('vc-sketch-color-wrap'))return
				backIcon.classList.add('vc-sketch-color-wrap')
				let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].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);
						this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
						// 返回RGB格式的字符串
						// return `rgb(${r}, ${g}, ${b})`;
						// box.style.backgroundColor = label.textContent = result.sRGBHex;
					} catch (e) {
						message.info(this.t('ColorboardUpload.jsContent1'))
					}
				})
			}
		},
		selectColor:{
			handler(newVal,oldVal){
				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
					this.colorList[this.selectIndex] = {}
					return	
				}
				this.colorList[this.selectIndex].rgba = newVal.rgba
				if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
					this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
						r:newVal.rgba.r,
						g:newVal.rgba.g,
						b:newVal.rgba.b,
						a:1,
					}
				}
				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
				this.setColorboardList(colorList)
			},
			immediate: true
		},
    },
    computed:{
        getSelectRGB(selectColor){
            return (selectColor)=>{
                let rgba = selectColor.rgba
                let data = {
                    r:rgba?.r,
                    g:rgba?.g,
                    b:rgba?.b,
                    a:rgba?.a,
					// r:rgba?.r || rgba?.r===0 ? rgba?.r  : 255,
                    // g:rgba?.g || rgba?.g===0 ? rgba?.g  : 255,
                    // b:rgba?.b || rgba?.b===0 ? rgba?.b  : 255,
                    // a:rgba?.a || rgba?.a===1 ? rgba?.a  : 1,
					hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
                }
				if(data.a != 1 || data.a != 0){
					data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
				}
                return data
            }
        },
		setGradient(){
			// return this.setGradientAngle(gradient)
			return (gradient)=>{
				let gradientStr = ''
				if(!gradient.gradientList)return
				gradient.gradientList.sort((a, b) => {
					let aArr = a.left.split('%')[0]
					let bArr = b.left.split('%')[0]
					return aArr - bArr;
				});
				gradient.gradientList.forEach((item,index)=>{
					let str = ','
					if(gradient.gradientList.length == index+1)str = ''
					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 

				})
				return `${gradientStr}`
			}
			
		}
    },
    data(){
        return{
            
            reviewColor:{}, //预览的颜色
            selectIndex:0,//选中的文件索引
            tcxColor:'',
            pantongName:'',//潘通值
			pantongNameList:[],
            indicator : h(LoadingOutlined, {
                style: {
                    fontSize: '2.4rem',
                },
                spin: true,
            }),
            upload:{
                isPin:0,
				gender:'',
                level1Type:'Moodboard',
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            uploadUrl:'',
            store:useStore(),
			colorPickerVisible: true,
			colorBlockHex:true,
			getColorBg:false,
        }
    },
    mounted(){
		nextTick(()=>{
			this.uploadUrl = getUploadUrl()
			
		})
       
		// this.clearSelectColor()
		// if ("EyeDropper" in window) {
		// 	console.log(true);
		// }
		// else {
		// 	console.log(false);
		// }
    },
    methods:{
		clearSelectColor(){
			// let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[0]
			// let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
			// if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
			// 	colorBg0.style.opacity = 1
			// 	colorBg1.style.opacity = 1
			// }else{
 			// 	colorBg0.style.opacity = 0
			// 	colorBg1.style.opacity = 0
			// }
		},
        //选择不同的色块
        selectColorItem(index,color){
			let hex
			if(color?.rgba?.r){
				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
			}else{
				hex = '#FFFFFF'
			}
            this.selectIndex = index
            this.tcxColor = ''
            this.pantongName = ''
            this.pantongNameList = []
			this.reviewColor= {}
			this.getColorBg = false
			if(this.driver__.driver){
				driverObj__.moveNext()
			}
			if(color?.rgba?.r){
	            this.selectColor = color
	            this.selectColor.hex = hex
			}
        },

        //通过tcx获取颜色
        getTcxColor(){
            if(!this.tcxColor){
                return
            }
			let pattern = /^\d{2}-\d{4}$/;
			if(pattern.test(this.tcxColor)){
				Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
					if(rv && rv.name){
						// let hex = this.rgbaToHex([color.r,color.g,color.b])
						let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1])
						this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
						this.selectColor  = this.reviewColor
						this.colorList[this.selectIndex].rgba =  {r:rv.r, g:rv.g, b:rv.b}
						this.pantongName = rv.name
						let colorList =this.colorList.filter((v) => Object.keys(v).length)
						this.setColorboardList(colorList)
						this.getColorBg = true
					}else{
						message.info(this.t('ColorboardUpload.jsContent2'))
					}
				})
			}else{
				message.info(this.t('ColorboardUpload.jsContent5'))
			}
          
        },

        //清除当前的颜色
        clearCurrentColor(){
            this.selectColor = {}
            // this.fileList = []
			this.reviewColor={}
			this.colorList[this.selectIndex] = {}
            this.pantongName = ''
			this.colorList[this.selectIndex] = {}
			let colorList =this.colorList.filter((v) => Object.keys(v).length)
			this.setColorboardList(colorList)

            // this.pantongNameList = []
            this.tcxColor = ''
        },

        fileUploadChange(data){
            let file = data.file
            let fileData = file.originFileObj
            var reader = new FileReader();
            reader.onload = (e) => {
                let data_new;
                if (typeof e.target.result === 'object') {
                // 把Array Buffer转化为blob 如果是base64不需要
                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
                } else {
                    data_new = e.target.result;
                }
                file.imgUrl = data_new
                file.status = 'done'
                this.fileList[0] = file
                this.getImgColor()
				// nextTick().then(()=>{
				// 	if(this.driver__.driver){
				// 		driverObj__.moveNext()
				// 	}
				// })
            };
            // 转化为base64S
            reader.readAsDataURL(fileData)
        },
		getImgColor(){
			setTimeout(()=>{
				const img = new Image();
				let colorImage = this.$refs.colorImage
				const colorThief = new ColorThief();
				img.onload = async () => {
					let domImg = colorImage[0];
					// let color = colorThief.getColor(domImg)
					let selectColorList = [];
					let selectColor = colorThief.getPalette(img,9)
					//排序
					let obj = {
						max : 5,
						min: 5,
					}
					let colorSort
					await GO.setColor(selectColor,this.fileList[0].imgUrl,obj).then(
						(rv) => {
							if(rv){
								colorSort = rv.ratio
							}
						}
					)
					colorSort.sort((a, b) => {
						var a_num = a.ratio;
						var b_num = b.ratio;
						return b_num - a_num;
					});
					selectColor = []
					colorSort.forEach(v=>{
						selectColor.push(v.rgb)
					})
					selectColor = selectColor.join('&')
					selectColor = selectColor.split("&")
					let color = selectColor[0].split(',')
					let colorHex = this.rgbaToHex(color)
					let colorLi = []
					new Set(selectColor).forEach((item)=>{
						colorLi.push(item.split(","))
					})
					colorLi.forEach(element => {
						let colorLiHex = this.rgbaToHex(element)
						selectColorList.push(
							{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
						)
					});
					this.selectColorList = selectColorList
					this.getHsvColor(selectColorList)
					this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
					// console.log(this.colorList);
					// console.log(selectColorList);
					// let colorListIndex = []
					// this.colorList.forEach((item,index)=>{
					// 	if(!item.rgba){
					// 		colorListIndex.push(index)
					// 	}
					// })
					// for (let index = 0; index < selectColorList.length; index++) {
					// 	this.colorList[colorListIndex[0]] = selectColorList[index]
					// 	colorListIndex.splice(0,1)										
					// }
					nextTick().then(()=>{
						if(this.driver__.driver){
							driverObj__.moveNext()
						}
					})
					img.remove()
				};
				img.src = colorImage[0].src;
			},100)
		},
		rgbaToHex(rgba) { // rgba转16进制
            let hex = '#';
			rgba.forEach((i,index) => {
				if(index == 3){
					hex += Math.round(i * 255).toString(16)
				}else{
					hex += Number(i).toString(16).padStart(2, '0');
				}
			});
          
            return hex;
        },
		setUplpadColor(color){
			nextTick().then(()=>{
				if(this.isSelectSuccessively){
					for (let index = 0; index < this.colorList.length; index++) {
						if(!this.colorList[index].rgba){
							this.selectIndex = index
							this.selectColor = color
							break
						}
					}
				}else{
					this.selectColor = color
					if(this.driver__.driver){
						driverObj__.moveNext()
					}
				}
				
			})
			
		},
        beforeUpload(file){
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.info(this.t('ColorboardUpload.jsContent3'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(this.t('ColorboardUpload.jsContent4'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },

        deleteFile(index){
            this.fileList.splice(index, 1)
			this.selectColorList = []
        },

        //通过HSV获取颜色
        getHsvColor(color){
            // let hsv = rgbToHsv(color)
            this.pantongName = ''
			// {params:{id:3}}
			// console.log(color);
			let colorList = []
			color.forEach((item,index)=>{
				let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
				colorList.push(arr)
			})
			
			let hsvList = []
			colorList.forEach((item)=>{
				let hsv = rgbToHsv(item)
				if(hsvList.length == 0){
				}else{
					if(hsvList[0].h+5){
					}
				}
				
				let obj = {
					h:Number(hsv[0]),
					s:Number(hsv[1]),
					v:Number(hsv[2]),
				}
				hsvList.push(obj)
			})
			// let data = []
            // Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
           	// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
            //     if(rv){
            //         this.pantongName = rv.name
			// 		console.log(rv);
            //     }
            // })
			Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
                (rv) => {
					if(rv){
						rv.forEach(element => {
							this.pantongNameList.push(element.name) 
						});
					}
                }
            ).catch(res=>{
            });
        },

        setColorboardList(colorList){
            let  newColorList = colorList.map((v)=>{
                let data = {
                    id:'',
                    name:'',
                    rgbValue:v.rgba,
                    gradient:v.gradient,

                }
                return data
            })
            this.store.commit('setColorboardList',newColorList)
        },

        recollection(){
            let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
			let hex
            colorList.forEach((ele, index) => {
				hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
                this.colorList[index].rgba = ele.rgbValue
				this.colorList[index].gradient = ele.gradient
				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
            });
			if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
				this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
			}else{
				this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
			}
            this.store.commit('setColorboardList',colorList)
        },
		addGradient(event){
			let gradientWidth = event.target.clientWidth
			let left = event.offsetX/gradientWidth
			this.colorList[this.selectIndex].gradient.gradientList.push({
				rgba:this.selectColor.rgba,
				left:left.toFixed(2)*100+'%'
			})
		},
		deleteGradientItem(){
			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
		},
		mousedownGradient(event,item,index,str){
			let moible = isMoible()
			if(moible && str == 'mousedown'){
				return
			}else if(!moible && str == 'touchstart'){
				return
			}
			event.stopPropagation();
			this.colorList[this.selectIndex].gradient.selectIndex = index
			let gradientRgba = item.rgba
			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
			let hex = this.rgbaToHex(rgba)
            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
			// isMoible()  true为移动端
			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
			let position = {
				x:moible?event.touches[0].screenX:event?.x,
				left:event.target.style.left?event.target.style.left.split('%')[0]:0
			}
			let mousedownGradient = (e)=>{
				let left = ((moible?e.touches[0].screenX:e.x) - position.x)/gradientWidth*100+Number(position.left)
				left = (left<0?0:left>100?100:left)
				item.left = left+'%'
			}
			let mouseupGradient = ()=>{
				if(moible){
					window.removeEventListener('touchmove',mousedownGradient)
					window.removeEventListener('touchend',mouseupGradient)
				}else{
					window.removeEventListener('mousemove',mousedownGradient)
					window.removeEventListener('mouseup',mouseupGradient)
				}
			}
			if(moible){
				window.addEventListener('touchmove',mousedownGradient)
				window.addEventListener('touchend',mouseupGradient)
			}else{
				window.addEventListener('mousemove',mousedownGradient)
				window.addEventListener('mouseup',mouseupGradient)
			}
			// event.target.addEventListener('touchmove',)
		},
		mousedownGradientAngle(event,str){
			let moible = isMoible()
			if(moible && str == 'mousedown'){
				return
			}else if(!moible && str == 'touchstart'){
				return
			}
			event.stopPropagation();
			// isMoible()  true为移动端
			let domPosition = event.target.getBoundingClientRect()
			let position = {
				x:domPosition.x+domPosition.width/2,
				y:domPosition.y+domPosition.height/2,
			}
			let angle

			let mousedownGradientAngle = (e)=>{
				let X = position.x 
				let Y = position.y
				let x = (moible?e.touches[0].clientX:e?.x) - X
				let y = Y -( moible?e.touches[0].clientY:e?.y)
				angle = Math.atan2(x,y)*(180 / Math.PI)
				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
				this.colorList[this.selectIndex].gradient.angle = angle

			}
			let mouseupGradientAngle = ()=>{
				if(moible){
					window.removeEventListener('touchmove',mousedownGradientAngle)
					window.removeEventListener('touchend',mouseupGradientAngle)
				}else{
					window.removeEventListener('mousemove',mousedownGradientAngle)
					window.removeEventListener('mouseup',mouseupGradientAngle)
				}
			}
			if(moible){
				window.addEventListener('touchmove',mousedownGradientAngle)
				window.addEventListener('touchend',mouseupGradientAngle)
			}else{
				window.addEventListener('mousemove',mousedownGradientAngle)
				window.addEventListener('mouseup',mouseupGradientAngle)
			}
		},
		setOperate(){
			// this.colorList[this.selectIndex]
			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
			this.gradient.selectIndex = 0
			this.gradient.gradientShow = true
			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
			if(!this.colorList[this.selectIndex].gradient){
				if(this.selectColor.rgba.r){
					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
						r:this.selectColor.rgba.r,
						g:this.selectColor.rgba.g,
						b:this.selectColor.rgba.b,
						a:1,
					}
				}
				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
			}else{
				this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
				this.colorList[this.selectIndex].gradient = null
			}
			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
			this.setColorboardList(colorList)
		},
		setPrintImg(){
			let printImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.printboard))
			let moodImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.moodboard))
			let imgListData = [...moodImgListData,...printImgListData]
			if(imgListData?.length==0){
				message.info(this.t('ColorboardUpload.jsContent6'))
				return 
			}
			let selectImgList = this.$refs.selectImgList;
			// selectImgList.selectImgListMask = true
			// selectImgList.styleList = this.styleList
			selectImgList.init(imgListData);
		},
		setImgGetColor(data){
			data.status = 'await'
			this.fileList[0] = data
			fetch(data.imgUrl)
			.then(response => response.blob())
				.then(blob => {
					const reader = new FileReader();
					reader.readAsDataURL(blob);
					reader.onloadend = () => {
						this.fileList[0].status = 'done'
						const base64data = reader.result;
						this.fileList[0].imgUrl = base64data
						nextTick(()=>{
							this.getImgColor()
						})
					};
			})
			
		}
    }
})
</script>
<style lang="less">
.colorboard_upload_modal{
    // padding: 1rem 1rem 1.8rem 1rem;
    height: 100%;
    // background: #F2F3FB;
	position: relative;
    display: flex;
    justify-content: space-between;
	.modal_layout{
		position: absolute;
		top: 0;
		left: calc(47% + 3rem*1.2);
		.modal_text{
			font-size: var(--aida-fsize1-4);
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.modal_img{
			width: calc(50rem*1.2);
			// width: 40rem;
			height: calc(5rem*1.2);
			overflow-x: hidden;
			display: flex;
			align-items: center;
			&.modal_img::-webkit-scrollbar {
				display: none;
			}
			.modal_img_item{
				width: calc(4rem*1.2);
				height: calc(4rem*1.2);
				margin: 0 calc(1rem*1.2) 0 0;
				position: relative;
				cursor: pointer;
				border: 0.1rem solid #DCDCEC;
				.select_upload_color{
					border: 0.1rem solid #343579;
				}
				.upload_color{
					width: 100%;
					height: 100%;
				}
				
			}
			
			
		}
	}
    .colorboard_upload_right{
        // width: 47rem;
        height: 100%;
        background: #FFFFFF; 

        .upload_right_header{
            padding: calc(0.4rem*1.2) 0 calc(1.6rem*1.2) 0;
            font-weight: bold;
            line-height: calc(2.4rem*1.2);
            font-size: var(--aida-fsize1-8);
            color: #333333;
            display: flex;
            align-items: center;

            .color_edit{
                font-size: calc(2rem*1.2);
                margin-right: calc(1rem*1.2);
				position: absolute;
				left: 0;
            }

        }

        .upload_right_content{
            // height: calc(100% - 5.4rem);
			height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;

            .right_content_line{
				padding-left: calc(3rem*1.2);
				position: relative;
				padding-right: calc(3rem*1.2);
				margin-right: 2.4rem;
				.upload_centetn{
					// overflow-x: hidden;
					height: calc(100% - 4.4rem*1.2);
					padding-bottom: 4rem;

				}
				.upload_item{
					position: relative;
				}
				.upload_centetn::-webkit-scrollbar {
					display: none;
				}
				.upload_file_item_show{
					position: relative;
				}
				.upload_file_item_scale{
					position: absolute;
					width: 28rem;
					height: 14rem;
					z-index: 2;
					top: 100%;
					left: 50%;
					display: none;
					transform: translateX(-50%);
					border-radius: 4px;
					box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
					overflow: hidden;
					background: #fff;
					>div,>span{
						width: 50%;
					}
				}
				.upload_file_item_show:hover{
					border-bottom: none;
					.upload_file_item_scale{
						display: flex;
					}
				} 
				.fi-rr-square-plus,.fi-rr-picture{
					zoom: 4;
				}
                .upload_file_item{
                    // margin: 0 2rem 2rem 0;
					margin: 0;
                    // width: 16.5rem;
                    // height: 16.5rem;
					width: calc(12rem*1.2);
					height: calc(12rem*1.2);
                    border: 1px solid #F5F5F5;
                    vertical-align: top;
					display: flex;
					align-items: center;
					justify-content: center;
					
                     .upload_file_item_content{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        width: 100%;
                        position: relative;
                        cursor: pointer;

                        &:hover .delete_file_block{
                            display: block;
                        }

                        .upload_img{
                            display: block;
                            max-height: 100%;
                            max-width: 100%;
							object-fit: cover;
                        }

                        .delete_file_block{
                            display: none;
                            width: 100%;
                            height: calc(4rem*1.2);
                            background: rgba(0,0,0,0.2);
                            font-size: calc(1.6rem*1.2);
                            color: #FFFFFF;
                            line-height: calc(4rem*1.2);
                            text-align: center;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                        }
                    }
                }

                .upload_img_icon{
                    width: calc(4.6rem*1.2);
                }
				.upload_color{
					display: flex;
					width: calc(12rem*1.2);
					flex-wrap: wrap;
					justify-content: space-between;
					height: 25rem;
					overflow-y: auto;
					&.upload_color::-webkit-scrollbar {
						display: none;
					}
					.upload_color_item{
						width: calc(5rem*1.2);
						height: calc(5rem*1.2);
						position: relative;
						margin-bottom: calc(2rem*1.2);
						cursor: pointer;
						.upload_color_item_bg{
							width: calc(5rem*1.2);
							height: calc(5rem*1.2);
						}
						img{
							position: absolute;
							width: 100%;
							height: 100%;
							opacity: 0;
							top: 0;
						}
						// .upload_color_item_text{
						// 	font-size: 12px;
						// 	line-height: 1;
						// 	text-align: center;
						// }
						div{
						}
					}
				}
				.upload_color_btn{
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					white-space: nowrap;
					display: flex;
					align-items: center;
					height: 4rem;
					font-weight: 600;
					font-size: 1.8rem;
					>span{
						margin-right: 1rem;
					}
				}
				.color_setting_block{
					margin: auto;
					background: linear-gradient(70deg, #eee4f3, #f3f4e6);

					border-radius: calc(1rem*1.2);
					overflow: hidden;
					// box-shadow: 2px 2px 8px #000;
					box-shadow: 2px 2px 8px rgba(0,0,0,.3);
					.vc-chrome{
						background: rgba(0,0,0,0);
						box-shadow:none;
					}
					.chrome_color{
						// width: calc(17.5rem*1.2);
						width: 24rem;
						// height: 16.5rem;
						overflow: hidden;

						.vc-chrome-saturation-wrap{
							height: 100%;
							// width: calc(16rem*1.2);
							width: 100%;
							height: calc(14rem*1.2);
							max-height: calc(17rem*1.2);
							max-width: calc(17rem*1.2);
							margin: calc(.7rem*1.2) auto;
							padding-bottom: 0;
						}
						.vc-chrome-body{
							padding: 0;
							width: 90%;
							margin: calc(0.5rem*1.2) auto;
							margin: 0 auto;
							background: rgba(0,0,0,0);
							margin-bottom: calc(1rem*1.2);
							// 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: 0rem;
										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: calc(1.1rem*1.2);
										height: calc(2.1rem*1.2);
									}
								}
								.ant-upload-list{
									
								}
								.vc-sketch-color-wrap{
									background-image: url(@../../../../assets/images/homePage/dropper.png);
									// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
									// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
									// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
									background-size: calc(1.5rem*1.2);
									background-repeat: no-repeat;
									background-position: 50%;
									cursor: pointer;
									margin: 0;
									width: calc(2.2rem*1.2);
									height: calc(2.2rem*1.2);
									padding: calc(.7rem*1.2);
									border: 1px solid;
									position: absolute;
									bottom: calc(-.5rem*1.2);
									right: calc(.5rem*1.2);
									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;
									margin-left: calc(2rem*1.2);
									width: auto;
									.vc-chrome-active-color,.vc-checkerboard{
										width: calc(3rem*1.2);
										height: calc(3rem*1.2);
										border-radius: 50%;
									}
								}
								.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
									.vc-hue{
										border-radius: 15px;
									}
									.vc-alpha{
										border-radius: 15px;
										overflow: hidden;
									}
									height: calc(1rem*1.2);
									.vc-hue-picker{
										width: calc(1.4rem*1.2);
										height: calc(1.4rem*1.2);
									}
									.vc-alpha-picker{
										width: calc(1.4rem*1.2);
										height: calc(1.4rem*1.2);
										transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
									}
								}
								.vc-chrome-alpha-wrap{
									display: none;
								}
								.vc-chrome-hue-wrap{
									margin-bottom: .5rem;
								}
							}
						}
						.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 #39215b;
									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;
										width: 1rem;
										height: 1rem;
										border-radius: 50%;
										background: #39215b;
									}
								}
							}
						}
						.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;
						}
					}
				}
                .get_color_block{
                    display: flex;
					flex-direction: column;
                    .get_color_input{
                        width: calc(19.4rem*1.2);
                        height: calc(3.8rem*1.2);
                        background: #FFFFFF;
                        border: 0.1rem solid #DCDCEC;
                        padding: calc(1rem*1.2) calc(1.3rem*1.2);
                        box-sizing: border-box;
                        font-size: calc(1.4rem*1.2);
                        text-align: left;

                        &::placeholder {
                            color: #B7B7B7;
                        }
                    }
                    
                    .get_color_button{
                        margin-top: calc(1.5rem*1.2);
                        padding: 0 calc(2.2rem*1.2);
                        height: calc(3.2rem*1.2);
                        background: #EFEEFF;
                        display: inline-block;
                        line-height: calc(3rem*1.2);
                        font-size: calc(1.2rem*1.2);
                        color: #343579;
                        vertical-align: middle;
                        cursor: pointer;

                        .fi-br-fill{
                            margin-right: calc(0.5rem*1.2);
                            color:#343579;
                            vertical-align: middle;
                        }

                        .get_color_des{
                            vertical-align: middle;
                        }
                    }
					.get_color_bg{
						width: calc(18rem*1.2);
						height: calc(18rem*1.2);
						position: relative;
						left: 50%;
						transform: translateX(-50%);
						margin-top: calc(1.5rem*1.2);
						img{
							opacity: 0;
							position: absolute;
							top: 0;
							width: 100%;
							height: 100%;
						}
					}
                }
            }

            .upload_item{
                margin-bottom: calc(2rem*1.2);
				.ant-upload-picture-card-wrapper{
					.ant-upload-list{
						.ant-upload-select-picture-card{
							// margin: 0 2rem 2rem 0;
							margin: 0;
							display: inline-block;
							width: calc(12rem*1.2);
							height: calc(12rem*1.2);
							border: 1px solid #F5F5F5;
							vertical-align: top;
							i{
								zoom: 4;
							}
						}
					}
				}
            }
        }
    }
}
</style>
