<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.width">
		 </div>
		 <div class="label_item wH">
			 <div class="title">{{ $t('exportModel.Height') }}</div>
			 <input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
		 </div> -->
		 <div v-show="isEditFrontBack" class="frontBack">
			<div class="label_item" @click.stop="setOperation('print')">
				<div class="title">Masking :</div>
				<a-select
					v-model:value="frontBackData"
					:options="frontBackDataList"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
					style="width:18rem;"
					@change="changeFrontBackData"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #343579"
						></span
					></template>
				</a-select>
			</div>
			<div class="label_item">
				<div class="title">{{ $t('exportModel.Size') }} :</div>
				<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">

				<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
			</div>
		 </div>
		 <div v-show="!isEditFrontBack" class="sketch">
			<div class="label_item" @click.stop="setOperation('print')" v-show="isDashedShow">
				<div class="title">print</div>
				<div class="current"></div>
				<div class="drop" v-show="operation == 'print'">
					<selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print" :catecoryList="printCatecoryList"></selectList>
				</div>
			</div>
			<div class="label_item" @click.stop="setOperation('element')" v-show="isDashedShow">
				<div class="title">element</div>
				<div class="current"></div>
				<div class="drop" v-show="operation == 'element'">
					<selectList @selectImgItem="selectImgItem" level1Type="DesignElements" type="element" :catecoryList="designElementsType"></selectList>
				</div>
			</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 style="width: 7rem;" 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" 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 texture" v-show="canvasGeneral.operation == 'texture'">
				<div class="title">{{ $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 != '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 class="title">{{ $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 class="title">{{ $t('exportModel.Brushwork') }}:</div>
				<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
					style="width: 12rem ;height: 6rem;"
					@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" 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 class="title">{{ $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>
		
		 <!-- <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>
 </template>
 
 <script lang="ts">
	 import { defineComponent,ref,reactive,computed,toRefs,inject, watch, nextTick} from 'vue'
	 import library from '../detailLeft/module/libraryList.vue'
	 import upload from '../detailLeft/module/uploadList.vue'
	 import selectList from '../detailLeft/module/selectList.vue'

	import { useStore } from "vuex";
	 export default defineComponent({
		 components:{selectList},
		props: ['isEditFrontBack'],
		emits: ['setFrontBackColor'],
		 setup(props,{emit}){
	        const store = useStore();
			 let testModal = ref(true)
			 let canvasGeneral:any = inject('canvasObj')
			 let frontBackCanvas:any = inject('frontBackCanvasObj')
			 const data = reactive({
				 colorHistoryList:[],
				 operation:'',
				 printCatecoryList:computed(()=>{
					return store.state.UserHabit.printType
				}),
				designElementsType:computed(()=>{
					return store.state.UserHabit.designElementsType;
				}),
				isDashedShow:computed(()=>{
					return canvasGeneral.dashed.isDashedShow;
				}),
				frontBackData:'#ff0000',
				frontBackDataList:[
					{
						name:'Front Piece',
						value:'#ff0000'
					},{
						name:'Back Piece',
						value:'#00ff00'
					},{
						name:'Surroundings',
						value:'background'
					},
				]
			 })
			 watch(()=>props.isEditFrontBack,(newVal)=>{
				if(newVal){
					nextTick(()=>{
						data.frontBackData = '#ff0000'
					})
				}
			})
			 const setOperation = (str:any)=>{
				 data.operation = str
			 }
			 const setOper = ()=>{
				 setOperation('')
			 }
			 document.addEventListener('click',setOper)
			 const closeModal = ()=>{
				 document.removeEventListener('click',setOper)
			 }
			 const selectImgItem = (value:any)=>{
				value.minioUrl = value.url
				canvasGeneral.addPartImg(value,'print')
				data.operation = ''
			}
			const changeFrontBackData = (value:any)=>{
				emit('setFrontBackColor',value)
			}
			 return {
				 canvasGeneral,
				 frontBackCanvas,
				 ...toRefs(data),
				 testModal,
				 setOperation,
				 closeModal,
				 selectImgItem,
				 changeFrontBackData,
			 }
		 }
	 });
 </script>
 
 <style lang='less' scoped>
 .canvasArgument{
	 height: 100%;
	 >div{
		display: flex;
		flex-wrap: wrap;
	 }
	 .label_item{
		 margin-right: 2rem;
		 position: relative;
		 display: flex;
		 align-items: center;
		 .leftAlign{
			 display: flex;
		 }
		 > .current{
			border-radius: 1rem;
			height: 3rem;
			width: 7rem;
			border: 1px solid #000;
		 }
		 > .drop{
			position: absolute;
			z-index: 22;
			top: 4rem;
			background: #fff;
			border: 1px solid #000;
			border-radius: 1rem;
			padding: 2.4rem;
			width: 40rem;
			height: 50rem;
			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;
			 div{
				 width: 2rem;
				 height: 2rem;
				 margin-right: .5rem;
				 margin-bottom: .5rem;
				 display: inline-block;
				 cursor: pointer;
			 }
		 }
		 
		 &.wH input{
			 width: 5rem;
		 }
		 .title{
			 margin-right: 1rem;
			 font-weight: 600;
			 font-size: 1.8rem;
		 }
		
		 
	 }
	 &.sketch{
		.icon-xiala{
			 cursor: pointer;
			 transform: rotate(0deg);
			 height: 4rem;
			 width: 4rem;
			 transition: all .3s;
			 line-height: 1;
			 text-align: center;
			 display: flex;
			align-items: center;
			 &.active{
				 transform: rotate(180deg);
			 }
		 }
	 }
	 .label_item:hover{
		 // .labelHover_show{
		 // 	display: flex;
		 // }
	 }
 }
 
 </style>