<template>
		<a-modal
            class="productImg_modal generalModel"
            v-model:visible="productImg"
            :footer="null"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="productImgMask"
			:keyboard="false"
			:destroyOnClose="true"
        >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
		</div>
		<div class="productImg_content">
			<div class="modal_title_text">
				<div>Finalize</div>
				<div class="modal_title_text_intro"></div>
			</div>
			<div class="productImg_content_bottom">
				<div class="productImg_left">
					<div class="productImg_content_item_title">Select Collection</div>
					<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
						<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
							<img v-lazy="item.designOutfitUrl" alt="">
						</div>
					</div>
					<div class="productImg_content_item_title">Up Load</div>
					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
                        <div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
                            <div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
                                <a-spin
                                    :indicator="indicator"
                                    tip="Uploading..."
                                />
                            </div>
                            <div
                                class="upload_file_item_content content_item_imgBox_itemImg"
                                v-show="file?.status === 'done'"
                            >
                                <img :src="file?.imgUrl" class="upload_img" />
								<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
									<i class="fi fi-rr-trash"></i>
								</div>
                            </div>
                        </div>
                        <div class="upload_file_item upload_component ">
						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
                            <a-upload
                                :action="uploadUrl + '/api/element/upload'"
                                list-type="picture-card"
								:capture="null"
                                :data="{
                                    ...upload,
                                }"
                                :headers="{ Authorization: token }"
                                :before-upload="beforeUpload"
                                v-model:file-list="fileList"
								:multiple="true"
								:maxCount="8"
                                accept=".jpg,.png,.jpeg,.bmp"
                                @change="(file) => fileUploadChange(file)"
                            >

                                <div
                                    class="upload_tip_block"
                                >
                                    <i class="fi fi-br-upload"></i>
                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
                                </div>
                            </a-upload>
                        </div>
                    </div>
					<div class="productImg_content_item_title">Magic Tools</div>


				</div>
				<div class="productImg_right">
					<div class="productImg_content_item_title">Selected Product</div>
					<div class="productImg_right_item_box generalScroll" v-mousewheel>
						<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
							<img v-lazy="item.url" alt="">
							<div class="productImg_right_item_like">
								<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
							</div>
						</div>
					</div>
					<div class="productImg_content_item_title productImg_right_titleBtn">
						Selected Product
						<div class="button_second">Export</div>
					</div>
					<div class="productImg_right_item_box generalScroll" v-mousewheel>
						<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
							<img v-lazy="item.url" alt="">
							<div class="productImg_right_item_like">
								<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
		<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
	</a-modal>
</template>

<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl,isMoible } from "@/tool/util";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Upload,message,Modal } from 'ant-design-vue';
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
import ExportModel from "@/component/HomePage/ExportModel.vue";
import { useStore } from "vuex";
export default defineComponent({
	components:{
		ExportModel,
	},
    setup(props,{emit}) {
		const store = useStore();
		const {t} = useI18n()
        let productImg: any = ref(false);//弹窗
		let productImgMask:any = ref(false)//弹窗遮罩
		let productImgData:any = reactive({
			isShowMark:false,
			fileList:[],
			generateList:[
				{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:2,
				}
			],
			likeList:[
				{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},{
					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
					id:1,
				},
			],
		})
		let likeDesignCollectionList: any = computed(() => {
			return store.state.HomeStoreModule.likeDesignCollectionList;
		});
		let init = ()=>{
			productImg.value = true
			console.log(likeDesignCollectionList);
			
		}
		let cancelDsign = ()=>{
			Modal.confirm({
                title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					cleardata()
                }
            });
		}
		let cleardata = ()=>{
		    productImg.value = false
			productImgData.isShowMark = false
		}

		let fileUploadChange = (data: any)=> {
            let file = data.file;
			let bor = true
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
				if(res.errCode == 0){
					file.imgUrl = res.data.url;
					// file.type_ = {
					// 	type1:'upload',
					// 	type2:'Moodboard'
					// };
					file.id = res.data.id
					productImgData.fileList.filter((v: any) => v.status === "done");
				}else{
					bor = false
				}
				// this.showFileList = productImgData.fileList
            } else if (file.status === "error") {
				bor = false
            }
        }
		let beforeUpload = (file: any)=>{
            const isJpgOrPng =
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/jpg" ||
                file.type === "image/bmp";
            if (!isJpgOrPng) {
                message.info(useI18n().t('MoodboardUpload.jsContent3'));
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.info(useI18n().t('MoodboardUpload.jsContent4'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        }
		let deleteFile = (index:any)=>{
			productImgData.fileList.splice(index,1)
		}
		let likeFile = (item:any,str:any,index:any) =>{
			if(str == 'like'){
			    productImgData.likeList.push(item)
			    productImgData.generateList.splice(index,1)
				
			}else{
			    productImgData.generateList.push(item)
			    productImgData.likeList.splice(index,1)
			}
		}
		let setExport = ()=>{
		    // let exportModel:any = this.$refs.ExportModel
			// exportModel.init()
		}
		let setTask = (data:any)=>{
			emit('setTask',data)
		}
        return {
            productImg,
			productImgMask,
			...toRefs(productImgData),
			likeDesignCollectionList,
			init,
			cancelDsign,
			fileUploadChange,
			beforeUpload,
			deleteFile,
			likeFile,
			setExport,
			setTask,
        };
    },
	directives:{
		mousewheel:{
			mounted (el) {
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				},{ passive: true })
			}
		},
	},
    data() {
        return {
			indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            // moodTemplateId: "", //模板id
			token: "",
            uploadUrl: "",
			upload: {
                isPin: 0,
				gender:'',
                level1Type: "Moodboard",
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
        };
    },
    mounted() {
		this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
    },
    methods: {
		// init(list:any,index:any,dialogueIndex:any){
			
		// },
		// cancelDsign(){
		// 	this.productImg = false
		// 	// this.productImgList = []
		// 	// this.productImgIndex = 0
		// },
		// download(){
		// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
		// },
		// setScaleImageIndex(index:any){
		// 	// this.productImgIndex = index
		// 	// console.log(this.productImgIndex);
			
		// },
		// LikeFile(item:any,str:string){
		// 	let parent:any = this.$parent
		// 	parent.likeFile(item,str)
		// },
    },
});
</script>

