<template>
    <el-dialog v-model="visibleStatus" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false" style="max-width:650px;">
        <template #header>
            <div class="text-title">导入PSD设计文件</div>
        </template>
        <div v-if="!thumbnails || thumbnails.length==0">
            <el-upload
                v-loading="isResolving"
                ref="upload"
                class="upload-drop-box"
                :on-change="handleChange"
                action=""
                drag
                :limit="1"
                :on-exceed="handleExceed"
                :auto-upload="false"
                accept=".psd,image/vnd.adobe.photoshop"
                :show-file-list="false"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                拖动文件到这里释放或<em>点击上传</em>
                </div>
                <template #tip>
                <div class="el-upload__tip">
                    当前仅支持PSD文件上传解析
                </div>
                </template>
            </el-upload>
            <div class="text-right q-mt-lg">
                <el-button @click="close" :disabled="isResolving">取消导入</el-button>
            </div>
        </div>
        
        <div v-else>
            <div class="f12 text-grey">已成功解析PSD文件，请核对下方图片是否正确：</div>
            <div class="row" style="flex-wrap:wrap">
                <img v-for="(x,i) in thumbnails" :key="i" style="height:auto;width:calc(25% - 10px);" class="q-mr-md rounded q-mt-md" :src="x" />
            </div>
            <div class="q-mt-lg row items-center">
                <div class="col">
                    <el-button @click="resetPsdHandler">重新选择</el-button>
                </div>
                <div>
                    <el-button @click="close">取消导入</el-button>
                    <el-button type="primary" class="q-ml-lg">确认导入</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import {ref,defineProps,watch} from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile,UploadInstance } from 'element-plus'
import PSD from 'psd.js'
import {toSlider} from '@/utils/psdParser/index'

const props = defineProps({
    visible:{
        type:Boolean,
        required:true,
        default:true
    }
})
const emit = defineEmits<{
  (event: 'update:visible', payload: boolean): void
  (event: 'closed'): void
}>()

const visibleStatus = ref(props.visible)
const upload = ref<UploadInstance>()
const isResolving = ref(false)
const thumbnails = ref<Array<any>>([])

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
    isResolving.value=true
    if(uploadFile){
        var url = URL.createObjectURL(uploadFile?.raw)
        try {
            PSD.fromURL(url).then(async (psd:any) => {
                thumbnails.value= await toSlider(psd)
                isResolving.value=false
            })
        } catch (error) {
            isResolving.value=false
        }
    }else{
        isResolving.value=false
    }
}
const handleExceed: UploadProps['onExceed'] = (files) => {
    console.log('执行clear')
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    upload.value!.handleStart(file)
}
const resetPsdHandler = ()=>{
    thumbnails.value=[]
}
const close = () => {
  visibleStatus.value=false
  resetPsdHandler()
  emit('update:visible', false)
  emit('closed')
}
watch(() => props.visible, () => {
    visibleStatus.value = props.visible
})

</script>

<style>
    .upload-drop-box{

    }
</style>