<template>
	<div class="moodboard_body">
		<div class="upload_img_body scroll_style" >
			<div class="upload_item">
				<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
					<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
						<a-spin  :indicator="indicator" tip="Uploading..."/>
					</div>
					<div class="upload_file_item_content" v-show="file?.status === 'done'">
						<img  :src="file?.imgUrl" class="upload_img">
						<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
					</div>
				</div>
				<div class="upload_file_item upload_component" v-show="fileList.length < 10">
					<a-upload
						:action="uploadUrl + '/api/element/upload'"
						list-type="picture-card"
						:data="{
							...upload
						}"
						:headers="{Authorization:token}"
						v-model:file-list="fileList"
						:before-upload="beforeUpload"
						multiple
						:maxCount="10"
						accept=".jpg,.png,.jpeg,.bmp"
						@change="(file)=>fileUploadChange(file)"
						>
						<div class="upload_tip_block" v-show="fileList.length < 10">
							<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
						</div>
					</a-upload>
				</div>
				
			</div>
		</div>
		<div class="upload_max_tip">
			<span class="icon iconfont icon-zhuyi"></span>
			<span>Maximum 10 images can be uploaded, Maximum 2M per image</span>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, h} from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import {getUploadUrl} from '@/tool/util'
import {getCookie} from '@/tool/cookie'
import { message, Upload } from 'ant-design-vue';
import {useStore} from 'vuex'

export default defineComponent({
	props: ["msg"],
    setup(prop) {
		console.log(prop.msg);
		
        let fileList:any = ref([])
       
        return{
			fileList
        }
    },
	data(){
        return{
			indicator : h(LoadingOutlined, {
                style: {
                    fontSize: '2.4rem',
                },
                spin: true,
            }),
            uploadUrl:'',
			upload:{
                isPin:0,
                level1Type:'Moodboard',
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token:'',
            store:useStore(),

        }
    },
	mounted(){
        this.token = getCookie('token') || ''
        this.uploadUrl = getUploadUrl()
    },
    methods:{

        beforeUpload(file:any){
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.error('You can only upload Image file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error('Image must smaller than 5MB!');
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
        fileUploadChange(data:any){
            let file = data.file
            if(file.status === 'done'){
                let res = JSON.parse(file.xhr.response)
                file.imgUrl = res.data.url
                file.resData = res.data
                let fileList = this.fileList.filter((v:any)=> v.status === 'done')
                this.store.commit('setMoodboardFile',fileList)
            }else if(file.status ===  'error'){
                let index = -1
                this.fileList.forEach((ele:any,index1:any) => {
                    if(file.uid === ele.uid){
                        index = index1
                    }
                });
                if(index > -1){
                    this.fileList.splice(index, 1)
                }
                message.error(file.name + 'upload failed')
            }
        },
		deleteFile(index:any){
            this.fileList.splice(index, 1)
            this.store.commit('setMoodboardFile',this.fileList)
        },

       
    }
})
</script>
<style lang="less">
.generate{
	// background: #030303;
	border-radius: 20px;
	overflow: hidden;
	
}
.my_material_modal{
	border-radius: 2rem;
    .ant-modal-close{
        width: 3.6rem;
        height: 3.6rem;
        position: absolute;
        top: -1.8rem;
        right: -1.8rem;
    }

    .ant-modal-header{
        display: none;
    }

    .ant-modal-body{
        background: #F2F3FB;
        height: 80vh;
        min-height: 72rem;
        overflow-y: hidden;
        padding: 0;
    }

    .my_material_header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 6.6rem;
        background: #F7F7F7;
        padding: 0 3.4rem 0 3.1rem;

        .my_material_title{
            font-size: 1.8rem;
            color: #030303;
            font-weight: 500;
        }

        .my_material_header_right{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .content_search_block{
                margin-right: 5rem;
                display: flex;

                .search_input{
                    width: 30rem;
                    padding-left: 1.5rem;
                    height: 4rem;
                    line-height: 3.8rem;
                    background: #FFFFFF;
                    border: 0.1rem solid #F1F1F1;
                    font-size: 1.6rem;
                    font-weight: 400;

                    &::placeholder {
                        color: #C2C2C2;
                    }
                }

                .search_icon_block{
                    width: 6rem;
                    height: 4rem;
                    line-height: 4rem;
                    text-align: center;
                    background: #343579;
                    cursor: pointer;

                    .icon-sousuo{
                        font-size: 2rem;
                        color: #FFFFFF;
                    }
                }
            }

            .icon_close{
                color: rgba(174, 178, 183, 1);
                font-size: 2.4rem;
                cursor: pointer;
            }
        }

        
    }

    .my_material_content{
        padding: 0 3rem 3.5rem 3rem;
        height: calc(100% - 6.6rem);
        position: relative;

        .material_content_top{
            padding: 1.3rem 0 2.1rem;
            height: 7rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;

            .material_content_top_title{
                font-size: 20px;
                color: #030303;
            }

            .material_content_top_right{
                display: flex;
                align-items: center;

                .select_block{
                    background: #FFFFFF;
                    color: #1A1A1A !important;
                    margin-right: 2.3rem;

                    .icon-xiala{
                        color: #1A1A1A !important;
                    }
                }

                .check_all_block{
                    display: flex;
                    align-items: center;
                    font-size: 1.6rem;
                    color: #64686D;
                    cursor: pointer;

                    &.check_all{
                        color: #1A1A1A;
                    }

                    .check_block{
                        width: 2.4rem;
                        height: 2.4rem;
                        background: #EBECF4;
                        border: 0.1rem solid #64686D;
                        padding: 0.3rem;
                        margin-right: 0.7rem;

                        .check_block_body{
                            width: 100%;
                            height: 100%;
                            background: #343579;
                        }
                    }
                }
            }

        }

        .material_content_body{
            width: 100%;
            height: calc(100% - 19rem);
            overflow-y: auto;
            position: relative;

            .content_img_item{
                display: inline-block;
                vertical-align: top;
                padding: 0 1.4rem;
                margin-bottom: 2.8rem;

                .content_img_item_block{
                    border: 0.1rem solid transparent;
                    width: 16.5rem;
                    height: 16.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    cursor: pointer;

                    &.select_item_img{
                        border-color: #343579;
                    }

                    .print_content_img{
                        width: 100%;
                        height: 100%;
                    }

                    .content_img{
                        max-width: 100%;
                        max-height: 100%;
                    }

                }
                .content_img_name{
                    width: 16.5rem;
                    height: 3.5rem;
                    line-height: 3.5rem;
                    white-space: nowrap;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 1.4rem;
                    color: #030303;
                }
            }

            
        }

        .no_data_block{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99;

            &.loading_block{
                background: rgba(0,0,0,0.2);
            }
        }

        .material_confirm{
            width: 9.8rem;
            height: 3.6rem;
            line-height: 3.6rem;
            font-size: 1.4rem;
            text-align: center;
            margin: 0 auto;
            color: #FFFFFF;
            background: #343579;
            cursor: pointer;
            margin-top: 2rem;
        }

        .table_pagination{
            position: absolute;
            bottom: 3.5rem;
            left: 0;
            width: 100%;
            text-align: center;
            margin-top: 5rem;
        }
    }
}
</style>
