<template>
    <a-modal class="add_product_modal_component" 
        v-model:visible="addProductPicModal" 
        :footer="null" 
        title="商品图片上传"
        width="1150px"
        :maskClosable="false"
        :destroyOnClose="true"
        :centered="true"
        @cancel="closeModal"
    >
        <div class="upload_modal_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  v-lazy="file?.pictureUrl" class="upload_img">
                            <div class="delete_file_block" @click="deleteFile(index)">
                                <span class="icon iconfont icon-shanchu"></span>
                            </div>
                        </div>
                    </div>
                    <div class="upload_file_item upload_component" v-show="fileList.length < 100">
                        <a-upload
                            :action="uploadUrl + '/api/product/uploadFileSingle'"
                            class="upload_component_button"
                            list-type="picture-card"
                            :data="{
                                ...upload
                            }"
                            :headers="{Authorization:token}"
                            v-model:file-list="fileList"
                            :before-upload="beforeUpload"
                            multiple
                            :maxCount="100"
                            accept=".jpg,.png,.jpeg,.bmp"
                            @change="(file)=>fileUploadChange(file)"
                            >
                            <div class="upload_tip_block" v-show="fileList.length < 100">
                               <span class="icon iconfont add_pic_button_icon icon-tianjiatupian_huaban"></span>
                            </div>
                        </a-upload>
                    </div>
                    
                    
                </div>
            </div>
            <div class="upload_max_tip">
                <WarningFilled class="icon-zhuyi"/>
                <span>Maximum 100 images can be uploaded, Maximum 2M per image</span>
            </div>
        </div>
        <div class="modal_button_list">
            <a-button class="primary_button" type="primary" size="large" @click="closeModal()">Submit</a-button>
        </div>
    </a-modal>
 
</template>
<script lang="ts">

import { defineComponent, h,reactive,ref,onMounted} from 'vue'
import { LoadingOutlined,WarningFilled } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
import { message, Upload } from 'ant-design-vue';
export default defineComponent({
    name:'ProductPicUpload',
    components:{WarningFilled},
    emits: ['uploadPicChange'],
    setup(props,{ emit }){
        let addProductPicModal =  ref(false)
        let fileList:any = ref([])
        let templateModal:any = ref(false)
        let templateFileList:any = ref([])
        let upload:any = reactive({
            timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
        })
        let beforeUploadIndex:any = 0
        let successFileList:any = ref([])
        let token:any = ref('')
        let indicator :any =  h(LoadingOutlined, {
                style: {
                    fontSize: '24px',
                },
                spin: true,
            })
        let uploadUrl:any = ref('')

        let  fileUploadChange = (data:any) =>{
            let file = data.file
            if(file.status === 'done'){
                let res = file.response
                if(res.data){
                    file.pictureUrl = res.data.pictureUrl
                    file.md5 = res.data.md5
                    file.resData = res.data
                    successFileList.value = fileList.value.filter((v:any)=> v.status === 'done')
                    emit('uploadPicChange', {fileList:successFileList.value})
                }else{
                    let index = -1
                    fileList.value.forEach((ele:any,index1:any) => {
                        if(file.uid === ele.uid){
                            index = index1
                        }
                    });
                    if(index > -1){
                        fileList.value.splice(index, 1)
                    }
                    message.error(file.name + ' ' + res.errMsg)
                }
                
            }else if(file.status ===  'error'){
                let index = -1
                fileList.value.forEach((ele:any,index1:any) => {
                    if(file.uid === ele.uid){
                        index = index1
                    }
                });
                if(index > -1){
                    fileList.value.splice(index, 1)
                }
                message.error(file.name + 'upload failed')
            }
        }

        let beforeUpload = (file:any,fileList:any) => {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            beforeUploadIndex = beforeUploadIndex +1
            console.log(file, 66)
            if(fileList.length > 10 && beforeUploadIndex == fileList.length){
                message.error('You can only upload 10 pictures at a time!');
            }
            if (!isJpgOrPng) {
                message.error('You can only upload Image file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.error('Image must smaller than 5MB!');
            }
            if(beforeUploadIndex == fileList.length) {
                beforeUploadIndex = 0
            }
            return (isJpgOrPng && isLt2M && fileList.length <= 10) || Upload.LIST_IGNORE;
        }

        let deleteFile = (index:any) =>{
            fileList.value.splice(index,1)
            successFileList.value = fileList.value
            emit('uploadPicChange', {fileList:successFileList.value})
        }

        let openPictureModal = () =>{
            addProductPicModal.value = true
        }

        let closeModal = () =>{
            addProductPicModal.value = false
        }

        let clearPicData = () =>{
            fileList.value = []
            successFileList.value =[]
        }


        onMounted(()=>{
            token.value = getCookie('token') || '',
            uploadUrl.value = getUploadUrl()
            
        })



       

        return {
            addProductPicModal,
            fileList,
            templateModal,
            templateFileList,
            upload,
            successFileList,
            indicator,
            token,
            uploadUrl,
            fileUploadChange,
            beforeUpload,
            deleteFile,
            openPictureModal,
            closeModal,
            clearPicData
        }
    },

})
</script>
<style lang="less" scoped>
.add_product_modal_component{


    .upload_modal_body{
        height: 600px;

        .upload_img_body{
            height: calc(100% - 30px);
            overflow-y: auto;
            margin-bottom: 10px;
        }

        .upload_file_item{
            margin: 0 17px 17px 0;
            display: inline-block;
            width: 165px;
            height: 165px;
            border: 1px solid #F5F5F5;
            vertical-align: top;

            &.upload_component{
                background: #FFFFFF;

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

                    .add_pic_button_icon{
                        font-size: 44px;
                        color: #C6CBD3;
                    }
                }
            }

            

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

                &:hover .delete_file_block{
                    display: block;
                }

                .upload_img{
                    display: block;
                    max-height: 100%;
                    max-width: 100%;
                }

                .delete_file_block{
                    display: none;
                    width: 36px;
                    border-radius: 50%;
                    cursor: pointer;
                    height: 36px;
                    background: #000000;
                    font-size: 16px;
                    color: #FFFFFF;
                    line-height: 36px;
                    text-align: center;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }
            }

        }

        .upload_max_tip{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #030303;
            margin-bottom: 30px;

            .icon-zhuyi{
                font-size: 16px;
                margin-right: 8px;
            }
        }
    }

    .modal_button_list{
        display: flex;
        justify-content: flex-end;
    }

    
}


</style>
<style lang="less">
.upload_component_button{
    width: 165px;
    height: 165px;

    .ant-upload-list{
        width: 100%;
        height: 100%;

        .ant-upload-select-picture-card{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
