<template>
   <div class="canvasArgument">
		<div class="label_item wH">
			<div class="title">{{ $t('exportModel.Width') }}</div>
			<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.layerWidth">
		</div>
		<div class="label_item wH">
			<div class="title">{{ $t('exportModel.Height') }}</div>
			<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.layerHeight">
		</div>
		<div class="label_item" v-show="
			canvasGeneral.operation != 'movePosition' && 
			canvasGeneral.operation != 'move' && 
			canvasGeneral.operation != 'eraser' && 
			canvasGeneral.operation != 'texture' && 
			canvasGeneral.operation != 'zoomIn'  && 
			canvasGeneral.operation != 'zoomOut' && 
			canvasGeneral.operation != 'dashedPencil' && 
			canvasGeneral.operation != 'dashed'">
			<div class="title">{{ $t('exportModel.Color') }}</div>
			<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
			<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
			<div class="labelHover_show color" v-show="operation == 'color'" @click.stop="">
				<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
			</div>
		</div>
		<div class="label_item" v-show="
			canvasGeneral.operation != 'movePosition' && 
			canvasGeneral.operation != 'move' && 
			canvasGeneral.brushwork.value != 'RibbonBrush' && 
			canvasGeneral.brushwork.value != 'LongfurBrush'&& 
			canvasGeneral.operation != 'zoomIn'  &&
			canvasGeneral.operation != 'zoomOut' && 
			canvasGeneral.operation != 'dashedPencil' && 
			canvasGeneral.operation != 'dashed'">
			<div >{{ $t('exportModel.Size') }}:</div>
			<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
		</div>
		<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
			<div >{{ $t('exportModel.Brushwork') }}:</div>
			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
				style="width: 12rem "
				@change="canvasGeneral.brushworkChange"
				>
				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
					<img style="width: 100%;" :src="item.url" alt="">
				</a-select-option>
			</a-select>
		</div>
		<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
			<div >{{ $t('exportModel.Texture') }}:</div>
			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
				style="width: 12rem "
				@change="canvasGeneral.textureValueChange"
				>
				<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
					<img :src="item.url" alt="">
				</a-select-option>
			</a-select>
		</div>
		<div class="label_item" v-show="
			canvasGeneral.operation != 'pencil' && 
			canvasGeneral.operation != 'eraser'&&
			canvasGeneral.operation != 'movePosition' && 
			canvasGeneral.operation != 'move'&&
			canvasGeneral.operation != 'text'&&
			canvasGeneral.operation != 'texture'&&
			canvasGeneral.operation != ''&& 
			canvasGeneral.operation != 'zoomIn'  && 
			canvasGeneral.operation != 'zoomOut' && 
			canvasGeneral.operation != 'dashedPencil' && 
			canvasGeneral.operation != 'dashed'">
			<div >{{ $t('exportModel.FillBack') }}:</div>
			<div class="leftAlign">
				<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
				<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
			</div>
		</div>
		<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
			<div >{{ $t('exportModel.Layer') }}:</div>
			<div class="leftAlign">
				<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
				<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
				<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
				<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
			</div>
		</div> -->
		<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
			<div>Font Family</div>
			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
				style="flex: 1;width: 15rem;"
				@change="canvasGeneral.setFontFamily"
				:style="{'font-family':canvasGeneral.fontFamily}"
				>
				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
				</a-select-option>
			</a-select>
		</div>
		<div class="label_item" v-if="elementList" v-show="
			canvasGeneral.operation != 'dashedPencil' && 
			canvasGeneral.operation != 'dashed'">
			<div>{{ $t('exportModel.select') }}:</div>
			<span class="icon iconfont icon-xiala" @click.stop="setOperation('element')" :class="{active: operation == 'element'}"></span>
			<div class="labelHover_show element" v-show="operation == 'element'"  @click.stop="">
				<div v-for="titleItem,key in elementList" class="elementItem">
					<div class="titleItem">{{ titleItem?.name }}</div>
					<div class="titleImgList">
						<div  class="titleImgItem" v-for="imgItem in titleItem?.list">
							<img :src="imgItem?.url || imgItem?.designOutfitUrl || imgItem?.imgUrl || imgItem?.minioUrl" @click="addImage(imgItem)" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script lang="ts">
	import { defineComponent,ref,reactive,computed,toRefs,inject} from 'vue'
	import { useStore } from "vuex";
	export default defineComponent({
		components:{},
		props:{
			elementList:{
				type:Object,
				default:()=>{return {}}	
			}
		},
		setup(){
			const store = useStore();
		    let testModal = ref(true)
			let canvasGeneral:any = inject('canvasObj')
			const data = reactive({
				colorHistoryList:[],
				operation:'',
			})
			const setOperation = (str:any)=>{
				data.operation = str
			}
			const setOper = ()=>{
				setOperation('')
			}
			document.addEventListener('click',setOper)
			const closeModal = ()=>{
				document.removeEventListener('click',setOper)
			}
			const addImage = (item:any)=>{
				if(!item.minioUrl)item.minioUrl = item.imgUrl 
				item.imgUrl = item?.url || item?.designOutfitUrl || item?.imgUrl || item?.minioUrl
				canvasGeneral.addImage(item)
			}
			return {
				canvasGeneral,
				...toRefs(data),
				testModal,
				setOperation,
				closeModal,
				addImage
			}
		}
	});
</script>

<style lang='less' scoped>
.canvasArgument{
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	.label_item{
		margin-right: 2rem;
		position: relative;
		display: flex;
		align-items: center;
		.leftAlign{
			display: flex;
		}
		.labelHover_show{
			position: absolute;
			width: 100%;
			height: 10rem;
			top: 100%;
			z-index: 2;
			display: block;
			border-radius: 4px;
			border: 1px solid;
			padding: .5rem 1rem;
			background: #fff;
			&.color{
				div{
					width: 2rem;
					height: 2rem;
					margin-right: .5rem;
					margin-bottom: .5rem;
					display: inline-block;
					cursor: pointer;
				}
			}
			&.element{
				height: auto;
				max-height: 40rem;
				overflow-y: auto;
				>.elementItem{
					margin-bottom: 1rem;
					> .titleImgList{
						display: flex;
						flex-wrap: wrap;
						.titleImgItem{
							width: 50%;
							padding: 1rem;
							> img{
								width: 100%;
								height: 100%;
								object-fit: contain;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
		input{
			height: 100%;
			width: 12rem;
		}
		&.wH input{
		}
		.title{
			margin-right: 1rem;
		}
		.icon-xiala{
			cursor: pointer;
			transform: rotate(0deg);
			height: 4rem;
			width: 4rem;
			transition: all .3s;
			line-height: 4rem;
			text-align: center;
			&.active{
				transform: rotate(180deg);
			}
		}
	}
	.label_item:hover{
		// .labelHover_show{
		// 	display: flex;
		// }
	}
}

</style>