<template>
   <a-modal class="modal_component Export" 
            v-model:visible="showUpgradePlan" 
            :footer="null" 
            width="78%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			:keyboard="false"
        >
        <div class="UpgradePlan_closeIcon">
				
			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
		</div>
		<div class="UpgradePlan_content">
			<div>Export</div>
		</div>
		<!-- <div>
			<canvas ref="exportCanvas"></canvas>
		</div> -->
		<div class="exportCanvasBox">
			<ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection>
		</div>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
export default defineComponent({
	components: {
		scaleImage,	
		ExportNewCoolection,
	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
        // console.log(prop.msg);
        let showUpgradePlan = ref(false)
	
        return {
			showUpgradePlan,
        };
    },
    data(prop) {
        return {
		}
    },
	
    mounted() {
    },
	watch:{
		// driver__:{
		// 	handler(newVal,oldVal){
		// 		if(this.type_.type2 == 'Printboard'){
		// 			if(newVal.index >= 14 && newVal.index < 15){
		// 				this.setKeyword(newVal.index-14)
		// 			}else{
		// 			}
		// 		}else if(this.type_.type2 == 'Sketchboard'){
					
		// 		}
				
		// 	}
		// },
		
	},
    methods: {
        init(){
			this.showUpgradePlan = true
		},
		
		cancelDsign(){
			this.showUpgradePlan = false
		},
    },
});
</script>
<style lang="less" scoped>
.Export {
	flex: 1;
    // height: 30rem;
    // overflow-x: hidden;
	display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e5e5;
	position: relative;
	.UpgradePlan_content{
		font-size: var(--aida-fsize2);
		font-weight: 900;
		color: rgba(0, 0, 0, 0.65);
	}
    .UpgradePlan_closeIcon{
		top: calc(2rem*1.2);
		right: calc(2rem*1.2);
        cursor: pointer;
		width: calc(4rem*1.2);
		height: calc(4rem*1.2);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		.fi-rr-cross-small::before{
			padding: calc(.2rem*1.2);
			border-radius: 5px;
			border: solid 2px rgba(0, 0, 0, 0.25);
			transition: 1s all;
			color: rgba(0, 0, 0, 0.55);
		}
		&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
			border: solid 2px rgba(0, 0, 0, 0.55);
			color: rgba(0, 0, 0, 1);
		}
	}
	.exportCanvasBox{
		flex: 1;
		overflow-x: hidden;
		.export_new_collection_review{
			position: initial;
			margin: 10rem auto;
			margin-bottom: 0;
		}
	}
	
}
	

</style>
<style lang="less">
.Export{
	.ant-modal-content{
		border-radius: calc(1rem*1.2);
		overflow: hidden;
		.ant-modal-header{
			background-color: #fff;
			border-bottom: none;
		}
		.ant-modal-body{
			display: flex;
			flex-direction: column;
			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
			// height: calc(65vh - 6.4rem);
			height: calc(65rem*1.2);
		}
		//进度完成字体颜色
		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
			color: #000;
		}
		.ant-progress-circle .ant-progress-text{
			color:rgba(0, 0, 0, 0.55);
			font-size: calc(1.6rem*1.2);
		}
	}
}
</style>