<template>
	<div class="home_page">
		<HeaderComponent></HeaderComponent>
		<div class="page_content">
			<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
			<div class="page_content_body">
				<div class="home_page_body">
					<div class="home_page_left">
						<div class="home_page_left_content">
							<!-- 空状态 start-->
							<div class="home_left_null" v-show="!isHaveReviewCollection">
								<div>
									<!-- <img
                                        class="home_null_icon"
                                        src="@/assets/images/homePage/null_img.png"
                                    /> -->
									<div class="new_collection_button" @click="startNewCollection()">
										{{ $t('HomeView.GetStarted') }}
									</div>
								</div>
								<div class="is_finish_loading" v-show="isFinishLoading">
									<a-spin size="large"></a-spin>
								</div>
							</div>
							<!-- 空状态 end-->

							<!-- 有图状态 start-->
							<div class="home_left_info" v-show="isHaveReviewCollection">
								<div class="left_info_top">
									<div class="button_second" @click="startNewCollection()">
										{{ $t('HomeView.Start') }}
									</div>
									<div class="button_first button_margin" @click="recollection()">
										{{ $t('HomeView.Edit') }}
									</div>
								</div>
								<div class="left_info_content scroll_style">
									<div class="left_info_content_body" ref="collection_canvas">
										<NewCollectionReview id="collectionReview"></NewCollectionReview>
									</div>
								</div>
							</div>
							<!-- 有图状态 end-->
						</div>
					</div>
					<div class="home_page_right">
					
						<div class="right_top">
							<div class="right_top_left">
								<div class="button_second" @click="designNewCollection()">
									{{ $t('HomeView.Design') }}
								</div>
								<div class="button_first button_margin_14" v-show="designCollectionId"
									@click="resDesignCollection()">
									{{ $t('HomeView.Redesign') }}
								</div>
							</div>
						</div>

						<div class="right_content_block">
							<div class="right_content_header">
								<div class="content_header_left">
									<i class="fi fi-rs-comments"></i><span class="content_header_des">
										{{ $t('HomeView.GeneratedDesign') }}
										</span>
								</div>
							</div>

							<div class="right_content_body">
								<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:designCollectionList.length != 0}">
									<div class="right_content_img_item">
										<!-- <draggable 
											group="people" > -->
											<div class="content_img_block" v-for="(
												design, index
											) in designCollectionList" :key="design?.designItemId" @click="
												designDetail(
													design,
													index,
													designCollectionList,
													'dislike'
												)
												">
											<div class="content_img_flex">
												<img class="content_img" :src="design.designOutfitUrl" />
											</div>
											<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
												likeDesignCollection(
													design,
													index
												)
												"></div>
										</div>
										<!-- </draggable> -->
										
									</div>
								</div>
							</div>

							<div class="right_content_header">
								<div class="content_header_left">
									<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
								</div>
								<div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
									{{ $t('HomeView.Export') }}
								</div>
							</div>

							<div class="right_content_body">
								<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:likeDesignCollectionList.length != 0}">
									<div class="right_content_img_item" id="right_content_img_block">
										<!-- <div class="content_img_block" v-for="(
												design, index
											) in likeDesignCollectionList" :key="design?.id" @click="
												designDetail(
													design,
													index,
													likeDesignCollectionList,
													'like'
												)
												">
											<div class="content_img_flex">
												<img class="content_img" v-lazy="design.designOutfitUrl"
													:key="design.designOutfitUrl" />
											</div>
											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
												dislikeDesignCollection(
													design,
													index
												)
												"></div>
										</div> -->
										<div class="content_img_block" draggable
											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
											@click="designDetail(
													design,
													index,
													likeDesignCollectionList,
													'like'
												)"
											@dragstart="dragstart($event, index)"
											@dragover.prevent 
											@drop="dragDrop($event, index)">
											<div class="content_img_flex">
												<img class="content_img" :src="design.designOutfitUrl"
													:key="design.designOutfitUrl" />
											</div>
											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
												dislikeDesignCollection(
													design,
													index
												)
												"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
		<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
		<!-- 导出缩略图的蒙层 start-->
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
		<!-- 导出缩略图的蒙层 end-->

		<!-- design collection的进度蒙层  start-->
		<div class="progress_mark" v-show="showDesignMark">
			<div class="mark_content">
				<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
				<div>
					<a-spin :indicator="indicator" />
				</div>
			</div>
		</div>
		<!-- design collection的进度蒙层  end-->
		<RobotAssist></RobotAssist>

	</div>

