import { defineComponent, onMounted, reactive, ref, } from "vue";
import './index.scss'
export default defineComponent({
    name: 'UploadImg',
    props: {
        initList: {
            type: Array
        },
        isDetail: {
            type: Boolean
        },
        limit: {
            type: Number,
            default: 9
        },
        action: {
            type: String
        },
        initChildMethod: Function
    },
    setup (props, context) {
        let { initList, isDetail, action } = props
        initList = initList.map(it => {
            if (typeof it === 'string') {
                return {
                    uid: Math.random() * 100,
                    url: it,
                    status: 'done'
                }
            }
            return it
        })

        const state = reactive({ initList, isDetail })
        const previewVisible = ref(false)
        const previewImage = ref('')
        function getBase64 (file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            });
        }
        const handlePreview = async (file) => {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            previewImage.value = file.url || file.preview;
            previewVisible.value = true;
        }
        const imgChange = () => {
            const temp = state.initList.filter(it => it.status === 'done')
            context.emit('imgChange', temp)
        }
        const handleCancel = () => {
            previewVisible.value = false
        }
        const handleChange = ({ file, fileList }) => {
            if (file.status === 'done' && file.response.code === 0) {
                fileList[fileList.length - 1].url = file.response.data
                imgChange()
            }
            state.initList = fileList
        }
        const handleRemove = (val) => {
            setTimeout(() => {
                imgChange()
            }, 0)
        }

        const setImgList = (val) => {
            if(val && val.length>0){
                state.initList = val.map(it => {
                    if (typeof it === 'string') {
                        return {
                            uid: Math.random() * 100,
                            url: it,
                            status: 'done'
                        }
                    }
                    return it
                })
            }
           
        }

        onMounted(() => {
            if (props.initChildMethod) {
                props.initChildMethod({
                    setImgList,
                })
            }
        })


        return () => (<div>
            <a-upload
                action={action || 'https://s.youdi.net/router/upload/save/file'}
                list-type="picture-card"
                file-list={state.initList}
                onChange={handleChange}
                showUploadList={{ showRemoveIcon: !state.isDetail }}
                // onPreview={handlePreview}
                remove={handleRemove}
            >
                {!state.isDetail && (props.limit > state.initList.length) && <span>
                    <plus-outlined />
                    <div class="ant-upload-text">上传</div>
                </span>}
            </a-upload>
            {/* <a-modal visible={previewVisible.value} footer={null} onCancel={handleCancel}>
                <a-image src={previewImage.value} />
            </a-modal> */}
        </div >)
    }
})