<template>
	<div class="detail_modal_body_select">
		<div v-show="(type_ == 1 || type_ == 2) && select == true">
			<div class="detail_uploadLibrary">
				<div class="switch_type_list">
				<div
					@click.stop="open(1)"
					class="switch_type_item"
					:class="[openClick == 1 ? 'select_swtich' : '']"
				>
					<span>{{ $t('DesignDetailAlter.Upload') }}</span>
				</div>
				<div
					@click.stop="open(2)"
					class="switch_type_item"
					:class="[openClick == 2 ? 'select_swtich' : '']"
				>
					<span>{{ $t('DesignDetailAlter.Library') }}</span>
				</div>
			</div>
				<div v-show="openClick == 2" class="detail_Library">
					<div class="content_search_block">
						<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
						<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
					</div>
					<!-- clothesPrint -->
				</div>
			</div>
			<div v-show="openClick == 1"  class="detail_Upload_item">
				<div class="moodboard_body">
					<div class="upload_img_body scroll_style">
						<div class="upload_item">
							<div
								class="upload_file_item"
								v-for="(file, index) in uploadList"
								:key="file"
								@click.stop="selectImgItem(file)"
							>
								<div
									class="upload_file_item_content"
									v-show="file?.status === 'uploading'"
								>
									<a-spin :indicator="indicator" tip="Uploading..." />
								</div>
								<div
									class="upload_file_item_content"
									v-show="file?.status === 'done'"
								>
									<img :src="file?.url" class="upload_img" />
									<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
										<div class="select_img_type">
											<div
												class="select_category"
												@click.stop="showFileCategory(file)"
											>
											{{ current.type }}
											</div>
										</div>
									</div>
									<div
										class="delete_file_block"
										@click.stop="deleteFile(index)"
									>
										<span class="icon iconfont icon-shanchu"></span>
									</div>
								</div>
							</div>
							<div
								class="upload_file_item upload_component"
								v-show="uploadList.length != 8"

							>
								<a-upload
									:action="uploadUrl + '/api/element/upload'"
									list-type="picture-card"
									:data="{
										...upload,
									}"
									:headers="{ Authorization: token }"
									v-model:file-list="uploadList"
									:before-upload="beforeUpload"
									:maxCount="8 - uploadList.length"
									accept=".jpg,.png,.jpeg,.bmp"
									@change="(file) => upFileUploadChange(file)"
								>
									<div
										class="upload_tip_block"
										v-show="uploadList.length != 8"
									>
										<i class="fi fi-br-upload"></i>
										<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
									</div>
								</a-upload>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-show="openClick == 2" class="detail_Library_item">
                <div class="material_content_body scroll_style">
                    <div class="content_img_item" v-for="(file) in clothesList" :key="file.id"  :class="{active:selectCode !== 'Moodboard'}">
                        <div class="content_img_item_block" :class="{active:file?.checked}">
                            <img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
							<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
								<div class="select_img_type">
									<div
										class="select_category"
										@click.stop="showFileCategory(file)"
									>
										{{ file.level2Type }}
										<div
											:class="[
												'icon',
												'iconfont',
												'icon-xiala',
												file.categoryShow
													? 'icon_rotate'
													: '',
											]"
										></div>
									</div>
									<div
										class="category_list"
										v-show="file.categoryShow"
									>
										<div
											:class="[
												'category_item',
												file.level2Type == cate.value
													? 'select_category_item'
													: '',
											]"
											v-for="(
												cate, index
											) in disignTypeList"
											:key="index"
											@click.stop="selectFileCategory(file, cate)"
										>
											{{ cate.label }}
										</div>
									</div>
								</div>
							</div>
                        </div>
                    </div>
					<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
						<img src="@/assets/images/homePage/loading.gif" alt="">
					</div>
                </div>
                <div class="no_data_block loading_block" v-show="isShowLoading">
                    <a-spin size="large"></a-spin>
                </div>
             
            </div>
		</div>
	
		<div v-show="type_ == 3 && select == true">
			<div class="detail_color">
                <div class="right_content_line">
                    <div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('DesignDetailAlter.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('DesignDetailAlter.HEX') }}
								</div>
								<div v-show="!colorBlockHex">
									{{ $t('DesignDetailAlter.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>
                </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('DesignDetailAlter.AutoRecognize') }}</span>
                    </div>
					<div class="upload_centetn">
						<div class="upload_item">
							<div class="upload_file_item" v-for="(file) in colorFileList" :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="colorDeleteFile(index)">{{ $t('DesignDetailAlter.Delete') }}</div>
								</div>
							</div>
							<a-upload
								v-show="colorFileList.length < 1"
								list-type="picture-card"
								:customRequest="function(){}"
								@change="fileUploadChange"
								:before-upload="beforeUpload"
								accept=".jpg,.png,.jpeg,.bmp"
								>
								<div  class="upload_tip_block">
									<i class="fi fi-rr-picture"></i>
								</div>
							</a-upload>
						</div>
						<div class="upload_color">
							<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
								<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 src="#" :title="pantongNameList[index]">
							</div>
						</div>
					</div>
                    
                   
                </div>
				<div class="right_content_line">
					<div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('DesignDetailAlter.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="get_color_des"></span>
                        </div>
                    </div>
				</div>
            </div>
		</div>
	</div>
		<!-- <div class="detail_modal_body_result"></div> -->
	<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
</template>
<script>
import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n';
export default defineComponent({
    props: ["msg"],
    components:{
        Draggable,Sketch,DesignDetailEnd
    },
    setup(prop) {
        const store = useStore();
		let type_ = ref(1);
		let select = ref(false);
        let current = inject('current')//父组件传过来的数据
		let openClick = ref(1);
		let searchPictureName = ref('')
		//模型印花
		let disignTypeList = [
                {
                    value: "Outwear",
                    label: "Outwear",
                },
                {
                    value: "Blouse",
                    label: "Blouse",
                },
                {
                    value: "Dress",
                    label: "Dress",
                },
                {
                    value: "Trousers",
                    label: "Trousers",
                },
                {
                    value: "Skirt",
                    label: "Skirt",
                },
            ]
		let total = ref(0)
        let pageSize = ref(10)
        let currentPage = ref(1)

		let isShowLoading = ref(false)
		let clothesList = ref([])
		let uploadList = ref([])
		let apparelList = ref([])
		let printList = ref([])
		let selectCode = ref('Sketchboard')
		//颜色
		let selectColor = ref({
			rgba:{},
		}) //顔色选择器默认颜色
		let selectColorList = ref({
		})
		let workspace = ref({})

		let {t} = useI18n()
        return{
            store,
            current,
			openClick,
			searchPictureName,
			disignTypeList,
			total,
			pageSize,
			currentPage,
			isShowLoading,
			clothesList,
			uploadList,
			apparelList,
			printList,
			selectCode,

			type_,
			select,
			selectColor,
			selectColorList,
			workspace,
			t,
        }
    },
	
    data(){
        return{

            token: "",
			uploadUrl:'',
			upload: {
                isPin: 0,
                level1Type: 'Sketchboard',
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },

			indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            designShowPrview:1, //展示图片预览步骤
			//颜色
            reviewColor:{}, //预览的颜色
			colorPickerVisible: true,
			colorBlockHex:true,
			getColorBg:false,
			pantongName:'',//潘通值
			pantongNameList:[],
            tcxColor:'',
			selectColorList: [],
			colorFileList: [],
			selectIndex:0,
			indicator : h(LoadingOutlined, {
                style: {
                    fontSize: '2.4rem',
                },
                spin: true,
            }),
			getPantongNameTime:true,
			workspaceCom:{}
        }
    },
	directives:{
		observe:{
			mounted (el,binding) {
				// console.log(binding.instance);
				const ob = new IntersectionObserver(callback,{
					root:null,
					threshold:[.5]
				})
				ob.observe(el)
				// this.currentPage = 1
				// this.pageSize = 12
				let this_ = binding.instance
				function callback(entries, observer) {
					entries.forEach((entry) => {
						if (entry.isIntersecting) {
							this_.getLibraryList()
						} else {
						}
					});
				}
			},
		},
	},
	computed:{
		getSketchLabel(value) {
            return (value) => {
                let lable = "";
                for (let item of this.disignTypeList) {
                    if (item.value === value) {
                        lable = item.label;
                        break;
                    }
                }
                return lable;
            };
        },
		
        getSelectRGB(selectColor){
			
            return (selectColor)=>{
                let rgba = selectColor.rgba
                let data = {
                    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
            }
        },
    },
	mounted(){
	},
	watch:{
        selectColor(newVal,oldVal){
			let DesignDetailEnd = this.$refs.DesignDetailEnd
            DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
            let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
            this.setColorboardList(colorList)


			clearInterval(this.getPantongNameTime)
			this.getPantongNameTime = setTimeout(() => {
				this.getPantongName(newVal.rgba)
			}, 100);
        },
		workspaceCom(newVal,oldVal){
			this.workspace = newVal
			this.getPosition()
		},
    },
	mounted () {
		this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
		let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-sketch-color-wrap')[0]
		dropperDom.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.error(this.t('DesignDetailAlter.jsContent1'))
			}
		})
	},
    methods:{
		//点击判断
		init(num){
			this.type_ = num
			this.select = true
			let arr = this.current.color
			// if(!arr[3]){
			// 	arr[3] = 1
			// }
			this.selectColor = {
				rgba:{
					r:Number(arr.r),
					g:Number(arr.g),
					b:Number(arr.b),
					a:Number(arr.a?arr.a:1),
				},
				hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
			}
			this.uploadList = []
			if (num == 1) {
				this.selectCode = 'Sketchboard'
				this.upload.level1Type = 'Sketchboard'
				this.uploadList = this.apparelList
			}else if (num == 2){
				this.selectCode = 'Printboard'
				this.upload.level1Type = 'Printboard'
				this.uploadList = this.printList
			}
			if(num == 1 || num == 2){
				this.clothesList = []
				this.getLibraryList()
			}
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			DesignDetailEnd.init(num)
			this.workspaceCom = computed(()=>{
				return  this.store?.state?.Workspace?.workspace
			})
		},
		getPosition(){
			let params
			if(this.workspace.sex == 'Female'){
				params = 'FemalePosition'
			}else{
				params = 'MalePosition'
			}
			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv) => {
				if (rv) {
					let arr = []
					rv.forEach((item) => {
						let obj = {
							value:item.name,
							label:item.name,
						}
						arr.push(obj)						
					});
					this.disignTypeList = arr
				}
			})
		},
		deleteFile(num){
            this.uploadList.splice(num, 1)
		},
		upFileUploadChange(data) {
            let file = data.file;
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
                file.id = res.data.id;
                file.url = res.data.url;
                file.resData = res.data;
				file.designType = res.data.designType
                file.category = this.current;
                let fileList = this.uploadList.filter(
                    (v) => v.status === "done"
                );
                if (this.uploadList.length >= 8) {
                    message.warning(this.t('DesignDetailAlter.jsContent2'));
                } else {
                    // this.store.commit("setSketchboardFile", fileList);
					this.uploadList = fileList
                    // this.store.commit("clearMoodTemplateId");
					if(this.selectCode == 'Sketchboard'){
						this.apparelList = this.uploadList
					}else{
						this.printList = this.uploadList
					}
                }
            } else if (file.status === "error") {
                let index = -1;
                this.uploadList.forEach((ele, index1) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    this.uploadList.splice(index, 1);
                }
                message.warning(file.name + this.t('DesignDetailAlter.jsContent3'));
            }
			
        },

		//关闭
		terminate(){
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			this.select = false
			DesignDetailEnd.selectIndex = 0
			DesignDetailEnd.type_ = 0
			this.colorFileList = []
			this.selectColorList = []
		},

		//切换整体衣服
		changePlace(){
			this.uploadList = []
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			this.uploadList = []
			this.apparelList = []
			this.printList = []
			DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
			DesignDetailEnd.sketchImg={}
			this.terminate()
		},
		// this.getLibraryList('Moodboard')
		// this.getLibraryList('Printboard')

		showFileCategory(file) {
            file.categoryShow = true;
            document.addEventListener("click", this.hiddenFileCategory);
        },
		 selectFileCategory(file, cate) {
			file.level2Type = cate.value;
			 for (let item of this.clothesList) {
                item.categoryShow = false;
            }
			this.setSketchLibrary(file)
        },
		hiddenFileCategory() {
            for (let item of this.clothesList) {
                item.categoryShow = false;
            }
            document.removeEventListener("click", this.hiddenFileCategory);
        },
		setSketchLibrary(item){
			let data = {
				libraryId:item.id,
				level2Type:item.level2Type,
			}
			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
                (rv) => {
                }
            ).catch((res)=>{
            });
		},
		selectImgItem(imgData){
			if(this.selectCode == 'Sketchboard'){
				// this.current.id_ = imgData.id
				// this.current.path = imgData.url
				let DesignDetailEnd = this.$refs.DesignDetailEnd
				DesignDetailEnd.setSketchImg(imgData)
				// DesignDetailEnd.sketchImg.id_ = imgData.id
				// DesignDetailEnd.sketchImg.path = imgData.url
			}else{
				this.current.printObject.path = imgData?.url
				this.current.printObject.id = imgData?.id
				this.current.printObject.minIOPath = imgData.minIOPath
				this.current.printObject.prints = [{
					minIOPath:imgData.minIOPath,
					path:imgData?.url
				}]

				// console.log(this.current.printObject,imgData); 
			}
        },
		//请求我的印花&&模型
		getLibraryList(){
			let workspace = this.store.state.Workspace.workspace
            let data = {
                level1Type:this.selectCode,
                // level2Type:this.designType,
				modelSex:workspace?.sex,
                page:this.currentPage,
                pictureName:this.searchPictureName,
                size:this.pageSize+this.clothesList.length,
            }
            this.isShowLoading = true

            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                (rv) => {

					this.clothesList = rv.content
                    this.isShowLoading = false
                    this.total = rv.total
                }
            ).catch((res)=>{
                this.isShowLoading = false
            });
        },

		//衣服
		open(num) {
            this.openClick = num;
			if(num ==2 ){
				this.getLibraryList()
			}
        },

		//印花
		



		//颜色
		beforeUpload(file){
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.warning(this.t('DesignDetailAlter.jsContent4'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.warning(this.t('DesignDetailAlter.jsContent5'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
		 //清除当前的颜色
		colorDeleteFile(index){
            this.colorFileList.splice(index, 1)
			this.selectColorList = []
        },
		setUplpadColor(color){
			this.selectColor  = color
		},
		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;
        },
        //通过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)
			})
			Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
                (rv) => {
					if(rv){
						rv.forEach(element => {
							this.pantongNameList.push(element.name) 
						});
					}
                }
            ).catch(res=>{
            });
        },

   //通过tcx获取颜色
		getTcxColor(){
            if(!this.tcxColor){
                return
            }
			let DesignDetailEnd = this.$refs.DesignDetailEnd

            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
                    DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
                    this.pantongName = rv.name
                    let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
                    this.setColorboardList(colorList)
					this.getColorBg = true
                }else{
                    message.warning(this.t('DesignDetailAlter.jsContent6'))
                }
            })
        },
			//查询颜色的潘通值和txc
		getPantongName(v) {
			if(!v.r){
				return
			}
			let color = [v.r, v.g, v.b];
			let hsv = rgbToHsv(color);
			let data = [{
				h: hsv[0],
				s: hsv[1],
				v: hsv[2],
			}]
			return new Promise((resolve, reject) => {
				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
					.then((rv) => {
						if (rv) {
							this.selectColor.tcx = rv[0].tcx
							this.selectColor.name = rv[0].name
							resolve();
						}
					})
					.catch((res) => {
						reject();
					});
			});
		},
		setColorboardList(colorList){
			
            let  newColorList = colorList.map((v)=>{
                let data = {
                    id:'',
                    name:'',
                    rgbValue:v
                }
				
                return data
            })

        },
        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.colorFileList.push(file)

				setTimeout(async ()=>{
					const img = new Image();
					let colorImage = this.$refs.colorImage
					img.src = colorImage[0].src;

					img.onload = async () => {
						const colorThief = new ColorThief();
						// let domImg = colorImage[0];
						// let color = colorThief.getColor(img)
						// let colorHex = this.rgbaToHex(color)
						let selectColorList = [];
						let selectColor = colorThief.getPalette(img,8)
						//排序
						let obj = {
							max : 5,
							min: 5,
						}
						let colorSort
						await GO.setColor(selectColor,file.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}
					};
                    
				
                },100)
            };
            // 转化为base64S
            reader.readAsDataURL(fileData)
        },
    }
})
</script>
<style lang="less">