</template>

<script lang="ts">
import { defineComponent, h, ref, computed ,inject} from "vue";
import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import DesignDetail from "@/component/Detail/DesignDetail.vue";
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import html2canvas from "html2canvas";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { LoadingOutlined } from "@ant-design/icons-vue";
import draggable from 'vuedraggable'
import JSZip from "jszip";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import i18n from "@/lang";
import { useI18n } from "vue-i18n";
const FileSaver = require("file-saver");

export default defineComponent({
	components: {
		HeaderComponent,
		CollectionModal,
		NewCollectionReview,
		DesignDetail,
		ExportNewCoolection,
		RobotAssist,
		draggable
	},
	setup() {
		const store = useStore();
		let likeDesignCollectionList: any = computed(() => {
			return store.state.HomeStoreModule.likeDesignCollectionList;
		});
		let designCollectionList: any = computed(() => {
			return store.state.HomeStoreModule.designCollectionList;
		});
		let userGroupId: any = computed(() => {
			return store.state.HomeStoreModule.userGroupId;
		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
		let designCollectionId: any = computed(() => {
			return store.state.HomeStoreModule.designCollectionId;
		});
		let designId: any = computed(() => {
			return store.state.HomeStoreModule.designId;
		});
		let contentImgMax = {
			width:'',
			height:'',
		}
		let contentImg = {
			width:'',
			height:'',
		}
		let userInfo:any = {}
		let {t} = useI18n()
		return {
			store,
			likeDesignCollectionList,
			designCollectionList,
			userGroupId,
			designCollectionId,
			designId,
			contentImgMax,
			contentImg,
			userInfo,
			t,
		};
	},
	data() {
		return {
			isHaveReviewCollection: false,
			isFinishLoading: false,
			isShowMark: false, //导出的loading蒙层
			indicator: h(LoadingOutlined, {
				style: {
					fontSize: "4.8rem",
					marginTop: "3rem",
					color:"#341e57",
				},
				spin: true,
			}),
			designProgress: 0,
			showDesignMark: false,
			startDesignType: "design", //设计类型 design 和 resdesign
			disLikeLoading: false, //不喜欢防抖
			likeLoading: false, //喜欢防抖
			dragIdx:0,
			designRandom:'',
		};
	},
	mounted() {
		let userInfo:any = getCookie("userInfo")
        this.userInfo = JSON.parse(userInfo);
		this.store.dispatch('get_clothingType')

		// console.log(this.store.state.UserHabit);
		
		let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
		if (noRefresh) {
			let colorBoards =
				this.store.state.UploadFilesModule.allBoardData.colorBoards ||
				[];
			if (colorBoards.length) {
				this.isHaveReviewCollection = true;
			}
		} else {
			this.store.commit("setUserGroupId", this.$route.params.id);
			this.store.commit("clearAllCollection");
		}
		if (this.$route.params.id) {
			this.getHistoryChoose(this.$route.params.id, "normal");
		} else {
			this.store.commit("clearAllData");
		}
	},
	directives:{
		mousewheel:{
			mounted (el) {
				// let parent = el.parentNode
				// let num = 0
				// let width = el.offsetWidth
				// let parentWidth = parent.offsetWidth
				// el.addEventListener('mouseover',()=>{
				// 	width = el.offsetWidth
				// 	parentWidth = parent.offsetWidth
				// })
				// el.addEventListener('mousewheel',(e:MouseEvent)=>{
				// 	if(0>(e as WheelEvent).deltaY && width>parentWidth){
				// 		num+=25
				// 		if(num >= 0){
				// 			num = 0
				// 		}
				// 	}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
				// 		num-=25
				// 		if(num<=parentWidth - width){
				// 			num = parentWidth - width
				// 		}
						
				// 	}
				// 	el.style.marginLeft = num+'px'
				// })
				let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
				let dom:any = document.getElementsByClassName('right_content_body')
				let mouseover = ()=>{
					bodyDom.classList.add('active')
				}
				let mouseleave = ()=>{
					bodyDom.classList.remove('active')
				}
				dom.forEach((item:any) => {
					item.addEventListener('mouseover',mouseover)
					item.addEventListener('mouseleave',mouseleave)
				});
				
			
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				},true)
			}
		}
	},
	methods: {
		addTeam (team:any) {
		this.likeDesignCollectionList.push(team)
		},
	
		dragstart (e:any, index:any) {
		this.dragIdx = index
		},
		dragDrop (e:any, index:any) {
		let _teams = this.likeDesignCollectionList  //将hotteams存起来
		let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
		_teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
		_teams.splice(index, 0, _dragitem)  //将被拖拽的那条数据放到数组中指定的位置
		},




		formatter(value: number) {
			return `${value}%`;
		},
		//开始设计collection
		startNewCollection() {
			let collectionModal: any = this.$refs.collectionModal;
			this.store.commit("clearAllData");
			collectionModal.changeCollectionModal(true);
		},

		//recollection
		recollection() {
			let collectionModal: any = this.$refs.collectionModal;
			this.store.commit("clearAllData");
			collectionModal.changeCollectionModal(true);
			collectionModal.recollection();
		},

		//完成设计
		finishCollection() {
			let _this = this;
			_this.isFinishLoading = true;
			this.getPantongName()
				.then((res) => {
					_this.store.commit("setAllBoardData");
					_this.isHaveReviewCollection = true;
					_this.isFinishLoading = false;
				})
				.catch((res) => {
					_this.isFinishLoading = false;
				});
		},

		//查询颜色的潘通值和txc
		getPantongName() {
			let colorBoards = this.store.state.UploadFilesModule.colorBoards;
			let data: any = [];
			for (let v of colorBoards) {
				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
				let hsv = rgbToHsv(color);
				v.hsv = hsv[0] + hsv[1] + hsv[2];
				data.push({
					h: hsv[0],
					s: hsv[1],
					v: hsv[2],
				});
			}
			return new Promise((resolve: any, reject: any) => {
				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
					.then((rv: any) => {
						if (rv) {
							rv.forEach((ele: any, index: number) => {
								colorBoards[index].id = ele.id;
								colorBoards[index].tcx = ele.tcx;
								colorBoards[index].name = ele.name;
							});
							this.store.commit("setColorboardList", colorBoards);
							resolve();
						}
					})
					.catch((res) => {
						reject();
					});
			});
		},

		getContainer() {
			return document.querySelector("#system_silder");
		},

		//设计新的collection
		designNewCollection() {
			let { colorBoards } =
				this.store.state.UploadFilesModule.allBoardData;
			if (!colorBoards || colorBoards?.length < 1) {
				message.warning(
					this.t('HomeView.jsContent1')
				);
				return;
			}
			let data = this.getDesignData("");
			Https.axiosPost(Https.httpUrls.designCollection, data)
			
				.then((rv: any) => {
					if (rv) {
						this.store.commit(
							"setDesignCollectionList",
							rv.designCollectionItems
						);
						this.store.commit("setLikeDesignCollectionList", []);
						this.store.commit("deleteUserGroupId");
						this.store.commit(
							"setDesignCollectionId",
							rv.collectionId
						);
						this.store.commit("setDesignId", rv.designId);
						// this.designProgress = 0;
						this.startDesignType = "design";
					}
				})
				.catch((res) => {
					this.showDesignMark = false;
				})
				// setTimeout(() => {
					this.getDesignProcess(this.designRandom);
				// }, 1000);
		},
		//重新设计collection
		resDesignCollection() {
			let { colorBoards } =
				this.store.state.UploadFilesModule.allBoardData;
			if (!colorBoards || colorBoards?.length < 1) {
				message.warning(
					this.t('HomeView.jsContent2')
				);
				return;
			}

			let data = this.getDesignData(this.designCollectionId);
			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
				.then((rv: any) => {
					if (rv) {
						this.store.commit(
							"setDesignCollectionList",
							rv.designCollectionItems
						);
						// this.designProgress = 0,
						this.startDesignType = "resDesign";
					}
				})
				.catch((res) => {
					this.showDesignMark = false;
				});
				// setTimeout(() => {
					this.getDesignProcess(this.designRandom);
				// }, 1000);

		},
 
		getDesignData(designCollectionId: any) {
			let {
				moodboardFiles,
				printboardFiles,
				disposeMoodboard,
				// generatePrintFiles,
				colorBoards,
				sketchboardFiles,
				marketingSketchFiles,
				moodTemplateId,
			} = this.store.state.UploadFilesModule.allBoardData;
			this.randomNum()
			let workspace = this.store.state.Workspace.workspace
			let data: any = {
				colorBoards: this.getColorBoard(colorBoards),
				// marketingSketchs: this.getBoardId(marketingSketchFiles),
				moodBoards: this.getBoardId(moodboardFiles),
				printBoards: this.getPrintId(printboardFiles),
				sketchBoards: this.getSkecthBoard(sketchboardFiles),
				switchCategory: !workspace.overallSingle ?"": workspace.position,
				singleOverall: !workspace.overallSingle ? "overall" : "single",
				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
				// templateId: 3377,
				templateId: workspace.mannequinId?workspace.mannequinId:'',
				modelType:workspace.mannequinType,
				modelSex:workspace.sex,
				moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				processId:this.designRandom
			};
			if (designCollectionId) {
				data.collectionId = designCollectionId;
			}
			this.designProgress = 0;
			this.showDesignMark = true;
			return data;
		},

		//deisgn的进度
		getDesignProcess(num:any) {
			Https.axiosGet(Https.httpUrls.designProcess,{params:{processId:num}}).then((rv: any) => {
				if (rv) {
					
				}
				if (this.showDesignMark) {
					this.designProgress = rv * 100;
					if(rv == 100){
						setTimeout(() => {
							this.showDesignMark = false 
							this.designProgress = 0
						}, 500);

					}
					setTimeout(() => {
						this.getDesignProcess(num);
					}, 500);
				}
			})
			// Https.axiosPost(Https.httpUrls.designProcess, {}).then(
			// 	(rv: any) => {
			// 		if (rv < 1 && this.showDesignMark) {
			// 			this.designProgress = rv * 100;
			// 			setTimeout(() => {
			// 				this.getDesignProcess();
			// 			}, 1000);
			// 		}
			// 	}
			// );
		},
		randomNum(){
			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
		},
		getBoardId(boardData: any) {
			let dataList = boardData.map((v: any) => {
				let data: any = {
					id: v.resData.id,
					designType: v.resData.designType,
				};
				return data;
			});
			return dataList;
		},

		getPrintId(boardData: any) {
			let dataList = boardData.map((v: any) => {
				let data: any = {
					id: v.resData.id,
					designType: v.resData.designType,
					isPin: v.pin ? 1 : 0,
				};
				return data;
			});
			return dataList;
		},

		getSkecthBoard(boardData: any) {
			let sketchBoards = boardData.map((v: any) => {
				let data = {
					designType: v.resData.designType,
					isPin: v.pin ? 1 : 0,
					level2Type: v.category,
					sketchBoardId: v.resData.id,
				};
				return data;
			});
			return sketchBoards;
		},

		getColorBoard(boardData: any) {
			let colorBoards = boardData.map((v: any) => {
				let data = {
					id: v.id,
					name: v.name,
					tcx: v.tcx,
					rgbValue: "",
				};
				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
				return data;
			});
			return colorBoards;
		},

		likeDesignCollection(design: any, index: any) {
			let data = {
				designItemId: design.designItemId,
				userGroupId: this.userGroupId,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
			};
			if (this.likeLoading) {
				return;
			}
			this.likeLoading = true;
			Https.axiosPost(Https.httpUrls.designLike, data)
				.then((rv: any) => {
					if (rv) {
						this.store.commit("setUserGroupId", rv.userGroupId);
						design.groupDetailId = rv.groupDetailId;
						this.store.commit(
							"addLikeDesignCollectionList",
							design
						);
						this.store.commit("deleteDesignCollectionList", index);
						if (this.startDesignType === "resDesign") {
							this.getHistoryChoose(this.userGroupId, "like");
						}
					}
					this.likeLoading = false;
				})
				.catch((rv) => {
					this.likeLoading = false;
				});
		},

		//不喜欢设计
		dislikeDesignCollection(design: any, index: any) {
			let data = {
				designId: design.designId || this.designId,
				designPythonOutfitId:design.designOutfitId,
				groupDetailId: design.groupDetailId,
				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
			};
			if (this.disLikeLoading) {
				return;
			}
			this.disLikeLoading = true;
			Https.axiosPost(Https.httpUrls.designDislike, data)
				.then((rv: any) => {
					if (rv) {
						this.store.commit("addDesignCollectionList", design);
						this.store.commit(
							"deleteLikeDesignCollectionList",
							index
						);
						if (!this.likeDesignCollectionList.length) {
							this.store.commit("deleteUserGroupId");
						}
					}
					this.disLikeLoading = false;
				})
				.catch((rv) => {
					this.disLikeLoading = false;
				});
		},

		//获取选择的组
		getHistoryChoose(userGroupId: any, type: any) {
			this.isShowMark = true;
			let url =
				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
			Https.axiosGet(url)
				.then((rv: any) => {
					this.dealHistoryChooseData(rv, type);
					this.isShowMark = false;
				})
				.catch((rv) => {
					this.isShowMark = false;
				});
		},

		//处理选择组的数据
		dealHistoryChooseData(data: any, type: any) {
			let collectionData = {
				moodboardFiles: this.dealViewChooseData(
					data.collection.moodBoards,"Moodboard"
				),
				printboardFiles: this.dealViewChooseData(
					data.collection.printBoards,"Printboard"
				),
				generatePrintFiles: [],
				colorBoards: this.dealViewChooseColor(
					data.collection.colorBoards
				),
				sketchboardFiles: this.dealViewChooseData(
					data.collection.sketchBoards,"Sketchboard"
				),
				marketingSketchFiles: this.dealViewChooseData(
					data.collection.marketingSketchs,""
				),
				disposeMoodboard: data.collection.moodTemplateId?[{
					id:data.collection.moodTemplateId,
					imgUrl:data.collection.moodTemplateUrl,
					resData:{
						name:data.collection.moodTemplateName,
					}
				}]:[]
			};
			this.store.commit("setAllBoardDataChoose", collectionData);
			this.store.commit(
				"setDesignCollectionId",
				data.collection.collectionId
			);
			this.isHaveReviewCollection = true;
			if (type === "normal") {
				let likeDesignCollectionList = data.userLikeDetails.map(
					(v: any) => {
						let data = {
							...v,
							groupDetailId: v.id,
							designItemUrl: v.designOutfitUrl,
						};
						return data;
					}
				);
				this.store.commit(
					"setLikeDesignCollectionList",
					likeDesignCollectionList
				);
			}
		},

		//统一处理选择组的渲染数据
		dealViewChooseData(data: any,str:string) {
			if (!data) {
				return [];
			}
			let filesList = data.map((v: any) => {
				let newData: any = {
					imgUrl: v.url?v.url:v.designOutfitUrl,
					id: v.id,
					status: "done",
					resData: v,
					type_:{
						type1:'material',
						type2:v.level1Type
					}
				};
				if (v.level1Type === "Sketchboard") {
					newData.pin = v.isPin;
					newData.category = v.level2Type;
				}
				if (v.level1Type === "Printboard") {
					newData.pin = v.isPin;
				}
				return newData;
			});
			return filesList;
		},

		//统一处理选择组的渲染数据
		dealViewChooseColor(data: any) {
			let colorList = data.map((v: any) => {
				let rgbValue = v.rgbValue.split(" ");
				let newData: any = {
					id: v.id,
					name: v.name,
					tcx: v.tcx || "",
					rgbValue: {
						r: rgbValue[0],
						g: rgbValue[1],
						b: rgbValue[2],
						a: 1,
					},
				};
				return newData;
			});
			return colorList;
		},

		//导出合成图
		async exportCanvas() {
			let collectionReview: any = document.querySelector(
				"#exportNewCoolection"
			);
			let rightContentImgBlock: any = document.querySelector(
				"#right_content_img_block"
			);
			let a = document.createElement("a");
			this.isShowMark = true;
			let img:any = []
			await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
				(canvas) => {
					let blob: any = dataURLtoBlob(
						canvas.toDataURL("image/png")
					);
					let allBoardData: any =
						this.store.state.UploadFilesModule.allBoardData;
					let index = 0;
					img.push({
							imgUrl: URL.createObjectURL(blob),
							name: "collection.png",
						})
						console.log(URL.createObjectURL(blob));
						
					for (let key in allBoardData) {
						if (key !== "colorBoards" && key !== "moodTemplateId") {
							for (let item of allBoardData[key]) {
								let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
								let data = {
									imgUrl: item.imgUrl,
									name:
										item?.resData?.name +
										index +
										"." +
										nameTail,
								};
								img.push(data);
								index++;
							}
						}
					}
					// a.setAttribute('href', URL.createObjectURL(blob));
					// a.setAttribute('download', `collection.png`);
					// a.click();
				}
			);
			await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
				(canvas) => {
					let blob: any = dataURLtoBlob(
						canvas.toDataURL("image/png")
					);
					let allBoardData: any =
						this.store.state.UploadFilesModule.allBoardData;
					let index = 0;
					img.push({
							imgUrl: URL.createObjectURL(blob),
							name: "achievement.png",
						},)
					this.likeDesignCollectionList.forEach((item:any) => {
						let data = {
							imgUrl:item.designItemUrl,
							name:item.pictureName
						}
						img.push(data)
					});
					// for (let key in allBoardData) {
					// 	if (key !== "colorBoards" && key !== "moodTemplateId") {
					// 		for (let item of allBoardData[key]) {
					// 			// console.log(item, 666);

					// 			let nameTail = item.imgUrl.split(".").pop().split("?").shift();
								
					// 			let data = {
					// 				imgUrl: item.imgUrl,
					// 				name:
					// 					item?.resData?.name +
					// 					index +
					// 					"." +
					// 					nameTail,
					// 			};
					// 			img.push(data);
					// 			index++;
					// 		}
					// 	}
					// }
				}
			);
			this.downImg(img);
			
		},

		//打开图片详情
		designDetail(
			design: any,
			index: number,
			collectionList: any,
			type: string
		) {
			let designDetail: any = this.$refs.designDetail;
			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
			let data = {
				design: design,
				index: index,
				collectionList: collectionList,
				type: type,
			};
			designDetail.showDesignDetailModal(data);
		},

		//完成单个图片设计
		finishRedesign(event: any) {
			let { design, index, type } = event;
			if (type === "dislike") {
				this.store.commit("setSingleDesignCollectionList", {
					index: index,
					design: design,
				});
			} else {
				this.store.commit("setSingleLikeDesignCollectionList", {
					index: index,
					design: design,
				});
			}
		},
	
		//通过url 转为blob格式的数据
		getImgArrayBuffer(url: any) {
			
			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();
			});
		},
		// imgDataUrl 数据的url数组
		downImg(imagesParams: any) {
			let _this: any = this;
			let zip = new JSZip();
			let cache: any = {};
			let promises = [];

			for (let item of imagesParams) {
				const promise = _this
					.getImgArrayBuffer(item.imgUrl)
					.then((data: any) => {
						// 下载文件, 并存成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: any) => {
						// 生成二进制流
						FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
						this.isShowMark = false;
					});
				})
				.catch((res) => {
					message.warning(this.t('HomeView.jsContent3'));
					this.isShowMark = false;
				});
		},
	},
});
</script>
<style lang="less" scoped>
.home_page {
	width: 100%;
	height: 100%;
	padding: 0 9rem;
	overflow: hidden;
	min-width: 1024px;
	position: relative;
	// left: 50%;
	// margin-left: -50%;
	// transform: translateX(-50%);
	.page_content {
		position: relative;
		.page_content_body {
			position: absolute;
			width: 100%;
			height: 100%;
			padding-bottom: 2.1rem;
			box-sizing: border-box;

			.home_page_body {
				width: 100%;
				height: calc(100% - 7rem);
				display: flex;
				// padding-left: 0.7rem;
				box-sizing: border-box;

				.home_page_left {
					// width: 44.4rem;
					width: 55rem;
					height: 100%;
					padding: 2rem 0 0 0;
					background: rgba(255, 255, 255, 0.2);

					.home_page_left_content {
						height: 100%;

						.home_left_null {
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							width: 100%;
							height: 100%;
							position: relative;
							background: #f7f8fa;
							border: 1px solid #f2f2f9;
							border-radius: 2rem;
							overflow: hidden;

							.home_null_icon {
								display: block;
								width: 32.3rem;
							}

							.new_collection_button {
								padding: .5rem 5rem;
								height: 4rem;
								line-height: 4rem;
								background: #fff;
								font-size: 1.3rem;
								color: #000000;
								margin: 1.2rem auto 0;
								text-align: center;
								cursor: pointer;
								display: inline-block;
								box-sizing: initial;
								border: 2px solid #000;
								font-weight: 600;
								border-radius: 15px;
							}

							.is_finish_loading {
								width: 100%;
								height: 100%;
								position: absolute;
								left: 0;
								top: 0;
								background: #ffffff;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.home_left_info {
							height: 100%;

							.left_info_top {
								padding: 0 0 1.3rem 0;
								display: flex;

								.button_margin {
									margin-left: 2rem;
								}
							}

							.left_info_content {
								width: 100%;
								height: calc(100% - 6.9rem);
								overflow-y: auto;
								background: #ffffff;
								&.left_info_content::-webkit-scrollbar {
									display: none;
								}

								.left_info_content_body {
									width: 100%;
								}
							}
						}
					}
				}

				.home_page_right {
					// width: calc(100% - 44.4rem);
					flex: 1;
					height: 100%;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.right_top {
						padding: 2rem 3.2rem 2rem 1.2rem;
						display: flex;
						justify-content: space-between;
						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
						background: rgba(255, 255, 255, 0.4);

						.right_top_left {
							display: flex;
							align-items: center;

							.button_margin_14 {
								margin-left: 1.4rem;
							}
						}
					}

					.right_content_block {
						height: calc(100% - 8.584rem);
							overflow-y: auto;

						&.right_content_block::-webkit-scrollbar{display: none;}
						&.active{
							overflow: hidden;
						}
						.right_content_header {
							display: flex;
							justify-content: space-between;
							height: 5.5rem;
							align-items: center;
							padding: 0 3.2rem 0 1.9rem;
							background: rgba(255, 255, 255, 0.2);

							.content_header_left {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.icon-dangqianweizhi {
									font-size: 1.6rem;
									color: #000;
								}

								.content_header_des {
									font-size: 1.6rem;
									color: #000000;
									margin-left: 1rem;
									font-weight: 900;
								}
							}
						}
						.right_content_body {
							padding: 0 1.8rem 0 1.2rem;
							background: rgba(255, 255, 255, 0.2);
							height: calc(50% - 5.5rem);
							min-height: 280px;

							.right_content_img_block {
								// overflow-y: auto;
								background: #f6f6fa;
								border-radius: 2rem;
								height: 100%;
								display: flex;
								width: auto;
								// overflow: hidden;
								align-items: center;
								// padding-bottom: 1rem;
								overflow-x: auto;
								&.active::-webkit-scrollbar-button:single-button{
									display: none;
								}
								&.active::-webkit-scrollbar {
									/* 竖轴的宽度 */
									width: 1rem;
									/* 横轴的高度 */
									height: 1rem;
									transition: all .3s;
								}
								/* 进度 */
								&.active::-webkit-scrollbar-thumb {
									border-radius: 1rem;
									background: rgba(238, 238, 244, 0);
								}
								/* 轨道 */
								&.active::-webkit-scrollbar-track {
									border-radius: 1rem;
									background: rgba(238, 238, 244, 0);
								}
								&.active:hover {
									// overflow-x: scroll;
									&.active::-webkit-scrollbar-thumb {
										background: #543087;
									}
									/* 轨道 */
									&.active::-webkit-scrollbar-track {
										background: rgba(84, 48, 135,.2);
									}
								}
								>div{
									display: flex;
									padding: 0 2.8rem 0 0.9rem;
									height: 100%;
									align-items: center;
								}
								.content_img_block {
									// width: 20.1rem;
									width: auto;
									height: 37rem;
									// height: 29.5rem;
									margin-right: 1rem;
									// margin-bottom: 1rem;
									min-width: 127px;
									min-height: 271px;

									display: inline-block;
									position: relative;
									vertical-align: top;
									flex-shrink: 0;
									max-height: 100%;
									&:hover .icon_like {
										display: block;
									}

									&:nth-child(4n) {
										margin-right: 0;
									}

									.content_img_flex {
										display: flex;
										justify-content: center;
										align-items: center;
										width: 100%;
										height: 100%;
									}

									.content_img {
										max-width: 100%;
										max-height: 100%;
									}

									.icon_like {
										font-size: 2.4rem;
										top: 1rem;
										right: 1rem;
										position: absolute;
										cursor: pointer;
										display: none;
									}

									.icon-jushoucang {
										color: #000;
									}

									.icon-jushoucanggift {
										color: rgba(52, 53, 121, 1);
									}
								}
							}
						}
					}
				}
			}
		}

		.page_content_bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}

	.progress_mark {
		background: #ffffff;
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;

		.mark_content {
			text-align: center;
		}
	}
}
</style>
<style lang="less">
.ant-modal-root{

	.ant-modal-mask{
		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
		min-width: 1024px;
		border-radius: 1rem;
		overflow: hidden;
		height: calc(100% - 7rem);
		bottom: 0;
		top: auto;
		margin: 0 9rem;
	}
	.ant-modal-centered{
	top: 7rem;
	min-width: 1024px;
	// left: 50%;
	// margin-left: -50%;
	.ant-modal{
		min-width: .65*1024px;
	}


	}
}

</style>