<template>
    <div class="printType">
		<div class="detailText">New Print</div>
		<div class="printContent">
			<div>
				<div class="content_img_item" v-for="(file) in selectList" :key="file.id">
					<div class="content_img_item_block" :class="{active:file?.checked}">
						<img v-lazy="file.path" :key="file.path" :alt="file.name"/>
						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="selectList" :item="file" :isSpread="true"></sketchCategory>
					</div>
				</div>
				<div v-if="selectDetail?.newDetail?.[currentDetailType]" class="content_img_item" v-for="(file) in selectDetail.newDetail?.[currentDetailType]" :key="file.id">
					<div class="content_img_item_block" :class="{active:file?.checked}">
						<img v-lazy="file.url" :key="file.paurlth" :alt="file.name"/>
						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="selectDetail.newDetail?.[currentDetailType]" :item="file" :isSpread="true"></sketchCategory>
					</div>
				</div>
				<!-- <img v-for="item in selectList" :src="item.path" alt="">
				<img v-for="item in selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType]:[]" :src="item?.url" :key="item" :title="selectDetail.type" alt=""> -->
			</div>
		</div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
    components:{
		sketchCategory
    },
    setup(props,{emit}) {
        const store = useStore();
		const detailData = reactive({
			sketchCatecoryList:computed(()=>{
				return store.state.UserHabit.printType
			}),
		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
		    currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
			selectList:[],
		})
		watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
			detailData.selectList = newVal.reduce((acc:any, curr:any) => {
				if (!acc.some((item:any) => item.id === curr.id)) {
					acc.push(curr);
				}
				return acc;
			}, []);
		},{immediate: true})
		const getDetailListData = reactive({
			
		})
		const getDetailListDom = reactive({
		})
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),
			...toRefs(getDetailListDom),

        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .printType{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		> .detailText{
			margin-bottom: 1rem;
		}
		> .printContent{
			flex: 1;
			overflow: hidden;
			> div{
				max-height: 100%;
				display: flex;
				flex-wrap: wrap;
				overflow-y: auto;
				// display: flex;
				// flex-wrap: wrap;
				> .content_img_item{
					margin: 1rem;
					> .content_img_item_block{
						width: 30rem;
						height: 30rem;
						position: relative;

						> img{
							cursor: pointer;
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}
				}
			}
			
		}
	}
</style>