.detail_modal_body_select{
	width:  20%;
	>div{
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	i{
		font-size: 1.8rem;
		display: block;
	}
	.detail_uploadLibrary{
		.switch_type_list {
			margin-bottom: 1rem;
    margin-top: -1rem;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-around;

		.switch_type_item {
			display: flex;
			align-items: center;
			// padding: 0 2rem;
			height: 4rem;
			background: #fff;
			border-radius: 0.8rem;
			line-height: 4rem;
			font-size: 1.6rem;
			// margin-right: 2.2rem;
			color: #000;
			cursor: pointer;
			position: relative;
			text-align: center;
			transform-origin: left;
			transform: scale(1);
			transition: 0.3s all;
			&.switch_type_item::before {
				position: absolute;
				content: "";
				display: block;
				background: #000;
				height: .3rem;
				left: 50%;
				transform: translateX(-50%);
				bottom: .6rem;
				width: 0px;
				transition: 0.3s all;
			}
			&.select_swtich {
				color: #000;
				font-weight: 600;
				transform: scale(1.15);
			}
			&.select_swtich::before {
				width: 100%;
			}

			.switch_icon {
				font-size: 1.8rem;
				margin-right: 0.8rem;
			}
		}
	}
	
	
	}
	.detail_Library{
		.content_search_block{
                display: flex;
				margin-bottom: 1rem;

                .search_input{
                    width: 15rem;
                    padding-left: 1.5rem;
                    // height: 4rem;
                    // line-height: 3.8rem;
                    // background: #FFFFFF;
                    border: 0.1rem solid #F1F1F1;
                    // font-size: 1.6rem;
					font-size: 1.2rem;
                    font-weight: 400;
					height: 3rem;

                    &::placeholder {
                        color: #C2C2C2;
                    }
                }

                .search_icon_block{
                    width: 5rem;
                    height: 3rem;
                    line-height: 3rem;
                    text-align: center;
                    background: #343579;
                    cursor: pointer;

                    .icon-sousuo{
                        font-size: 2rem;
                        color: #FFFFFF;
                    }
                }
            }
	}
	
	.detail_Library_item,.detail_Upload_item{
            width: 100%;
            // height: calc(100% - 19rem);
			flex: 1;
			overflow: hidden;
            position: relative;
			&.generate::-webkit-scrollbar{display: none;}
			>div{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: flex-start;
				overflow-X: hidden;
				height: 100%;
				&.scroll_style::-webkit-scrollbar{display: none;}

			}
			.material_content_list_loding{
				text-align: center;
				width: 100%;
				img{
					height: 10rem;
				}
			}
            .content_img_item{
                display: inline-block;
                vertical-align: top;
                // padding: 0 1.4rem;
                // margin-bottom: 2.8rem;
				margin-bottom: 2rem;
				padding: 0;
				// height: 9rem;
				&.active{
					margin-bottom: 2rem;
					.pin_block{
						display: block;
					}
				}
				.pin_block{
					display: none;
				}
                .content_img_item_block{
                    // border: 0.1rem solid transparent;
					width: 10rem;
					height: 10rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    cursor: pointer;
					&.active{
						opacity: .5;
						img{
							transform: scale(.9);
						}

					}
					
                    &.select_item_img{
                        // border-color: #343579;
                    }

                    .print_content_img{
                        width: 100%;
                        height: 100%;
                    }

                    .content_img{
                        max-width: 100%;
                        max-height: 100%;
                    }
					.operate_file_block{
						height: 1.5rem;
						.select_img_type{
							line-height: 1;
							.select_category{
								zoom: .6;
								height: 100%;
								.icon-xiala{
									zoom: .8;
								}
							}
							.category_list{
								margin-top: .1rem;
								.category_item{
									zoom: .7;
								}
							}
						}
					}

                }
                .content_img_name{
                    width: 16.5rem;
                    height: 3.5rem;
                    line-height: 3.5rem;
                    white-space: nowrap;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 1.4rem;
                    color: #030303;
                }
            }
			.upload_img_body{
				width: 100%;
				.upload_item{
					justify-content: space-between;
				}
			}
			
			.moodboard_body{
				.upload_file_item{
					margin: 0;

					margin-bottom: 2rem;
					width: 9rem;
					height: 9rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
				.upload_file_item_content{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                position: relative;
                cursor: pointer;
                .upload_img{
                    display: block;
                    max-height: 100%;
                    max-width: 100%;
					object-fit: cover;
                }
				.operate_file_block .select_img_type .select_category{
					zoom: .8;
				}
                .delete_file_block{
                    display: none;
                    width: 3.2rem;
                    height: 3.2rem;
                    background: rgba(0,0,0,0.6);
                    border-radius: 0.4rem;
                    position: absolute;
                    top: 0.9rem;
                    right: 0.9rem;
                    text-align: center;
                    line-height: 3.2rem;
					left: auto;
                    .icon-shanchu{
                        font-size: 1.6rem;
                        color: #fff;
                    }
                }

                &:hover .delete_file_block{
                    display: block;
                }

               
            }
			}
            
			}
			
	}

	.detail_color{
		// height: calc(100% - 5.4rem);
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		.right_content_line{
			position: relative;
			margin-bottom: 1rem;
			.upload_right_header{
				display: flex;
				margin-bottom: 1rem;
				margin-top: 1rem;
				&.upload_right_header:nth-child(1){
					margin-top: 0;
				}
				span{
					margin-left: 1rem;
					font-size: 1.8rem;
					color: #000000;
				}
			}
			.upload_centetn{
				// overflow-x: hidden;
			}
			.upload_centetn::-webkit-scrollbar {
				display: none;
			}
			.color_review_block{
				margin-right: 4rem;

				.color_review_content{
					width: 16.5rem;
					height: 16.5rem;
					background: #FFFFFF;
					border: 0.1rem solid #DCDCEC;
				}

				.pantong_name{
					margin-top: 1rem;
					font-size: 1.6rem;
					font-weight: 400;
					color: #030303;
					text-align: left;
					font-weight: bold;
				}

				.clear_button{
					padding:  0 2.8rem;
					height: 3.2rem;
					line-height: 3.2rem;
					background: #EFEEFF;
					font-size: 1.2rem;
					font-family: Roboto;
					color: #343579;
					display: inline-block;
					margin-top: 1rem;
					cursor: pointer;
				}
			}

			.upload_file_item{
				// margin: 0 2rem 2rem 0;
				margin: 0;
				display: inline-block;
				// width: 16.5rem;
				// height: 16.5rem;
				width: 6rem;
				height: 6rem;
				border: 1px solid #F5F5F5;
				vertical-align: top;

					.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: 4rem;
						background: rgba(0,0,0,0.2);
						font-size: 1.6rem;
						color: #FFFFFF;
						line-height: 4rem;
						text-align: center;
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
			}

			.upload_img_icon{
				width: 4.6rem;
			}
			.upload_color{
				display: flex;
				width: 100%;
				justify-content: flex-start;
				flex-direction: row;
				flex-wrap: nowrap;
				height: 2rem;
				.upload_color_item{
					width: 2rem;
					height: 2rem;
					position: relative;
					cursor: pointer;
					margin-right: 1rem;
					.upload_color_item_bg{
						width: 2rem;
						height: 2rem;
					}
					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{
					}
				}
			}
			.color_setting_block{
				// width: 16.5rem;
				width: 18rem;
				margin: auto;
				background: #f0eaee;

				border-radius: 1rem;
				overflow: hidden;
				// box-shadow: 2px 2px 8px #000;
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
				.sketch_color{
					box-shadow: none;
					width: 18rem;
					background: rgba(0,0,0,0);
					padding-top: 1rem !important;
					padding: 0;
					.vc-sketch{
					}
					.vc-sketch-saturation-wrap{
						width: 16rem;
						height: 16rem;
						max-height: 17rem;
						max-width: 17rem;
						margin: auto;
						padding-bottom: 0;
					}
					.vc-sketch-presets{
						display: none;
					}
					.vc-botton-container{
						display: none;
					}
					.vc-chrome-body{
						display: none;
					}
					.vc-sketch-field{
						display: none;
						.vc-input__input{
							text-align: center;
							padding: .4rem 0;
							border-radius: 5px;
						}
					}
					.vc-sketch-color-wrap{
						border-radius: 5px;
						box-shadow: inset 0 0 0 1px #ccc;
						.vc-sketch-active-color{
						}
						.vc-sketch-active-color{
							display: none;
						}
						.vc-checkerboard{
							display: none;
						}
					}
					
					.vc-sketch-color-wrap{
						background-image: url(@../../../../assets/images/homePage/dropper.png);
						background-size: 1.5rem;
						background-repeat: no-repeat;
						background-position: 50%;
						cursor: pointer;

					}
					// .vc-sketch-color-wrap{
					// 	display: none;
					// }
					.vc-sketch-controls{
						width: 90%;
						margin: .5rem auto;
						.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
							.vc-hue{
								border-radius: 1.5rem;
							}
							.vc-alpha{
								border-radius: 1.5rem;
								overflow: hidden;
							}
						}
						.vc-sketch-alpha-wrap{
							margin-top: .5rem;
						}
					}
				}
				.chrome_color{
					width: 16.5rem;
					height: 16.5rem;
					overflow: hidden;

					.vc-chrome-saturation-wrap{
						height: 100%;
					}
					.vc-chrome-saturation-wrap .vc-saturation-circle{
						width: 1rem;
						height: 1rem;
					}
				}

				.sileder_color{
					margin-top:1.3rem;

					.vc-slider-swatches{
						display:none
					}
					.vc-slider-hue-warp {
						width: 16.5rem;
						height: 2.4rem;
						border-radius: 1.2rem;
						overflow: hidden;

						.vc-hue-picker{
							width: 1.4rem;
							height: 1.4rem;
							border-radius: 50%;
							transform: translate(-0.7rem, -0.2rem);
						}
					}
					.vc-hue-pointer{
						top: 0.5rem !important;
					}
					
				}

				.color_block{
					// margin-top: 1rem;
					// display: flex;
					// justify-content: space-between;
					// font-size: 1.6rem;
					width: 100%;
					padding: 0 5%;
					padding-bottom: 5%;
					margin: 0.5rem auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.color_right{
						width: 11rem;
						font-size: 1,2rem;
						color: #666666;
						.color_rgb_block{
							display: flex;
							.rgb_item{
								margin-left: .2rem;
							}
						}
					}
					.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: .2rem .5rem;
							box-shadow: inset 0 0 0 1px #ccc;
							border-radius: .4rem;
							justify-content: space-around;
							text-transform:uppercase;
							.color_block_bg{
								width: 1.5rem;
								height: 1.5rem;
								// margin-right: .5rem;
								display: flex;
								justify-content: space-between;
							}
						}
						.color_block_bg{
						}
					}
					
				}
			}

			.get_color_block{
				display: flex;
				flex-direction: row;
				.get_color_input{
					width: 15rem;
					height: 2.8rem;
					background: #FFFFFF;
					border: 0.1rem solid #DCDCEC;
					padding: 1rem 1.3rem;
					box-sizing: border-box;
					font-size: 1.4rem;
					text-align: left;

					&::placeholder {
						color: #B7B7B7;
					}
				}
				
				.get_color_button{
					padding: 0 .2rem;
					height: 2.8rem;
					background: #EFEEFF;
					display: inline-block;
					line-height: 3rem;
					font-size: 1.2rem;
					color: #343579;
					vertical-align: middle;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					.icon-huoquduixiang{
						margin-right: 0.5rem;
						font-size: 2rem;
						color:#343579;
						vertical-align: middle;
					}

					.get_color_des{
						vertical-align: middle;
					}
				}
				
			}
		}

		.upload_item{
			margin-bottom: .5rem;
			display: flex;
			justify-content: center;
			.ant-upload-picture-card-wrapper{
				.ant-upload-list{
					display: flex;
					justify-content: center;
					.ant-upload-select-picture-card{
						// margin: 0 2rem 2rem 0;
						margin: 0;
						display: inline-block;
						width: 6rem;
						height: 6rem;
						border: 1px solid #F5F5F5;
						vertical-align: top;
						i{
							zoom: 1.2;
						}
					}
				}
			}
		}
	}
}

   
</style>