<template>
    <div class="colorboard_upload_modal">
		<div class="modal_layout">
			<div class="modal_text">
				<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
			</div>
			<div class="modal_img">
				<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
					</div>
				</div>
				<div>
					<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
				</div>
			</div>
		</div>
        <div class="colorboard_upload_right">
            <div class="upload_right_content">
                <div class="right_content_line">
                    <div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('ColorboardUpload.Palette') }}</span>
                    </div>
                    <div class="color_setting_block">
						<Sketch class="sketch_color" v-model="selectColor"  :show.sync="colorPickerVisible"/>
                        <!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
                        <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
						<div class="color_block">
							<div class="color_left" @click="colorBlockHex = !colorBlockHex">
								<div v-show="colorBlockHex">
									{{ $t('ColorboardUpload.HEX') }}
								</div>
								<div v-show="!colorBlockHex">
									{{ $t('ColorboardUpload.RGBA') }}
								</div>
							</div>
							<div class="color_right">
								<div class="color_HEX_block" v-show="colorBlockHex">
									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
									<div>
										{{getSelectRGB(selectColor).hex}}
									</div>
								</div>
								<div class="color_rgb_block" v-show="!colorBlockHex">
									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
									<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
									<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
									<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
								</div>
							</div>
						</div>
                    </div>
                    <!-- <div class="color_review_block">
                        <div class="clear_button" @click="clearCurrentColor()">Clear</div>
                    </div> -->
                </div>

                <div class="right_content_line right_content_line_upload">
                    <div class="upload_right_header">
						<i class="color_edit fi fi-bs-comments" ></i>
                        <span>{{ $t('ColorboardUpload.AutoRecognize') }}</span>
                    </div>
					<div class="upload_centetn">
						<div class="upload_item">
							<div class="upload_file_item" v-for="(file) in fileList" :key="file">
								<div class="upload_file_item_content" v-show="file.status !== 'done'">
									<a-spin  :indicator="indicator" tip="Uploading..."/>
								</div>
								<div class="upload_file_item_content"  v-show="file.status === 'done'">
									<img  :src="file?.imgUrl" class="upload_img" ref="colorImage">
									<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
								</div>
							</div>
							<a-upload
								v-show="fileList.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('ColorboardUpload.ColorCode') }}</span>
                    </div>
                    <div class="get_color_block">
                        <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
                        <div class="get_color_button" @click="getTcxColor()">
                            <span class="icon iconfont icon-huoquduixiang"></span>
                            <span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
                        </div>
						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
							<img src="#" :title="pantongName">
						</div>
                    </div>
				</div>
            </div>
        </div>
    </div>
