
<template>
    <div class="uploadList">
		<div class="uploadList_box">
			<div class="content_img_item" v-for="(file,index) 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" @click.stop="selectImgItem(file)"/>
					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true" :upDataType="'element'"></sketchCategory>
					<i class="fi fi-rr-trash icon_delete" @click="deleteImgItem(file,index)"></i>
				</div>
			</div>
			<div class="upload_item">
				<div class="upload" @click="openUpload">
					<i class="fi fi-br-upload"></i>
				</div>
			</div>
		</div>
		<uploadModel ref="uploadModel" @setUploadImgList="setUploadImgList" :deReconstructionList="deReconstructionList"></uploadModel>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { getCookie } from "@/tool/cookie";
import { message,Upload} from 'ant-design-vue';
import {getUploadUrl} from '@/tool/util'
import { useI18n } from 'vue-i18n'
import uploadModel from "./uploadModel.vue"
export default defineComponent({
    components:{
		sketchCategory,uploadModel
    },
	props:{
		catecoryList:{
		    type:Object,
			default:()=>[] as any,
			required:true
		},
		level1Type:{
		    type:String,
			default:'' as any,
			required:true
		},
		segmentation:{
		    type:Object,
			default:null as any,
		},
		segmentationType:{
		    type:String,
			default:'' as any,
		},
		upLoadHttpsUrl:{//决定上传的入参，是否需要分割
			type:String,
			default:'' as any,
		},
		deReconstructionList:{
			type:Array,
			default:()=>[]
		}
	},
	emits:['selectImgItem'],
    setup(props,{emit}) {
		const {t} = useI18n();
        const store = useStore();
		const detailData = reactive({
			isShowLoading:false,//懒加载，加载中
			uploadList:computed(()=>store.state.HomeStoreModule.deReconstructionUploadImages) as any,
			upload:props.segmentation?
				props.segmentation:{
					isPin: 0,
					level1Type: props.level1Type,
					gender:store.state.Workspace.probjects.sex ,
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
				},
			token:getCookie("token"),
			uploadUrl:getUploadUrl(),
			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
		})
		const dataDom = reactive({
			uploadModel:null as any
		})
		const getDetailListData = reactive({
			total:0,
			pageSize:10,
			currentPage:1,
		})
		const selectImgItem = (file:any)=>{
			// let data = JSON.parse(JSON.stringify(file))
			// store.commit('DesignDetail/setNewDetail',file)
			emit('selectImgItem',file)
		}
		const setUploadImgList = (list:any)=>{
			if(list.length>0){
				detailData.uploadList.push(...list)
			}
		}
		const openUpload = ()=>{
			dataDom.uploadModel.init()
		}
		const deleteImgItem = (item:any,index)=>{
			console.log(item)
			Https.axiosPost(
				Https.httpUrls.elementDelete,
				{
					id:item.id,
				}
			).then(res=>{
				detailData.uploadList.splice(item.index,1)
			})

		}
        return{
			...toRefs(detailData),
			...toRefs(dataDom),
			...toRefs(getDetailListData),

			selectImgItem,
			openUpload,
			setUploadImgList,
			deleteImgItem,
        }
    },
	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .uploadList{
		height: 100%;
		display: flex;
		flex-direction: column;
		> .uploadList_box{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			margin-top: 1rem;
			justify-content: space-between;
			align-content: flex-start;
			&::-webkit-scrollbar{display: none;}
			> .content_img_item{
				width: calc((50% - 1rem));
				> .content_img_item_block{
					aspect-ratio: 1/1;
					position: relative;
					margin-bottom: 2rem;

					> img{
						cursor: pointer;
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
					&:hover{
						> .icon_delete{
							opacity: 1;
						}	
					}
					> .icon_delete{
						position: absolute;
						right: 1rem;
						top: 1rem;
						font-size: 1.8rem;
						cursor: pointer;
						opacity: 0;
					}
				}
			}
			> .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>