<template>
	<div class="detail_modal_body_result">


		<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
			<div class="upload_title result_apparel" v-show="type_ == 1">
				<i class="color_edit fi fi-bs-comments"></i>
				<span>New Apparel</span>
			</div>
			<div v-show="type_ == 2" class="result_print">
				<div>
					<div class="upload_title">
						<i class="color_edit fi fi-bs-comments"></i>
						<span>New Print</span>
					</div>
					<div class="print_left">
						<img src="" alt="">
					</div>
				</div>
				<div>
					<div class="upload_title">
						<i class="color_edit fi fi-bs-comments"></i>
						<span>Placement</span>
					</div>
					<div class="print_right">
						<div class="habit_Overal_Single">
							<div
								class="habit_Overal_Single_text"
								:class="{ active: !overalSingle }"
							>
								Overal
							</div>
							<a-switch v-model:checked="overalSingle" />
							<div
								class="habit_Overal_Single_text"
								:class="{ active: overalSingle }"
							>
								Single
							</div>
						</div>
						<div class="habit_System_Designer">
							<a-slider id="system_silder"
								v-model:value="systemDesignerPercentage"
								@afterChange="systemDesigner"
								:tip-formatter="formatter"
							>
							</a-slider>
						</div>
						
					</div>
				</div>
			</div>
			<div class="result_apparel_print_img">
				<img v-show="type_==1" class="result_appare_img" src="" alt="">
				<img v-show="type_==2" class="result_print_img" src="" alt="">
			</div>
		</div>
			
		<div v-show="type_ == 2"></div>
		<div v-show="type_ == 3">
			<div class="result_color upload_title">
				<i class="color_edit fi fi-bs-comments"></i>
				<span>New Color</span>
			</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 class="color_content" :style="{background:`#6c6cac`}"></div> -->
						<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
						</div>
						<div class="color_content_body">
							<div class="color_des">22</div>
							<div class="color_des">111</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>
<script>
import { defineComponent,computed,ref, h } from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
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'

export default defineComponent({
    props: ["msg"],
    components:{
        Draggable,Sketch,
    },
    setup(prop) {
        const store = useStore();
		let type_ = ref(0);



		//印花
		let overalSingle = ref()
		let systemDesignerPercentage = ref(30)
		
		//颜色
		let colorList = ref([{},{},{},{},{},{},{},{}])
        return{
			overalSingle,
			systemDesignerPercentage,
			type_,
			colorList,
        }
    },
    data(){
        return{

			//颜色
            selectIndex:0,//选中的文件索引
			getRGBA:{},
			selectColor:{},
        }
    },
    methods:{
		//点击判断
		init(num){
			this.type_ = num
			this.colorList[this.selectIndex] = this.$parent.selectColor
		},

		//印花
		systemDesigner(num) {
            console.log(num);
        },
		formatter(value) {
			return `${value}%`;
		},
		//颜色
		selectColorItem(index,color){
			let hex
			let parent = this.$parent
			if(color.rgba?.r){
				hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
			}else{
				hex = '#FFFFFF'
			}
			this.selectIndex = index
            this.$parent.selectIndex = index
            this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
            this.$parent.tcxColor = ''
			this.$parent.pantongName = ''
        },
    }
})
</script>
<style lang="less" scoped>
.detail_modal_body_result{
	width: 26%;
	i{
		font-size: 1.8rem;
		display: block;
	}
	.upload_title{
		display: flex;
		margin-bottom: 1rem;
		margin-top: 1rem;
		&.upload_title:nth-child(1){
			margin-top: 0;
		}
		span{
			margin-left: 1rem;
			font-size: 1.8rem;
			color: #000000;
		}
	}
	//模型和印花
	.result_apparel_print{
		height: 100%;
		display: flex;
		flex-direction: column;
		.result_apparel_print_img{
			flex: 1;
			img{
				width: 100%;
				height: 100%;
				max-height: 35rem;
				margin-top: 2rem;
			}
			.result_print_img{
				transform: scale(.7);
				transform-origin: right top;
			}
		}
	}
	//印花
	.result_print{
		display: flex;	
		justify-content: space-between;
		.print_left{
			 img{
				width: 8rem;
				height: 8rem;
				margin: auto;
			 }
		}
		.print_right{
			.habit_Overal_Single {
				display: flex;
				align-items: center;
				justify-content: center;
				// margin: 2rem 0;
				transform: scale(.8);

				// margin: 3rem 0;
				.habit_Overal_Single_text {
					font-weight: 600;
					color: rgba(0, 0, 0, 0.5);
					&.active {
						color: rgba(0, 0, 0, 0.7);
						// font-weight: 900;
						transform: scale(1.2);
					}
				}
				:deep(.ant-switch) {
					margin: 0 1rem;
					background-color: #efefef;
				}
				:deep(.ant-switch-checked) {
							background-color: #000;
						}
			}
			.habit_System_Designer {
				margin-top: 4rem;
				transform: scale(.8);

				:deep(.ant-slider-track),
				:deep(.ant-slider-rail) {
					height: .6rem;
					background-color: #e1e1e1;
					border-radius: 0.5rem;
				}
				:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
				:deep(.ant-slider-handle) {
					background-color: #2d2e76 !important;
					border: none !important;
				}
				:deep(.ant-slider-handle:hover) {
					box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
				}
			
				// .habit_System_Designer_text_max {
				// 	display: flex;
				// 	justify-content: space-between;
				// 	.habit_System_Designer_text {
				// 	}
				// }
			}
		}
	}
	//颜色
	.modal_img{
		width: 100%;
		overflow-x: hidden;
		display: flex;
		flex-wrap: wrap;
		padding-left: 2rem;
		&.modal_img::-webkit-scrollbar {
			display: none;
		}
		.modal_img_item{
			margin: 0 1rem 1rem 0;
			position: relative;
			cursor: pointer;
			border: 0.1rem solid #DCDCEC;
			.color_content{
				width: 7rem;
				height: 4rem;
			}
			.color_content_body{
				.color_des{
					font-size: 1.2rem;
					font-weight: 600;
				}
			}
			.select_upload_color{
				border: 0.1rem solid #343579;
			}
			.upload_color{
				width: 100%;
				height: 100%;
			}
			
		}


	}
}

   
</style>