</template>
<script>
import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
import { Https } from "@/tool/https";
import GO from "@/tool/GO";
import { defineComponent, h,ref } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import {useStore} from 'vuex'
import ColorThief from '@/tool/colorthief/colorthief'
import { message,Upload} from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
    components:{
        Chrome,
        Slider,
		Sketch
    },
    setup(){
        let fileList = ref([])
        let colorList = [{},{},{},{},{},{},{},{}]
        let selectColor = ref({
			rgba:{},
		}) //顔色选择器默认颜色
		let selectColorList = ref({
		})

		let {t} = useI18n()
        return {
            fileList,
            colorList,
            selectColor,
			selectColorList,
			t,
        }
    },
    watch:{
        selectColor(newVal,oldVal){
            this.colorList[this.selectIndex] = newVal.rgba
            let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
            this.setColorboardList(colorList)
        }
    },
    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
            }
        },
    },
    data(){
        return{
            
            reviewColor:{}, //预览的颜色
            selectIndex:0,//选中的文件索引
            tcxColor:'',
            pantongName:'',//潘通值
			pantongNameList:[],
            indicator : h(LoadingOutlined, {
                style: {
                    fontSize: '2.4rem',
                },
                spin: true,
            }),
            upload:{
                isPin:0,
                level1Type:'Moodboard',
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token:'',
            uploadUrl:'',
            store:useStore(),
			colorPickerVisible: true,
			colorBlockHex:true,
			getColorBg:false,
        }
    },
    mounted(){
        this.token = getCookie('token') || ''
        this.uploadUrl = getUploadUrl()
		let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[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.warning(this.t('ColorboardUpload.jsContent1'))
			}
		})
		// if ("EyeDropper" in window) {
		// 	console.log(true);
		// }
		// else {
		// 	console.log(false);
		// }
    },
    methods:{
		
        //选择不同的色块
        selectColorItem(index,color){
			let hex
			if(color?.r){
				hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
			}else{
				hex = '#FFFFFF'
			}
            this.selectIndex = index
            this.selectColor = color?.r ? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {}
            // this.fileList = []
            this.tcxColor = ''
            this.pantongName = ''
            this.pantongNameList = []
			// this.selectColorList= []
			this.reviewColor= {}
			this.getColorBg = false
        },

        //通过tcx获取颜色
        getTcxColor(){
            if(!this.tcxColor){
                return
            }
            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.setColorboardList(colorList)
					this.getColorBg = true
                }else{
                    message.warning(this.t('ColorboardUpload.jsContent2'))
                }
            })
        },

        //清除当前的颜色
        clearCurrentColor(){
            this.selectColor = {}
            // this.fileList = []
			this.reviewColor={}
            this.pantongName = ''
            // this.pantongNameList = []
            this.tcxColor = ''
        },

        fileUploadChange(data){
            let file = data.file
            let fileData = file.originFileObj
            var reader = new FileReader();
            reader.onload = (e) => {
                let data_new;
                if (typeof e.target.result === 'object') {
                // 把Array Buffer转化为blob 如果是base64不需要
                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
                } else {
                    data_new = e.target.result;
                }
                file.imgUrl = data_new
                file.status = 'done'
                this.fileList.push(file)
                setTimeout(async ()=>{
					const img = new Image();
					let colorImage = this.$refs.colorImage
					img.src = colorImage[0].src;
                    const colorThief = new ColorThief();
					img.onload = async () => {
						let domImg = colorImage[0];
						// let color = colorThief.getColor(domImg)
						let selectColorList = [];
						let selectColor = colorThief.getPalette(img,9)
						//排序
						let obj = {
							max : 5,
							min: 5,
						}
						let colorSort
						await GO.setColor(selectColor,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)
        },
		rgbaToHex(rgba) { // rgba转16进制
            let hex = '#';
			rgba.forEach((i,index) => {
				if(index == 3){
					hex += Math.round(i * 255).toString(16)
				}else{
					hex += Number(i).toString(16).padStart(2, '0');
				}
			});
          
            return hex;
        },
		setUplpadColor(color){
			this.selectColor  = color
		},
        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('ColorboardUpload.jsContent3'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.warning(this.t('ColorboardUpload.jsContent4'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },

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

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

        setColorboardList(colorList){
            let  newColorList = colorList.map((v)=>{
                let data = {
                    id:'',
                    name:'',
                    rgbValue:v
                }
                return data
            })
            this.store.commit('setColorboardList',newColorList)
        },

        recollection(){
            let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
			let hex
            colorList.forEach((ele, index) => {
				hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])

                this.colorList[index] = ele.rgbValue
            });
            this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
            this.store.commit('setColorboardList',colorList)
        },
		

    }
})
</script>
<style lang="less">
.colorboard_upload_modal{
    // padding: 1rem 1rem 1.8rem 1rem;
    height: 100%;
    // background: #F2F3FB;
	position: relative;
    display: flex;
    justify-content: space-between;
	padding-top: 7rem;
	.modal_layout{
		position: absolute;
		top: 0;
		left: calc(47% + 3rem);
		.modal_text{
			font-size: 1.2rem;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.modal_img{
			width: 50rem;
			// width: 40rem;
			height: 5rem;
			overflow-x: hidden;
			display: flex;
			align-items: center;
			&.modal_img::-webkit-scrollbar {
				display: none;
			}
			.modal_img_item{
				width: 4rem;
				height: 4rem;
				margin: 0 1rem 0 0;
				position: relative;
				cursor: pointer;
				border: 0.1rem solid #DCDCEC;
				.select_upload_color{
					border: 0.1rem solid #343579;
				}
				.upload_color{
					width: 100%;
					height: 100%;
				}
				
			}
			
			
		}
	}
    .colorboard_upload_right{
        // width: 47rem;
        height: 100%;
        background: #FFFFFF; 

        .upload_right_header{
            padding: 0.4rem 0 1.6rem 0;
            font-weight: bold;
            line-height: 2.4rem;
            font-size: 1.6rem;
            color: #333333;
            display: flex;
            align-items: center;

            .color_edit{
                font-size: 2rem;
                margin-right: 1rem;
				position: absolute;
				left: 0;
            }

        }

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

            .right_content_line{
				padding-left: 3rem;
				position: relative;
				padding-right: 5rem;
				.upload_centetn{
					overflow-x: hidden;
					height: calc(100% - 4.4rem);
				}
				.upload_centetn::-webkit-scrollbar {
					display: none;
				}
                .upload_file_item{
                    // margin: 0 2rem 2rem 0;
					margin: 0;
                    display: inline-block;
                    // width: 16.5rem;
                    // height: 16.5rem;
					width: 12rem;
					height: 12rem;
                    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: 12rem;
					flex-wrap: wrap;
					justify-content: space-between;
					.upload_color_item{
						width: 5rem;
						height: 5rem;
						position: relative;
						margin-bottom: 2rem;
						cursor: pointer;
						.upload_color_item_bg{
							width: 5rem;
							height: 5rem;
						}
						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: 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;
						max-width: 17rem;
						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: 15px;
								}
								.vc-alpha{
									border-radius: 15px;
									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: column;
                    .get_color_input{
                        width: 19.4rem;
                        height: 3.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{
                        margin-top: 1.5rem;
                        padding: 0 2.2rem;
                        height: 3.2rem;
                        background: #EFEEFF;
                        display: inline-block;
                        line-height: 3rem;
                        font-size: 1.2rem;
                        color: #343579;
                        vertical-align: middle;
                        cursor: pointer;

                        .icon-huoquduixiang{
                            margin-right: 0.5rem;
                            font-size: 2rem;
                            color:#343579;
                            vertical-align: middle;
                        }

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

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