<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">
            <div class="exportCanvasBox_left">
                <div class="exportCanvasBox_title">Canvas Title</div>
                <label>
                    <div>Width:</div>
                    <input
                        type="number"
                        @input="setMaxInput('width', 500)"
                        v-model="canvasWH.width"
                    />
                </label>
                <label>
                    <div>Height:</div>
                    <input
                        type="number"
                        @input="setMaxInput('height', 1000)"
                        v-model="canvasWH.height"
                    />
                </label>
                <div class="exportCanvasBox_title" @click.stop="setCloseNav()">
					Canvas Nav
					<div
                        :class="[
                            'icon',
                            'iconfont',
                            'icon-xiala',
							closeNav?'icon-rotate':''
                        ]"
                    >
					</div>
				</div>
                <div class="exportCanvasBox_img" :class="{closeNav:'closeNav'}">
                    <div
                        class="exportCanvasBox_allItem"
                        v-for="(item,key) in allBoardData"
                    >
                        <div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>

						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item">
							<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
							<div>{{colorItem.tcx}}</div>
							<div>{{colorItem.name}}</div>
						</div>

                        <div
                            class="exportCanvasBox_item"
							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
                            v-for="imgItem in item"
							draggable
							@dragstart="onDragstart(key)"
                        >
                            <img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="exportCanvasBox_center">
                <!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
            </div>
            <!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
            <div class="exportCanvasBox_right">
                <div class="" @click="setExport">export</div>
                <div class="" @click="multiselect">all</div>
            </div>
            <div class="mark_loading" v-show="isShowMark">
                <a-spin size="large" />
            </div>
        </div>
    </a-modal>
