
<template>
    <div class="uploadList">
		<div class="uploadList_box">
			<div class="content_img_item" v-for="(file) in currentList[type]" :key="file.id">
				<div class="content_img_item_block" :class="{active:file?.checked}">
					<img v-lazy="file.imgUrl" :key="file.imgUrl" :alt="file.name" @click.stop="selectImgItem(file)"/>
					<sketchCategory v-model:disignTypeList="catecoryList" :generateList="allBoardData.sketchboardFiles" :item="file" :isSpread="true"></sketchCategory>
				</div>
			</div>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,watch,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 {getMinioUrl} from '@/tool/util'
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		sketchCategory
    },
	props:{
		catecoryList:{
		    type:Object,
			default:()=>[] as any,
			required:true
		},
		type:{
		    type:String,
			default:'' as any,
			required:true
		},
	},
	emits:['selectImgItem'],
    setup(props,{emit}) {
		const {t} = useI18n();
        const store = useStore();
		const detailData = reactive({
			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
			currentList:{
				sketch:computed(()=>store.state.UploadFilesModule.allBoardData.sketchboardFiles),
				print:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
				color:computed(()=>store.state.UploadFilesModule.allBoardData.colorBoards),
			},
			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),

		})
		
		const getDetailListData = reactive({
			
		})
		const selectImgItem = (file:any)=>{
			if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
			// store.commit('DesignDetailCopy/setNewDetail',file.resData)
			emit('selectImgItem',file)
		}
	
		onMounted(()=>{
			// detailData.currentList = {
			// 	sketch:detailData.allBoardData.sketchboardFiles,
			// 	print:detailData.allBoardData.printboardFiles,
			// 	color:detailData.allBoardData.colorBoards,
			// }
			
		})
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),

			selectImgItem,
        }
    },
	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{
				> .content_img_item_block{
					width: calc((34rem - 2rem) / 2);
					height: calc((34rem - 2rem) / 2);
					position: relative;
					margin-bottom: 2rem;

					> img{
						cursor: pointer;
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
			> .material_content_list_loding{
				width: 100%;
				height: calc((34rem - 2rem) / 2);
			}
			> .upload_item{
				width: calc((34rem - 2rem) / 2);
				height: calc((34rem - 2rem) / 2);
				align-items: center;
				justify-content: center;
			}
		}
		
	}
</style>