<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="current.path" :title="current.type"> -->
						<img  :src="current?.printObject?.url" v-if="current?.printObject?.url && current?.printObject?.url != 'none'">
						<div  src="@/assets/images/homePage/null_img.png" v-else ></div>
						<div
							v-show="current?.printObject?.url && current?.printObject?.url != 'none'"
							class="delete_file_block"
							@click="deleteFile"
						>
							<span class="icon iconfont icon-shanchu"></span>
						</div>
					</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: !overallSingle }"
							>
								Overal
							</div>
							<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
							<div
								class="habit_Overal_Single_text"
								:class="{ active: overallSingle }"
							>
								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="current.path" :title="current.type">
				<img v-show="type_==2" class="result_print_img" :src="current.path" :title="current.type" @click="setPrint">
			
			</div>
		</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 :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(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">{{color.tcx}}</div>
							<div class="color_des">{{ color.name }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
		<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
		<div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
	<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>

	</div>
</template>
<script>
import { defineComponent,computed,ref, h ,inject} from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Sketch} from '@ans1998/vue3-color'
import DesignPrintOperation from './DesignPrintOperation.vue';
import { message,Upload} from 'ant-design-vue';

export default defineComponent({
    props: ["msg"],
    components:{
        Draggable,Sketch,DesignPrintOperation
    },
    setup(prop) {
        const store = useStore();
		let type_ = ref(0);
        let current = inject('current')//父组件传过来的数据
		//印花
		let overallSingle = ref(false)
		let systemDesignerPercentage = ref(0)

		//颜色
		let colorList = ref([{},{},{},{},{},{},{},{}])

		//加载中
		let loadingShow = ref(false)
        return{
			store,
			current,
			type_,
			overallSingle,
			systemDesignerPercentage,
			colorList,
			loadingShow,
        }
    },
    data(){
        return{

			//颜色
            selectIndex:0,//选中的文件索引
			getRGBA:{},
			selectColor:{},
        }
    },
    methods:{
		//点击判断
		init(num){
			this.type_ = num
			this.colorList[this.selectIndex] = this.$parent.selectColor
			this.overallSingle = this.current.printObject.ifSingle
			this.systemDesignerPercentage = this.current.printObject.scale*100
			console.log(this.current);
		},
		

		//模型
		//印花
		systemDesigner(num) {
			this.current.printObject.scale = num
        },
		setOveralSingle(){
			this.current.printObject.ifSingle = this.overallSingle
		},
		formatter(value) {
			return `${value}%`;
		},
		setPrint(){
			if(this.current.printObject.url && this.current?.printObject?.url != 'none'){
				let DesignPrintOperation = this.$refs.DesignPrintOperation
				DesignPrintOperation.init()
			}else{
                message.error('Please select print');
			}
			
		},
		deleteFile(){
			this.current.printObject = {}
		},




		//颜色
		selectColorItem(index,color){
			
			let hex
			let parent = this.$parent
			this.selectIndex = index
            this.$parent.selectIndex = index
			if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
				return
			}
			if(color.rgba?.r){
				hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
			}else{
				hex = '#FFFFFF'
			}
            this.$parent.selectColor = color?.rgba?.r != '' ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {}
            this.$parent.tcxColor = ''
			this.$parent.pantongName = ''
        },
		setSelectColorItem(color){
			let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
			let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
			this.current.color = string
			designItemDetail.clothes.forEach((element,index) => {
				if(element.id == this.current.id){
					designItemDetail.clothes[index] = this.current
				}
			});
		},

		//提交
		setPreview(){
            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let index 
			designItemDetail.clothes.forEach((v,ind)=>{
				if(v.id == this.current.id){
					index = ind
				}
			})
			console.log(this.current,designItemDetail);
			if(this.type_ == 1){
				designItemDetail.clothes[index].id = this.current.id_
				designItemDetail.clothes[index].path = this.current.path
				return
			}else if(this.type_ == 2){
				this.setPrint()
				return
			}else if(this.type_ == 3){
				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
				designItemDetail.clothes[index].color = color
			}
			let priority = designItemDetail.clothes.map((v)=>{
                return v.type
            })
			let data = {
                ...designItemDetail,
                priority:priority,
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
			this.loadingShow = true
			Https.axiosPost(Https.httpUrls.designSingle, data).then(
				(rv) => {
					// this.parentData.design.designItemUrl = rv.designItemUrl
					// this.$emit('finishRedesign',this.parentData)
					// this.closeModal()
					let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
					console.log(designItemDetail);
					this.loadingShow = false
					// this.closeModal()
					console.log(rv);
				}
			).catch(res=>{
				this.loadingShow = false
			});
		}
    }
})
</script>
<style lang="less" scoped>
.detail_modal_body_result{
	width: 26%;
	position: relative;
	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{
			position: relative;
			flex: 1;
			img{
				width: auto;
				height: 100%;
				max-height: 35rem;
				margin-top: 2rem;
			}
			.result_print_img{
				transform: scale(.85);
				transform-origin: right top;
				position: absolute;
				right: 0;
				cursor: pointer;
			}
		}
	}
	//印花
	.result_print{
		display: flex;	
		justify-content: space-between;
		.print_left{
			position: relative;
			 img{
				width: auto;
				height: 8rem;
				margin: auto;
				display: block;
			 }
			 .delete_file_block{
				display: none;
				width: 3.2rem;
				height: 3.2rem;
				background: rgba(0,0,0,0.6);
				border-radius: 0.4rem;
				position: absolute;
				top: 0.9rem;
				right: 0.9rem;
				text-align: center;
				line-height: 3.2rem;
				left: auto;
				.icon-shanchu{
					font-size: 1.6rem;
					color: #fff;
				}
			}
			&:hover .delete_file_block{
				display: block;
			}
		}
		.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);
				}
			}
		}
	}
	//颜色
	.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;
			height: 8.5rem;
			width: 7rem;
			box-sizing: border-box;
			.color_content{
				width: 100%;
				height: 4rem;
			}
			.color_content_body{
				.color_des{
					font-size: 1.2rem;
					font-weight: 600;
					white-space: nowrap; 
					width: 100%; 
					overflow: hidden;
					text-overflow:ellipsis;
				}
			}
			.select_upload_color{
				border: 0.1rem solid #343579;
			}
			.upload_color{
				width: 100%;
				height: 100%;
			}
			
		}
	}
	.subitOkPreviewBtn{
		bottom: 4rem;
		position: absolute;
	}
}

   
</style>