<template>
    <div class="canvasBox">
		<!-- designDetailShow -->
		<!-- :class="[driver__.driver?'hideEvents':'']" -->
		 <div class="canvasContent">
			<div class="argument-box">
				<argument ref="argument" v-if="canvasObj.canvas"></argument>
			</div>
			<div class="canvas">
				<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
				<div class="canvas">
					<canvasContent ref="canvasContent"></canvasContent>
				</div>
			</div>
		 </div>
		
		<!-- <div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div> -->
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'

import canvasGeneral from "@/tool/canvasGeneralCopy";
import argument from './argument.vue'
import canvasContent from './canvasContent.vue'
import tool from "./tool.vue"

export default defineComponent({
    components:{
		tool,argument,canvasContent,
    },
    setup(props,{emit}) {
        const store = useStore();
      
		const detailDom = reactive({
			model:null
		})
		const userDetail = computed(()=>{
			return store.state.UserHabit.userDetail
		})
		const detailData = reactive({
			canvasObj:canvasGeneral,


			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
			designDetailShow:false,
			loadingShow:false,
			isEditPattern:{
				value:false,
			},// 是否编辑图案
		})
 	
		onBeforeUnmount(()=>{
		})
        return{
			...toRefs(detailDom),
			...toRefs(detailData),
        }
    },
	provide() {
		return {
		}
	},
	mounted(){
	},
		
})
</script>
<style lang="less" scoped>
    .canvasBox{
		flex: 1;
		overflow: hidden;
		// top: -100%;
		display: flex;
		align-items: center;
		.argument-box,
		.canvas,
		.detail-box{
			:deep(i){
				font-size: 2.5rem;
				cursor: pointer;
				width: 3rem;
				height: 3rem;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				transition: all .3s;
				margin-bottom: .5rem;
				&.active{
					border: 1px solid;
					border-radius: .4rem;
				}
				&.icon-xiala{
					transform: rotate(-90deg);
				}
				&.icon-xialaActive{
					transform: rotate(90deg);
				}
			}
		}
		.canvasContent{
			height: 73rem;
			width: 100%;
			border: 2px solid #000;
			border-radius: 3rem;
			padding: 4rem;
		}
		
	}
</style>