aida_front/src/component/Detail/DesignDetailAlter.vue

<template>
	<div class="detail_modal_body_select">
		<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
			<div class="detail_uploadLibrary">
				<div v-show="type_ == 4" style="font-size:1.5rem; margin:1rem 0">{{ $t('LibraryPage.generated') }}</div>
				<div class="switch_type_list" v-show="type_ != 4">
					<div
						@click.stop="open(1)"
						class="switch_type_item"
						:class="[openClick == 1 ? 'select_swtich' : '',]"
						:style="{cursor:type_==4?'no-drop':''}"
					>
						<span>{{ $t('DesignDetailAlter.Upload') }}</span>
					</div>
					<div
						@click.stop="open(2)"
						class="switch_type_item Guide_1_21"
						:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
					>
						<span>{{ $t('DesignDetailAlter.Library') }}</span>
					</div>
				</div>
				<div v-show="openClick == 2" class="detail_Library">
					<div class="select_block">
						<a-select
							v-model:value="designType"
							:options="designTypeList"
							@change="handleChange"
							:fieldNames="{ label: 'name', value: 'value' }"
						>
							<template #suffixIcon
								><span
									class="icon iconfont icon-xiala"
									style="color: #343579"
								></span
							></template>
						</a-select>
					</div>
					<div class="content_search_block" v-show="type_ != 4">
						<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" />
									<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="designTypeList" :generateList="uploadList" :item="file" ></sketchCategory>
									<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"
									:capture="null"

									:data="{
										...upload,
									}"
									:headers="{ Authorization: token }"
									v-model:file-list="uploadList"
									:before-upload="beforeUpload"
									:maxCount="8"
									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 Guide_1_22" :class="[driver__.driver?'showEvents':'']">
                <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)"/>
							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
                        </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> -->
                        <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 class="color_setting_operateSingle">
							<!-- <div class="started_btn" @click="setOperate">
								{{ colorList[selectIndex]?.gradient?.gradientList?.length>1? 'Gradual Change':'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>
								</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>

                <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.UploadImage') }}</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
								:capture="null"
								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 :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="fi fi-br-fill"></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, Chrome} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from 'vue-i18n';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";

export default defineComponent({
    props: ["msg"],
    components:{
        Draggable,Sketch,DesignDetailEnd,Chrome,sketchCategory
    },
    setup(prop) {
        const store = useStore();
		let type_ = ref(1);
		let select = ref(false);
        let current = inject('current')//父组件传过来的数据
        let driver__ = inject('driver__')//父组件传过来的数据
        let body = inject('body')//父组件传过来的数据
		let openClick = ref(1);
		let searchPictureName = ref('')
		
		
		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 designTypeList = ref([])
		let printCatecoryList = computed(()=>{
			return store.state.UserHabit.printType
		})
		let designType = ref('')
		//颜色
		let selectColor = ref({
			rgba:{},
		}) //顔色选择器默认颜色
		let selectColorList = ref({
		})
		let workspace = ref({})
		let sketchCatecoryList = computed(()=>{
			return store.state.Workspace.workspacePosition
		})
		let designElementsType = computed(()=>{
			return store.state.UserHabit.designElementsType;
		})
		let colorList = ref([{},{},{},{},{},{},{},{},{}])
		let selectIndex = ref(0)
		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,
		})
		provide('colorList',colorList)
		provide('selectIndex',selectIndex)
		provide('designTypeList',designTypeList)
		let {t} = useI18n()
        return{
            store,
            current,
			openClick,
			searchPictureName,
			total,
			pageSize,
			currentPage,
			isShowLoading,
			clothesList,
			uploadList,
			apparelList,
			printList,
			selectCode,

			designTypeList,
			printCatecoryList,
			designType,

			type_,
			select,
			selectColor,
			selectColorList,
			workspace,
			driver__,
			body,
			sketchCatecoryList,
			designElementsType,
			colorList,
			selectIndex,
			gradient,
			t,
        }
    },
	
    data(){
        return{

            token: "",
			uploadUrl:'',
			upload: {
                isPin: 0,
				gender:'',
                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: [],
			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
				// currentPage
				let this_ = binding.instance
				function callback(entries, observer) {
					entries.forEach((entry) => {
						if (entry.isIntersecting && !this_.isShowLoading) {
							this_.getLibraryList()
						} else {
						}
					});
				}
			},
		},
	},
	computed:{
		
		
        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
            }
        },
		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}`
			}
			
		}
    },
	mounted(){
	},
	watch:{
        // selectColor(newVal,oldVal){
        //     this.colorList[this.selectIndex] = newVal
        //     let colorList = this.colorList.filter((v) => v && Object.keys(v).length)


		// 	clearInterval(this.getPantongNameTime)
		// 	this.getPantongNameTime = setTimeout(() => {
		// 		this.getPantongName(newVal.rgba)
		// 	}, 100);
        // },
		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
				this.colorList[this.selectIndex].hex = newVal.hex
				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,
					}
				}
				// console.log(JSON.parse(JSON.stringify(this.colorList)),JSON.parse(JSON.stringify(newVal)));
				clearInterval(this.getPantongNameTime)
				this.getPantongNameTime = setTimeout(() => {
					this.getPantongName(newVal.rgba,-1)
				}, 100);
			},
			immediate: true
		},
		workspaceCom(newVal,oldVal){
			this.workspace = newVal
			this.upload.gender = newVal?.sexEnum?.value
		},
    },
	mounted () {
		this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
		nextTick().then(()=>{
			const backIcon = document.createElement('div');
			backIcon.classList.add('vc-sketch-color-wrap')
			let dropperDom = document.getElementsByClassName("detail_modal_body_select")?.[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}
					// return `rgb(${r}, ${g}, ${b})`;
					// box.style.backgroundColor = label.textContent = result.sRGBHex;
				} catch (e) {
					message.info(this.t('DesignDetailAlter.jsContent1'))
				}
			})
		})
		
	},
    methods:{
		//点击判断
		init(num){
			this.type_ = num
			this.select = true
			let arr
			if(this.current?.color){
				arr = this.current.color
			}else{
				arr = {
					r: 0,
					g: 0,
					b: 0,
					a:1,
				}
			}
			// 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]),
				gradient:this.current.gradient
			}
			this.uploadList = []
			if (num == 1) {
				this.selectCode = 'Sketchboard'
				this.upload.level1Type = 'Sketchboard'
				this.uploadList = this.apparelList
				this.designTypeList = this.sketchCatecoryList
				this.designType = this.designTypeList[0].value
			}else if (num == 2){
				this.selectCode = 'Printboard'
				this.upload.level1Type = 'Printboard'
				this.uploadList = this.printList
				this.designTypeList = this.printCatecoryList
				this.designType = this.designTypeList[0].value
			}else if (num == 4){
				this.selectCode = 'DesignElements'
				this.upload.level1Type = 'DesignElements'
				this.designTypeList = this.designElementsType
				this.designType = this.designTypeList[0]?.value
				this.openClick = 2
			}
			if(num == 1 || num == 2 || num == 4){
				this.clothesList = []
				this.getLibraryList()
			}else{
				this.store.state.UploadFilesModule.allBoardData?.colorBoards?.forEach((item,index) => {
					this.colorList[index+1] = {
						gradient:item.gradient,
						rgba:item.rgbValue,
						tcx:item.tcx,
						name:item.name,
					}
					if(item.gradient){
						this.colorList[index+1].gradient = item.gradient
					}else{
						delete this.colorList[index+1].gradient
					}
				})
			}
			
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			DesignDetailEnd.init(num)
			this.workspaceCom = computed(()=>{
				return  this.store?.state?.Workspace?.workspace
			})
		},
		
		deleteFile(num){
            this.uploadList.splice(num, 1)
		},
		upFileUploadChange(data) {
            let file = data.file;
			let bor = true
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
				if(res.errCode == 0){
					file.id = res.data.id;
					file.url = res.data.url;
					file.resData = res.data;
					let type 
					if(res.data.level2Type){
						this.designTypeList.forEach((item) => {
							if(item.value == res.data.level2Type){
								file.categoryValue = item?.value;
								type = item.value
								file.category = item?.name;
							}
						});
					}else{
						file.categoryValue = this.designTypeList[0].value;
						type = this.designTypeList[0].value
						file.category = this.designTypeList[0].name;
					}
					file.designType = res.data.designType
					file.level2Type = type;
					file.minIOPath = file.resData.minIOPath
					let fileList = this.uploadList.filter(
						(v) => v.status === "done"
					);
					this.uploadList = fileList
					this.selectImgItem(this.uploadList[this.uploadList.length-1])
					// this.store.commit("clearMoodTemplateId");
					if(this.selectCode == 'Sketchboard'){
						this.apparelList = this.uploadList
					}else{
						this.printList = this.uploadList
					}
					// if (this.uploadList.length > 8) {
					// 	message.info(this.t('DesignDetailAlter.jsContent2'));
					// } else {
					// 	// this.store.commit("setSketchboardFile", fileList);
					// }
				}else{
					bor = false
				}
            } else if (file.status === "error") {
				bor = false
            }
			if(!bor){
                let res = JSON.parse(file.xhr.response);
				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'));
                message.warning(res.errMsg);
			}
			
        },

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

		//切换整体衣服
		changePlace(){
			this.uploadList = []
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			this.uploadList = []
			this.apparelList = []
			this.printList = []
			this.colorList = [{},{},{},{},{},{},{},{},{}]
			// DesignDetailEnd.colorList = [{}]
			DesignDetailEnd.sketchImg={}
			this.terminate()
			DesignDetailEnd.clearModal()
		},
		// this.getLibraryList('Moodboard')
		// this.getLibraryList('Printboard')
		setSketchLibrary(item){
			let data = {
				libraryId:[item.id],
				level2Type:item.level2Type,
			}
			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
                (rv) => {
                }
            ).catch((res)=>{
            });
		},
		selectImgItem(imgData){
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			imgData.categoryValue = imgData.categoryValue?imgData.categoryValue:imgData.level2TypeEnum.name
			imgData.category = imgData.category?imgData.category:imgData.level2TypeEnum.value
			if(this.selectCode == 'Sketchboard'){
				// this.current.id_ = imgData.id
				// this.current.path = imgData.url
				DesignDetailEnd.setSketchImg(imgData)
				// DesignDetailEnd.sketchImg.id_ = imgData.id
				// DesignDetailEnd.sketchImg.path = imgData.url
			}else if(this.selectCode == 'Printboard'){
				// this.current.printObject.path = imgData?.url
				// this.current.printObject.id = imgData?.id
				// this.current.printObject.designType = imgData?.designType
				// this.current.printObject.minIOPath = imgData.minIOPath
				// this.current.printObject.prints = [{
				// 	minIOPath:imgData.minIOPath,
				// 	path:imgData?.url,
				// 	designType: imgData?.designType
				// }]
			
				imgData.path = imgData.url
				DesignDetailEnd.printsList.push(imgData)
				if(this.driver__.driver){
					nextTick().then(()=>{
						driverObj__.moveNext();
					})
				}
				// console.log(this.current.printObject,imgData); 
			}else if(this.selectCode == 'DesignElements'){
				imgData.path = imgData.url
				DesignDetailEnd.elementsList.push(imgData)
			}
        },
		handleChange(){
			this.currentPage = 1
			this.clothesList = []
            this.getLibraryList('')
		},
		//请求我的印花&&模型
		getLibraryList(){
            this.isShowLoading = true
			let level2Type = ''
			if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
				level2Type = this.designType
			}else if(this.selectCode == 'Sketchboard'){
				level2Type = this.current.type
			}
			let workspace = this.store.state.Workspace.workspace
            let data = {
                // level1Type:'Printboard',
                level1Type:this.selectCode,
                // level2Type:'Pattern',
                level2Type:level2Type,
				modelSex:workspace?.sex,
                page:this.currentPage,
                pictureName:this.searchPictureName,
                size:this.pageSize+this.clothesList.length,
            }
            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                (rv) => {
					if(this.selectCode == 'Sketchboard'){
						rv.content.forEach((vItem)=>{
							this.sketchCatecoryList.forEach((item) => {
								if(item.value == vItem.level2Type){
									vItem.categoryValue = item.value
									vItem.category = item.name
								}
							});
						})
					}
					this.clothesList = rv.content
                    this.isShowLoading = false
                    this.total = rv.total
                }
            ).catch((res)=>{
                this.isShowLoading = false
            });
        },

		//衣服
		open(num) {
			if(num == 1 && this.type_ ==4)return
            this.openClick = num;
			if(num ==2 ){
				this.getLibraryList()
				if(this.driver__.driver){
					nextTick().then(()=>{
						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('DesignDetailAlter.jsContent4'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(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=>{
            });
        },
		setOperate(){
			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)
		},
		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('.detail_modal_body_select .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)
			}
		},
   //通过tcx获取颜色
		getTcxColor(){
            if(!this.tcxColor){
                return
            }
			let DesignDetailEnd = this.$refs.DesignDetailEnd
			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] =  {r:rv.r, g:rv.g, b:rv.b}
						this.pantongName = rv.name
						let colorList =this.colorList.filter((v) => Object.keys(v).length)
						this.getColorBg = true
					}else{
						message.info(this.t('DesignDetailAlter.jsContent6'))
					}
				})
			}else{
				message.info(this.t('ColorboardUpload.jsContent5'))
			}
           
        },
			//查询颜色的潘通值和txc
		getPantongName(v,index) {
			if(v?.r == undefined){
				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) {
							if(index == -1){
								this.colorList[this.selectIndex].tcx = rv[0].tcx
								this.colorList[this.selectIndex].name = rv[0].name
							}else{
								this.colorList[index].tcx = rv[0].tcx
								this.colorList[index].name = rv[0].name
							}
							resolve();
						}
					})
					.catch((res) => {
						reject();
					});
			});
		},
	
        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}
						// 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]
						// 	this.getPantongName(selectColorList[index].rgba,colorListIndex[0])
						// 	colorListIndex.splice(0,1)										
						// }
						img.remove()
					};
                    
				
                },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: calc(1.8rem*1.2);
		display: block;
	}
	.detail_uploadLibrary{
		.switch_type_list {
			margin-bottom: calc(1rem*1.2);
		margin-top: calc(-1rem*1.2);
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-around;

	}
	
	
	}
	.detail_Library{
		.select_block{
			border: calc(0.1rem* 1.2) solid #F1F1F1;
			// margin-right: calc(2.3rem*1.2);
			height: 4rem;
			width: calc(20rem*1.2);
			margin-bottom: 1rem;
			.ant-select{
				width: 90%;
			}
			.ant-select:not(.ant-select-customize-input) .ant-select-selector{
				width: 100%;
			}
		}
		.content_search_block{
                display: flex;
				margin-bottom: calc(1rem*1.2);

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

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

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

                    .icon-sousuo{
                        font-size: calc(2rem*1.2);
                        color: #FFFFFF;
                    }
                }
            }
	}
	
	.detail_Library_item,.detail_Upload_item{
            width: 100%;
            // height: calc(100% - 19rem*1.2));
			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;}

			}
			.operate_file_block{
				height: calc(1.5rem*1.2);
				.select_img_type{
					line-height: 1;
					.select_category{
						zoom: .6;
						height: 100%;
						.icon-xiala{
							zoom: .8;
						}
					}
					.category_list{
						margin-top: calc(.1rem*1.2);
						.category_item{
							zoom: .7;
						}
					}
				}
			}
			.material_content_list_loding{
				text-align: center;
				width: 100%;
				img{
					height: calc(10rem*1.2);
				}
			}
            .content_img_item{
                display: inline-block;
                vertical-align: top;
                // padding: 0 1.4rem*1.2);
                // margin-bottom: 2.8rem*1.2);
				margin-bottom: calc(2rem*1.2);
				padding: 0;
				// height: 9rem*1.2);
				&.active{
					margin-bottom: calc(2rem*1.2);
					.pin_block{
						display: block;
					}
				}
				.pin_block{
					display: none;
				}
                .content_img_item_block{
                    // border: 0.1rem*1.2) solid transparent;
					width: calc(10rem*1.2);
					height: calc(10rem*1.2);
                    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%;
                    }
                }
                .content_img_name{
                    width: calc(16.5rem*1.2);
                    height: calc(3.5rem*1.2);
                    line-height: calc(3.5rem*1.2);
                    white-space: nowrap;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: calc(1.4rem*1.2);
                    color: #030303;
                }
            }
			.upload_img_body{
				width: 100%;
				.upload_item{
					justify-content: space-between;
				}
			}
			
			.moodboard_body{
				.upload_file_item{
					margin: 0;

					margin-bottom: calc(2rem*1.2);
					width: calc(9rem*1.2);
					height: calc(9rem*1.2);
                    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: calc(3.2rem*1.2);
                    height: calc(3.2rem*1.2);
                    background: rgba(0,0,0,0.6);
                    border-radius: calc(0.4rem*1.2);
                    position: absolute;
                    top: calc(0.9rem*1.2);
                    right: calc(0.9rem*1.2);
                    text-align: center;
                    line-height: calc(3.2rem*1.2);
					left: auto;
                    .icon-shanchu{
                        font-size: calc(1.6rem*1.2);
                        color: #fff;
                    }
                }

                &:hover .delete_file_block{
                    display: block;
                }

               
            }
			}
            
			}
			
	}

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

				.color_review_content{
					width: calc(16.5rem*1.2);
					height: calc(16.5rem*1.2);
					background: #FFFFFF;
					border: calc(0.1rem*1.2) solid #DCDCEC;
				}

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

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

			.upload_file_item{
				// margin: 0 2rem*1.2) 2rem*1.2) 0;
				margin: 0;
				display: inline-block;
				// width: 16.5rem*1.2);
				// height: 16.5rem*1.2);
				width: calc(6rem*1.2);
				height: calc(6rem*1.2);
				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: 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: 100%;
				justify-content: flex-start;
				flex-direction: row;
				flex-wrap: nowrap;
				height: calc(2rem*1.2);
				.upload_color_item{
					width: calc(2rem*1.2);
					height: calc(2rem*1.2);
					position: relative;
					cursor: pointer;
					margin-right: calc(1rem*1.2);
					.upload_color_item_bg{
						width: calc(2rem*1.2);
						height: calc(2rem*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{
					}
				}
			}
			.color_setting_block{
				margin: auto;
				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
				width: 24rem;
				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: 24rem;
					// height: 16.5rem*1.2);
					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: 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: 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*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: 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: calc(.5rem*1.2);
							}
						}
					}
					.vc-chrome-saturation-wrap .vc-saturation-circle{
						width: calc(1rem*1.2);
						height: calc(1rem*1.2);
					}
				}
				.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;
						}
					}

				.sileder_color{
					margin-top:calc(1.3rem*1.2);

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

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

				.color_block{
					// margin-top: 1rem*1.2);
					// display: flex;
					// justify-content: space-between;
					// font-size: 1.6rem*1.2);
					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: calc(11rem*1.2);
						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: calc(.2rem*1.2) calc(.5rem*1.2);
							box-shadow: inset 0 0 0 1px #ccc;
							border-radius: calc(.4rem*1.2);
							justify-content: space-around;
							text-transform:uppercase;
							.color_block_bg{
								width: calc(1.5rem*1.2);
								height: calc(1.5rem*1.2);
								// margin-right: .5rem*1.2);
								display: flex;
								justify-content: space-between;
							}
						}
						.color_block_bg{
						}
					}
					
				}
			}

			.get_color_block{
				display: flex;
				flex-direction: row;
				.get_color_input{
					width: calc(15rem*1.2);
					height: calc(2.8rem*1.2);
					background: #FFFFFF;
					border: calc(0.1rem*1.2) 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{
					padding: 0 calc(.2rem*1.2);
					height: calc(2.8rem*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;
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
                    .fi-br-fill{
						margin-right: calc(0.5rem*1.2);
						color:#343579;
						vertical-align: middle;
					}

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

		.upload_item{
			margin-bottom: calc(.5rem*1.2);
			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*1.2) 2rem*1.2) 0;
						margin: 0;
						display: inline-block;
						width: calc(6rem*1.2);
						height: calc(6rem*1.2);
						border: 1px solid #F5F5F5;
						vertical-align: top;
						i{
							zoom: 1.2;
						}
					}
				}
			}
		}
	}
}

   
</style>