<style lang="less">
.productImg_modal {
	.productImg_page{
		overflow-y: auto;
		height: 100%;
		&.productImg_page::-webkit-scrollbar{display: none;}
	}
	.productImg_content{
		display: flex;
	    flex-direction: column;
		height: 100%;
		.modal_title_text{
			height: 4rem;
		}
	}
	.productImg_content_bottom{
		height: calc(100% - 4rem - 2.4rem);
		--border-color: #c4c4c4;
		display: flex;
		justify-content: space-between;
		flex: 1;
		.upload_item{

		}
		.upload_file_item{
			display: flex;
			margin-right: 1rem;
			&.upload_file_item:last-child{
				margin-right: 0rem;
			}
		}
		.productImg_content_item_title{
			font-weight: 600;
			font-size: 1.8rem;
			margin-bottom: 1rem;
		}
		.productImg_content_item_intro{
			font-size: 1.4rem;
		}
		.productImg_content_item_imgBox{
			display: flex;
			overflow-x: auto;
			width: auto;
			margin-bottom: 2rem;
			align-items: center;
			.content_item_imgBox_itemImg{
				display: flex;
				margin-right: 1rem;
				position: relative;
				height: 12rem;
				img{
					width: 100%;
					object-fit: contain;
				}
				&.content_item_imgBox_itemImg:hover{
					.content_item_imgBox_itemImg_delete{
						display: block;
						cursor: pointer;
					}
				}
				.content_item_imgBox_itemImg_delete{
					display: none;	
					width: 100%;
					height: 100%;
					background: rgba(0,0,0,.2);
					position: absolute;
					i{
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						color: #fff;
					}
				}

			}
			.content_item_imgBox_itemImg:last-child{
				margin-right: 0;
			}
		}
		.productImg_left,.productImg_right{
			display: flex;
			flex-direction: column;
		}
		.productImg_content_item:last-child{
			margin-bottom: 0;
		}
		.productImg_left{
			width: 25%;
			// width: 45%;
			.productImg_content_item_imgBox{
				.content_item_imgBox_itemImg{
					width: 5rem;
					flex-shrink: 0;
				}
			}
		}
		.productImg_right{
			width: 75%;
			padding-left: 2rem;
			height: 100%;
			justify-content: space-between;
			.productImg_right_item_box{
				height: 40%;
				display: flex;
				overflow-x: auto;
				background: #f6f6fa;
				border-radius: 2rem;
				margin-bottom: 2%;
				padding: 0 1.5rem;
				.productImg_right_item{
					height: 100%;
					padding: 1rem 0;
					margin-right: 1rem;
					position: relative;
					img{
						height: 100%;
					}
					
					.productImg_right_item_like{
						display: none;
						position: absolute;
						top: 1rem;
						right: 2rem;
						cursor: pointer;
						.fi-sr-heart{
							color: red;
						}
					}
				}
				.productImg_right_item:hover{
					.productImg_right_item_like{
						display: block;
					}	
				}
				.productImg_right_item:last-child{
					margin-right: 0;
				}
			}
			.productImg_right_item_box:last-child{
				margin-bottom: 0;
			}
			.productImg_right_titleBtn{
				display: flex;
				justify-content: space-between;
			}
		
		}
	
	}
}
</style>