</template>
<script>
import {
    defineComponent,
    computed,
    h,
    ref,
    nextTick,
    inject,
    reactive,
    onMounted,
} from "vue";
import { Https } from "@/tool/https";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import { useStore } from "vuex";
import JSZip, { forEach } from "jszip";
import { message, Modal } from "ant-design-vue";
const FileSaver = require("file-saver");
export default defineComponent({
    components: {
        scaleImage,
        ExportNewCoolection,
    },
    props: ["msg", "sketchCatecoryList"],
    setup() {
        const store = useStore();

        let showUpgradePlan = ref(false);
        let canvas = reactive({});
        // let canvasDom = ref()
        let canvasWH = ref({
            width: 400,
            height: 1200,
        });
		canvasWH.value.width = [window.innerWidth/2.4]
		canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
		console.log(canvasWH.value.width);
        let sketch = computed(() => {
            return store.state.HomeStoreModule.showSketchList;
        });
        let sketchList = computed(() => {
            return store.state.UploadFilesModule.showSketchboard;
        });
        let allBoardData = computed(() => {
            return store.state.UploadFilesModule.allBoardData;
        });
        let likeDesignCollectionList = computed(() => {
            return store.state.HomeStoreModule.likeDesignCollectionList;
        });
        let isShowMark = false;
        // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
		let position = {
			//设置每个图形位置的初始值
			x: 0,
			y: 0,
			height: 0,
		};
        let init = () => {
            showUpgradePlan.value = true;
			console.log(position);
            nextTick().then(async () => {
                allBoardData.value.likeDesignCollectionList =
                    likeDesignCollectionList;
                let canvasBox = document.querySelector(
                    ".Export .exportCanvasBox_center"
                );
                canvasBox.innerHTML = ""; // 清空原有内容
                var canvasDom = document.createElement("canvas");
                canvasBox.appendChild(canvasDom);
                canvas = new fabric.Canvas(canvasDom, {
                    backgroundColor: "rgba(255, 255, 255)",
                    // fill: '#ffde7d',
                    // selection: false, //设置多选
                    width: canvasWH.value.width,
                    height: canvasWH.value.height,
                    isDrawingMode: false, // 开启绘图模式
                });
				canvasOnDrop()
                let disposeMoodboardShow = true;
                let arr = [
                    "disposeMoodboard",
                    "moodboardFiles",
                    "printboardFiles",
                    "colorBoards",
                    "sketchboardFiles",
                    "likeDesignCollectionList",
                ];
                
                let sketchGrouping = 3; //sketch分组
                let likeDesign = 4; //整体图分组
                let oldKey = "";
                let margin = 20; //每个图形边距
                // arr.forEach((item,index)=>{
                for (const item of arr) {
                    for (const key in allBoardData.value) {
                        if (item == key) {
                            //循环渲染顺序
                            let setImgWidth = canvasWH.value.width; //这是设置画布等宽
                            let sketchGroupingItem = [];
                            if (
                                disposeMoodboardShow &&
                                item == "disposeMoodboard" &&
                                allBoardData.value[key].length != 0 &&
                                allBoardData.value[key][0] != null
                            ) {
                                //如果是mood 需要判断用户是否点击layout
                                disposeMoodboardShow = false;
                            }
                            if (
                                item == "moodboardFiles" &&
                                !disposeMoodboardShow
                            ) {
                                continue;
                            }
                            if (item == "printboardFiles") {
                                setImgWidth = canvasWH.value.width / 8;
                            }
                            if (item == "sketchboardFiles") {
                                setImgWidth =
                                    (canvasWH.value.width -
                                        (sketchGrouping - 1) * 20) /
                                    sketchGrouping;
                            }
                            if (item == "likeDesignCollectionList") {
                                setImgWidth =
                                    (canvasWH.value.width -
                                        (likeDesign - 1) * 20) /
                                    likeDesign;
                            }
                            for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
                                await new Promise((resolve, reject) => {
                                    if (key == "colorBoards") {
                                        var text = new fabric.Text(
                                            allItem.tcx,
                                            {
                                                left: 0,
                                                top: 60,
                                                fontSize: 14,
                                                fontFamily: "Arial",
                                                textAlign: "left",
                                                fill: "black",
                                            }
                                        );
                                        let text1 = new fabric.Text(
                                            allItem.name,
                                            {
                                                left: 0,
                                                top: 80,
                                                width: 20,
                                                fontSize: 14,
                                                fontFamily: "Arial",
                                                textAlign: "left",
                                            }
                                        );
                                        let width =
                                            110 > text1.width
                                                ? 110
                                                : text1.width;
                                        var color = new fabric.Rect({
                                            width: width,
                                            height: 60,
                                            textAlign: "left",
                                            fill: `rgb(${allItem.rgbValue.r},${allItem.rgbValue.g},${allItem.rgbValue.b})`,
                                        });
                                        if (
                                            position.x + width >
                                                canvasWH.value.width ||
                                            oldKey != key
                                        ) {
                                            position.x = 0;
                                            position.y += position.height;
                                        }
                                        var group = new fabric.Group(
                                            [color, text, text1],
                                            {
                                                left: position.x,
                                                top: position.y,
                                                width: width,
                                                fill: "rgb(255,255,255)",
                                                cornerSize: 10, // 选中时，角的大小为20
                                                transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
                                                stroke: "#212121",
                                                strokeWidth: 1,
                                            }
                                        );
                                        // 将矩形对象添加到 canvas 中
                                        canvas.add(group);
                                        oldKey = key;
                                        position.x += width + margin;
                                        position.height = group.height + margin;
                                        resolve();
                                    } else {
                                        let itemCanvasImg = allItem.imgUrl;
                                        if (key == "likeDesignCollectionList") {
                                            itemCanvasImg =
                                                allItem.designOutfitUrl;
                                        }
                                        fabric.Image.fromURL(
                                            itemCanvasImg,
                                            (img) => {
                                                let proportion = img.height / img.width; //计算图形宽高比例
                                                let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
                                                if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
                                                    position.x = 0;
                                                    position.y += position.height;
                                                }
                                                img.set({
                                                    // width: setImgWidth/img.width,
                                                    // height: canvasWH.value.height/img.height,
                                                    left: position.x,
                                                    top: position.y,
                                                    scaleX:
                                                        setImgWidth / img.width,
                                                    scaleY:(img.width * proportion * scaleWH) / img.height,
                                                    cornerSize: 10, // 选中时，角的大小为20
                                                    // lockRotation:true,
                                                    // lockScalingX:true,
                                                    lockRotation: true,
                                                    crossOrigin: "anonymous",
                                                    transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
                                                    // cornerColor: "#a1de93", // 选中时，角的颜色是 青色
                                                });
                                                position.height = img.height * scaleWH + margin;
                                                if (key == "sketchboardFiles") {
                                                    position.x +=
                                                        img.width * scaleWH +
                                                        margin;
                                                    if (
                                                        sketchGroupingItem.length >=
                                                        3
                                                    ) {
                                                    } else {
                                                        sketchGroupingItem.push(
                                                            JSON.parse(
                                                                JSON.stringify(
                                                                    position
                                                                )
                                                            )
                                                        );
                                                    }
                                                    if (sketchGroupingItem.length >=3) {
                                                        let sketchXyIndex = {
                                                            maxIndex: 0,
                                                            maxNum: 9999999999,
                                                            minNum: 0,
                                                            minIndex: 0,
                                                        };
                                                        sketchGroupingItem.forEach(
                                                            (sketchItem,sketchIndex) => {
                                                                if (sketchItem.height <sketchXyIndex.maxNum) {
                                                                    sketchXyIndex.maxNum = sketchItem.height;
                                                                    sketchXyIndex.maxIndex = sketchIndex;
                                                                }
                                                                if (sketchItem.height > sketchXyIndex.minNum) {
                                                                    sketchXyIndex.minNum = sketchItem.height;
                                                                    sketchXyIndex.minIndex = sketchIndex;
                                                                }
                                                            }
                                                        );
                                                        if (allBoardData.value[key].length == allItemIndex + 1) {
                                                            position = sketchGroupingItem[sketchXyIndex.minIndex];
                                                        } else {
                                                            position = sketchGroupingItem[ sketchXyIndex.maxIndex];
                                                            position.y += position.height;
                                                            position.x -= img.width * scaleWH + margin;
                                                        }
                                                    }
                                                } else {
                                                    position.x += img.width * scaleWH;
                                                }
                                                img.lock_rotation = true;
                                                canvas.add(img);
                                                oldKey = key;
                                                resolve();
                                            },
                                            { crossOrigin: "Anonymous" }
                                        );
                                    }
                                });
                            }
                        }
                    }
                }
            });
        };
		let setCanvasImage = (itemCanvasImg)=>{
			fabric.Image.fromURL(
				itemCanvasImg,
				(img) => {
					let proportion = img.height / img.width; //计算图形宽高比例
					let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
					if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
						position.x = 0;
						position.y += position.height;
					}
					img.set({
						// width: setImgWidth/img.width,
						// height: canvasWH.value.height/img.height,
						left: position.x,
						top: position.y,
						scaleX:
							setImgWidth / img.width,
						scaleY:(img.width * proportion * scaleWH) / img.height,
						cornerSize: 10, // 选中时，角的大小为20
						// lockRotation:true,
						// lockScalingX:true,
						lockRotation: true,
						crossOrigin: "anonymous",
						transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
						// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
					});
					position.height = img.height * scaleWH + margin;
					if (key == "sketchboardFiles") {
						position.x +=
							img.width * scaleWH +
							margin;
						if (
							sketchGroupingItem.length >=
							3
						) {
						} else {
							sketchGroupingItem.push(
								JSON.parse(
									JSON.stringify(
										position
									)
								)
							);
						}
						if (sketchGroupingItem.length >=3) {
							let sketchXyIndex = {
								maxIndex: 0,
								maxNum: 9999999999,
								minNum: 0,
								minIndex: 0,
							};
							sketchGroupingItem.forEach(
								(sketchItem,sketchIndex) => {
									if (sketchItem.height <sketchXyIndex.maxNum) {
										sketchXyIndex.maxNum = sketchItem.height;
										sketchXyIndex.maxIndex = sketchIndex;
									}
									if (sketchItem.height > sketchXyIndex.minNum) {
										sketchXyIndex.minNum = sketchItem.height;
										sketchXyIndex.minIndex = sketchIndex;
									}
								}
							);
							if (allBoardData.value[key].length == allItemIndex + 1) {
								position = sketchGroupingItem[sketchXyIndex.minIndex];
							} else {
								position = sketchGroupingItem[ sketchXyIndex.maxIndex];
								position.y += position.height;
								position.x -= img.width * scaleWH + margin;
							}
						}
					} else {
						position.x += img.width * scaleWH;
					}
					img.lock_rotation = true;
					canvas.add(img);
					oldKey = key;
					resolve();
				},
				{ crossOrigin: "Anonymous" }
			);
		}
        //设置导出
        let setExport = async () => {
            var imageDataURL = canvas.toDataURL({
                format: "png", // 导出格式为 PNG
                quality: 1, // 图片质量为 1（最高质量）
            });
            let a = document.createElement("a");
            let img = [];
            let index = 0;
            img.push({
                imgUrl: imageDataURL,
                name: "collection.png",
            });
            let num = 0;
            for (let key in allBoardData.value) {
                if (key !== "colorBoards" && key !== "moodTemplateId") {
                    for (let item of allBoardData.value[key]) {
                        if (
                            key == "disposeMoodboard" &&
                            allBoardData.value[key][0] == undefined
                        ) {
                            break;
                        }

                        let nameTail = item?.imgUrl
                            ?.split(".")
                            .pop()
                            .split("?")
                            .shift();

                        let data = {
                            imgUrl: item.imgUrl,
                            name: item?.resData?.name + index + "." + nameTail,
                        };
                        if (key == "likeDesignCollectionList") {
                            data.imgUrl = item.designOutfitUrl;
                            data.name = "result" + index + "." + nameTail;
                        }
                        img.push(data);
                        index++;
                    }
                    num++;
                }
            }
            let dataList = [];
            likeDesignCollectionList.value.forEach((item) => {
                // let nameTail = item?.designOutfitUrl
                //     ?.split(".")
                //     .pop()
                //     .split("?")
                //     .shift();
                // let data = {
                //     imgUrl: item.designOutfitUrl,
                //     name: "result" + index + "." + nameTail,
                // };
                dataList.push(item.designItemId);
                // img.push(data);
                index++;
            });
            let mannequinList = [];
            await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
                .then((rv) => {
                    mannequinList = rv;
                })
                .catch((rv) => {});
            mannequinList.forEach((item) => {
                let nameTail = item?.split(".").pop().split("?").shift();
                let data = {
                    imgUrl: item,
                    name: "mannequin" + index + "." + nameTail,
                };
                img.push(data);
                index++;
            });
            downImg(img);
        };
        let getImgArrayBuffer = (url) => {
            return new Promise((resolve, reject) => {
                //通过请求获取文件blob格式
                let xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", url, true);
                xmlhttp.responseType = "blob";
                xmlhttp.onload = function () {
                    if (this.status == 200) {
                        resolve(this.response);
                    } else {
                        reject(this.status);
                    }
                };
                xmlhttp.send();
            });
        };
        let downImg = (imagesParams) => {
            let zip = new JSZip();
            let cache = {};
            let promises = [];
            for (let item of imagesParams) {
                const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
                    // 下载文件, 并存成ArrayBuffer对象(blob)
                    zip.file(item.name, data, { binary: true }); // 逐个添加文件
                    cache[item.title] = data;
                });
                promises.push(promise);
            }
            Promise.all(promises)
                .then(() => {
                    zip.generateAsync({ type: "blob" }).then((content) => {
                        // 生成二进制流
                        FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
                        isShowMark = false;
                    });
                })
                .catch((res) => {
                    // message.warning(t('HomeView.jsContent3'));
                    isShowMark = false;
                });
        };
        //关闭画布
        let cancelDsign = () => {
            showUpgradePlan.value = false;
			position = {
				//设置每个图形位置的初始值
				x: 0,
				y: 0,
				height: 0,
			};
			
        };
        //设置画布宽高
        let setMaxInput = (str, maxNum) => {
            if (str == "width") {
                // maxNum = window.innerWidth < 1100 ? 400 : maxNum;
				maxNum = [window.innerWidth/2.4]
				maxNum = maxNum.map(num => Math.round(num / 10) * 10)[0];
            }
            if (str == "width" && canvasWH.value.width >= maxNum) {
                canvasWH.value.width = maxNum;
            } else if (str == "height" && canvasWH.value.height >= maxNum) {
                canvasWH.value.height = maxNum;
            }
            canvas.setHeight(canvasWH.value.height);
            canvas.setWidth(canvasWH.value.width);
        };

		let closeNav = ref(false)
		let setCloseNav = ()=>{
			closeNav.value = !closeNav.value
		}
		
		function multiselect() {
			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
				canvas
			})
			// console.log(sel)
			canvas.setActiveObject(sel)
			canvas.requestRenderAll()
			const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
			if (activeObject && activeObject.type === 'activeSelection') {
				const totalWidth = activeObject.width * activeObject.scaleX;
				const totalHeight = activeObject.height * activeObject.scaleY;
				console.log('Total Width:', totalWidth);
				console.log('Total Height:', totalHeight);
			}

		}
		let currentType = ref()
		let onDragstart = (type)=>{
			console.log(type);
			currentType.value = type
		}
		let canvasOnDrop = ()=>{
			canvas.on('drop', function(opt) {
				// 省略部分代码......
				let offset = {
					left: canvas.getSelectionElement().getBoundingClientRect().left,
					top: canvas.getSelectionElement().getBoundingClientRect().top
				}
				let point = {
					x: opt.e.x - offset.left,
					y: opt.e.y - offset.top,
				}
				let pointerVpt = canvas.restorePointerVpt(point)
				switch (currentType.value) {
					case 'disposeMoodboard':
					createRect(pointerVpt.y, pointerVpt.x)
					break
					case 'circle':
					createCircle(pointerVpt.y, pointerVpt.x)
					break
					case 'img':
					createImg(pointerVpt.y, pointerVpt.x)
					break
				}
				// 创建完元素，把当前操作的元素类型设置回 null
				currentType.value = null
				})

				// 创建矩形
				function createRect(top, left) {
				canvas.add(new fabric.Rect({
					top,
					left,
					width: 60,
					height: 60,
					fill: 'pink'
				}))
			}
		}
		
        onMounted(() => {});

        return {
            showUpgradePlan,
            canvasWH,
            init,
            setExport,
            cancelDsign,
            setMaxInput,
            isShowMark,
            allBoardData,
			closeNav,
			setCloseNav,
			multiselect,
			onDragstart,
        };
    },
    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: {},
});
</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(0.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;
        display: flex;
        margin-top: 2rem;
        justify-content: space-between;
        .exportCanvasBox_title {
            margin-bottom: .5rem;
            font-size: 1.8rem;
            font-weight: 600;
			margin-top: 2rem;
			display: flex;
			justify-content: space-between;
			padding-right: 2rem;
			cursor: pointer;
			.icon{
				transition: all .3s;
			}
			&.icon-rotate{
				transform: rotate(90deg);
			}
        }
		.exportCanvasBox_intro{
			margin-bottom: 1rem;
            font-size: 1.6rem;
            font-weight: 600;
			width: 100%;
		}
        .exportCanvasBox_right,
        .exportCanvasBox_left {
			width: 25rem;
			height: 100%;
			overflow-x: hidden;
        }
        .exportCanvasBox_left {
            label {
                cursor: pointer;
                display: flex;
                div {
                    width: 5rem;
                }
                input {
                    width: 10em;
                }
            }
            .exportCanvasBox_img {
				transition: .3s all;
				overflow: hidden;
				height: auto;
				&.closeNav{
					// height: 0;
				}
                .exportCanvasBox_allItem {
                    display: flex;
                    flex-wrap: wrap;
                    .exportCanvasBox_item {
                        text-align: center;
                        img {
                            max-width: 7rem;
                            max-height: 7rem;
                            object-fit: contain;
							margin-right: 2rem;
							margin-bottom: 2rem;
                        }
                    }
					.exportCanvasBox_item_color{
						width: 8rem;
						margin-right: 2rem;
						margin-bottom: 2rem;
						.exportCanvasBox_item_BGcolor{
							height: 5rem;
						}
					}
					.exportCanvasBox_item_dispose{
						img{
							max-width: 100%;
							max-height: 100%;
						}
					}
                }
            }
        }
        .exportCanvasBox_center {
            height: 100%;
            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);
            background: #f9fafb;
        }
        //进度完成字体颜色
        .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>