<template>
    <!-- 生成collention缩略图用的 -->
    <div class="export_new_collection_review">
         <!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
            <MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
        </div> -->
        <div v-show="exportNav[0].change" class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
            <div  v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
                </div>
            </div>
        </div>
		<div v-show="exportNav[0].change" class="img_block_item" v-else>
			<div  v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
                </div>
            </div>
        </div>

        <div v-show="exportNav[1].change" class="img_block_item">
            <div class="small_img_item"  v-for="(print) in allBoardData.printboardFiles" :key="print">
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="print.imgUrl"> 
                </div>
            </div>
            <div class="small_img_item"  v-for="(generate) in allBoardData.generatePrintFiles" :key="generate">
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="generate.imgUrl"> 
                </div>
            </div>
        </div>

        <div v-show="exportNav[2].change" class="img_block_item">
            <div class="color_item"  v-for="(color) in allBoardData.colorBoards" :key="color">
                <div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
                <div class="color_content_body">
                    <div class="color_des">{{color.tcx}}</div>
                    <div class="color_des">{{color.name}}</div>
                </div>
            </div>
        </div>

		<!-- <div class="img_block_item img_block_item_sketch">
            <div class="lager_img_item"  v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
                <div class="all_img_item_block">
                    <img class="all_img_content" :src="skecth.imgUrl"> 
                </div>
            </div>
        </div> -->
		<div v-show="exportNav[3].change" class="img_block_item img_block_item_sketch" >
            <div class="lager_img_item" draggable :class="'lager_img_item'+index" v-for="(item,index) in sketch" @dragstart="dragstart($event, index)"
											@dragover.prevent 
											@drop="dragDrop($event, index)" :key="item">
				<div class="all_img_item_block" v-for="v in item" :key="sketch">
                    <img class="all_img_content" :src="v?.urlWithWhiteSide">
				</div>
            </div>
        </div>
        <div class="img_block_item">
            <div class="lager_img_item"  v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
                <div class="all_img_item_block">
                    <img class="all_img_content" :src="marketing.imgUrl"> 
                </div>
            </div>
        </div>
        <div v-show="exportNav[4].change" class="img_block_item img_block_item_sketch_like h50">
            <div class="lager_img_item"  v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
                <div class="all_img_item_block">
                    <img class="all_img_content" :src="design.designOutfitUrl"> 
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent,ref,nextTick, inject} from 'vue'
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
import { useStore } from "vuex";
export default defineComponent({
    components:{MoodTemplate},
    setup() {
		let sketch:any = computed(()=>{
			return store.state.HomeStoreModule.showSketchList})
		// let sketch:any = ref([[],[],[]])
		let sketchList:any = computed(()=>{
			return store.state.UploadFilesModule.showSketchboard})
        const store = useStore();
        let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
        let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
		let exportNav = inject('exportNav')
		let dragIdx = 0
        return {
            allBoardData,
            likeDesignCollectionList,
			sketch,
			sketchList,
			exportNav,
			dragIdx,
        }
    },
	watch: {
		sketchList:{
			handler(newVal:any,oldVal:any){
				// this.setSketch()
			},
			immediate: true
		},
		// 'exportNav[3].change':{
		// 	handler(newVal:any,oldVal:any){
		// 		console.log(1111);
		// 		if(newVal){
		// 			this.sketchList = []
		// 			this.sketchList = this.allBoardData.sketchboardFiles
		// 			this.setSketch()
		// 		}
			
		// 	},
		// 	immediate: true
		// },
	},
	methods: {
		dragstart (e:any, index:any) {
			
			this.dragIdx = index
			},
			dragDrop (e:any, index:any) {
			let _teams = this.likeDesignCollectionList  //将hotteams存起来
			let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
			_teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
			_teams.splice(index, 0, _dragitem)  //将被拖拽的那条数据放到数组中指定的位置
			},
		setSketch(){
			this.sketch = [[],[],[]]
			nextTick().then(async ()=>{
				let sketch1:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
				let sketch2:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
				let sketch3:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
				sketch1 = sketch1?sketch1:{}
				sketch2 = sketch2?sketch2:{}
				sketch3 = sketch3?sketch3:{}
				sketch1.num = 0
				sketch2.num = 1
				sketch3.num = 2
				let aaa = JSON.parse(JSON.stringify(this.sketchList))
				if(this.sketchList){
					for (let i = 0; i < aaa.length; i++) {
						let arr = [sketch1,sketch2,sketch3]

						let image = new Image()
						image.src = aaa[i].urlWithWhiteSide
						
						arr.sort((a,b)=>{
							var a_num = a["height"];
							var b_num = b["height"];
							return a_num - b_num;
						})
						// console.log(arr);
						this.sketch[arr[0].num]?.push(aaa[i])
						// console.log([sketch1.height,sketch2.height,sketch3.height]);
						await new Promise((resolve:any)=>{
							image.onload = ()=>{
								nextTick().then(()=>{
									sketch1 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
									sketch2 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
									sketch3 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
									sketch1.num = 0
									sketch2.num = 1
									sketch3.num = 2
									resolve()
									image.remove()
								})
							}
							
						})
					}
				}
			})
		}
	}
})
</script>
<style lang="less" scoped>
.export_new_collection_review{
    // width: 40.8rem;
	width: 55rem;
    background: #fff;
    position: fixed;
    left: -100rem;
    top: 0;


    .img_block_item{
        margin-bottom: 2rem;

        // &.color_block_item{
        //     padding: 0 0.5rem 0 0.3rem;
        // }

        .lager_img_item{
            display: inline-block;
            width: 20.4rem;
            height: 20.4rem;
            vertical-align: top;
			&.lager_img_disposeMoodboard{
				width: 100%;
				height: auto;
			}
			&.lager_img_moodboard{
				height: 17rem;
				img{
				}
			}
        }

        .sketch_img_item{
            display: inline-block;
            width: 20.4rem;
            height: 42.2rem;
            vertical-align: top;
        }

        .small_img_item{
            width: 6.8rem;
            height: 6.8rem;
            display: inline-block;
            vertical-align: top;
        }
        .color_item{
            display: inline-block;
            vertical-align: top;
            // padding: 0 0.5rem;
            // margin-right: 1.6rem;
			margin-right: 4%;
            margin-bottom: 0.5rem;
			width: 21%;

            &:nth-child(4n){
                margin-right: 0;
            }
        }

        .color_content{
            // width: 9rem;
			width: 100%;
            height:6.2rem
        }
        .color_content_body{
			width: 100%;
            padding: 0.7rem 0.2rem;
            background: #FEFEFE;
            border: 1px solid #E6E6E6;

            .color_des{
                font-size: 1rem;
                font-family: Roboto;
                font-weight: 500;
                color: #000000;
                margin-bottom: 0.5rem;
                line-height: 1.3rem;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &:last-child{
                    margin-bottom: 0;
                }
            }
        }

        .all_img_item_block{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;

            .all_img_content{
                max-height: 100%;
                max-width: 100%;

                &.cover_img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
		&.img_block_item_sketch{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			>div{
				width: 30%;	
				margin-left: 2rem;
				height: auto;
				>div{
					margin-bottom: 2rem;
					img{
						width: 100%;
					}
				}
			}
			>div:nth-child(1){
				margin: 0;
			}
		}
		&.img_block_item_sketch_like{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			>div{
				// width: 45%;	
				width: calc(100%/4.5);
				margin-right: 2.5%;
				margin-bottom: 2.5%;
				height: auto;
				// height: 25rem;
			}
		}
		// &.h50{
		// 	.lager_img_item{
		// 		height: 50rem;
		// 	}
		// }
    }

}
</style>
