<template>
	<div class="createCloud" ref="createCloud"></div>
	<a-modal
	  class="createCloud_modal generalModel"
	  v-model:visible="operationsModal"
	  :footer="null"
	  :get-container="() => $refs.createCloud"
	  width="50%"
	  :height="'77rem'"
	  :maskClosable="false"
	  :centered="true"
	  :closable="false"
	  :mask="true"
	  wrapClassName="#app"
	  :keyboard="false"
	>
	  <div class="generalModel_btn">
		<div class="generalModel_closeIcon" @click.stop="clearData()">
		  <svg
			width="46"
			height="46"
			viewBox="0 0 46 46"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		  >
			<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
			<rect
			  x="32.5063"
			  y="12"
			  width="3"
			  height="29"
			  rx="1.5"
			  transform="rotate(45 32.5063 12)"
			  fill="#000"
			/>
			<rect
			  x="34.6274"
			  y="32.5059"
			  width="3"
			  height="29"
			  rx="1.5"
			  transform="rotate(135 34.6274 32.5059)"
			  fill="#000"
			/>
		  </svg>
		</div>
	  </div>
	  <div class="modal_title_text">
		<div>Upload</div>
	  </div>
	  <div class="allUserPoeration_btn">
		<div class="uploadList_box">
			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
				<div class="content_img_item_block" :class="{active:file?.checked}">
					<img v-lazy="file.url" :key="file.url" :alt="file.name"/>
					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true" :upDataType="'element'"></sketchCategory>
				</div>
			</div>
			<div class="upload_item">
				<div class="upload" @click="upload">
					<i class="fi fi-br-upload"></i>
				</div>
			</div>
			<div class="mark_loading" v-show="isShowMark">
				<a-spin size="large" />
			</div>
		</div>
		<div class="gallery_btn" style="margin-left: auto;" @click="setOk">OK</div>
	  </div>
	</a-modal>
  </template>
  <script lang="ts">
  import {
	defineComponent,
	computed,
	reactive,
	watch,
	onMounted,
	h,
	nextTick,
	toRefs,
  } from "vue";
  import { LoadingOutlined } from "@ant-design/icons-vue";
  import { Https } from "@/tool/https";
  import { getCookie, setCookie } from "@/tool/cookie";
  import { useStore } from "vuex";
  import { useI18n } from "vue-i18n";
  import { getMinioUrl } from "@/tool/util";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";

  export default defineComponent({
	components: {sketchCategory},
	props: {
		deReconstructionList:{
			type:Array,
			default:()=>[]
		}
	},
	emits: ["setUploadImgList"],
	setup(props, { emit }) {
	  const store = useStore();
	  let operations = reactive({
		operationsModal: false,
		isShowMark:false,
		uploadList:[],
	  });
	  let operationsData = reactive({
		selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
	  });
	  const getUploadElement = () => {
	  };
	  let init = () => {
		operations.operationsModal = true
	  };
	  const clearData = () => {
		operations.operationsModal = false
		emit('setUploadImgList',JSON.parse(JSON.stringify(operations.uploadList)))
		operations.uploadList = []
	  };
	  let setOk = () => {
		clearData()
	  };
		const createProbject:any = inject('createProbject',()=>{}) as any

	  const upload = async ()=>{
			if(!operationsData.selectObject?.id)await createProbject()

			const input = document.createElement('input');
			input.type = 'file';
			input.accept = 'image/*';  // 只允许选择图片文件
			input.multiple = true;     // 允许多选
			input.addEventListener('change', (event:any) => {
				operations.isShowMark = true; // 显示加载状态
				const files = event?.target?.files;
				if (!files || files.length === 0) {
					operations.isShowMark = false; 
					return;
				}
				let file = [...Array.from(files)];
				let param = new FormData(); 
				param.append('isPin', '0');
				param.append('gender', store.state.Workspace.probjects.sex);
				param.append('ageGroup',store.state.Workspace.probjects.ageGroup)
				param.append('projectId', operationsData.selectObject.id);
				param.append('level1Type', 'De/Reconstruction');
				param.append('level2Type', props.deReconstructionList[0].value);
				
				param.append('timeZone', Intl.DateTimeFormat().resolvedOptions().timeZone);
				file.forEach((image:any) => {
					param.append('file', image);
				});

				let config: any = {
					headers: {
						'Content-Type': 'multipart/form-data',
						'Accept': '*/*'
					}
				};

				Https.axiosPost(Https.httpUrls.elementUpload, param, config)
					.then((rv: any) => {
						rv.designType = 'Upload'
						// rv.forEach((item:any)=>{
							rv.category = props.deReconstructionList[0].name
							rv.categoryValue = props.deReconstructionList[0].value
						// })
						operations.uploadList.unshift(rv);
						operations.isShowMark = false;
					})
					.catch(rv => {
						operations.isShowMark = false;
					});
			});

			// 触发文件选择对话框
			input.click();
		}
	  return {
		...toRefs(operations),
		...toRefs(operationsData),
		init,
		setOk,
		clearData,
		upload,
	  };
	},
	data() {
	  return {
		indicator: h(LoadingOutlined, {
		  style: {
			fontSize: "2.4rem",
		  },
		  spin: true,
		}),
	  };
	},
	mounted() {},
	methods: {},
	directives: {
	  mousewheel: {
		mounted(el) {
		  el.addEventListener("mouseenter", (e) => {
			if (el.scrollWidth > el.clientWidth) {
			  el.parentElement.style.overflowY = "hidden";
			}
		  });
  
		  // 鼠标移出事件
		  el.addEventListener("mouseleave", () => {
			el.parentElement.style.overflowY = "auto";
		  });
		  el.addEventListener(
			"wheel",
			(e) => {
			  let num = 0;
			  if (e.deltaY > 0) {
				num = 25;
			  } else {
				num = -25;
			  }
			  el.scrollBy(num, 0);
			},
			{ passive: true }
		  );
		},
	  },
	},
  });
  </script>
  <style lang="less" scoped>
  :deep(.ant-modal-mask) {
	background: rgba(0, 0, 0, 0.2);
  }
  :deep(.createCloud_modal) {
	.ant-modal-body {
	  display: flex;
	  flex-direction: column;
	}
  }
  </style>
  <style lang="less" scoped>
  .createCloud_modal {
	.closeIcon {
	  z-index: 2;
	}
	.allUserPoeration_btn {
	  display: flex;
	  overflow-x: auto;
	  width: auto;
	  margin-bottom: 2rem;
	  flex-wrap: nowrap;
	  flex-direction: column;
	  width: 100%;
	  flex: 1;
	  > .uploadList_box{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			margin-top: 1rem;
			align-content: flex-start;
			&::-webkit-scrollbar{display: none;}
			> .content_img_item{
				width: calc((50% - 1rem));
				> .content_img_item_block{
					width: 100%;
					aspect-ratio: 1/1;
					position: relative;
					margin-bottom: 2rem;
					margin: 1rem;

					> img{
						cursor: pointer;
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
			> .material_content_list_loding{
				width: 100%;
				aspect-ratio: 1/1;
			}
			> .upload_item{
				width: calc((50% - 1rem));
				aspect-ratio: 1/1;
				align-items: center;
				justify-content: center;
				.upload{
					cursor: pointer;
					width: calc(6rem * 1.2);
					height: calc(6rem * 1.2);
					border: calc(0.3rem * 1.2) solid #000;
					border-radius: calc(1rem * 1.2);
					display: flex;
					align-items: center;
					justify-content: center;
					i{
						font-size: 2rem;
						display: flex;
						color: #000;
					}
				}
			}
		}
	}
  }
  </style>
  