<template>
    <div class="digital_upload">
        <input
            style="display: none"
            @change="addFile"
            :multiple="multiple"
            type="file"
            :name="name"
            :id="id"
            :accept="accept"
        />
        <label :for="id">
            <slot></slot>
        </label>
    </div>
</template>

<script>
export default {
    name: 'my-upload',
    props: {
        name: String,
        action: {
            type: String,
            required: true
        },
        fileList: {
            type: Array,
            default () {
                return []
            }
        },
        accept: {
            type: String,
            require: true
        },
        id: {
            type: String,
            default: 'my-upload'
        },
        data: Object,
        multiple: Boolean,
        limit: Number,
        onChange: Function,
        onBefore: Function,
        onProgress: Function,
        onSuccess: Function,
        onFailed: Function,
        onFinished: Function
    },
    methods: {
        // input的 chang事件處理方法
        addFile ({ target: { files } }) { // input標(biāo)簽觸發(fā)onchange事件時(shí)，將文件加入待上傳列表
            for (let i = 0, l = files.length; i < l; i++) {
                files[i].url = URL.createObjectURL(files[i])// 創(chuàng)建blob地址，不然圖片怎么展示？
                files[i].status = 'ready'// 開(kāi)始想給文件一個(gè)字段表示上傳進(jìn)行的步驟的，后面好像也沒(méi)去用......
            }
            let fileList = [...this.fileList]
            if (this.multiple) { // 多選時(shí)，文件全部壓如列表末尾
                fileList = [...fileList, ...files]
                const l = fileList.length
                let limit = this.limit
                if (limit && typeof limit === 'number' && Math.ceil(limit) > 0 && l > limit) { // 有數(shù)目限制時(shí)，取后面limit個(gè)文件
                    limit = Math.ceil(limit)
                    // limit = limit > 10 ? 10 : limit;
                    fileList = fileList.slice(l - limit)
                }
            } else { // 單選時(shí)，只取最后一個(gè)文件。注意這里沒(méi)寫成fileList = files;是因?yàn)閒iles本身就有多個(gè)元素（比如選擇文件時(shí)一下子框了一堆）時(shí)，也只要一個(gè)
                fileList = [files[0]]
            }
            this.onChange(fileList)// 調(diào)用父組件方法，將列表緩存到上一級(jí)data中的fileList屬性
        },
        // 移除某一個(gè)文件
        remove (index) {
            const fileList = [...this.fileList]
            if (fileList.length) {
                fileList.splice(index, 1)
                this.onChange(fileList)
            }
        },
        // 檢測(cè)是否可以提交
        checkIfCanUpload () {
            console.log(this.fileList.length)
            return this.fileList.length ? ((this.onBefore && this.onBefore()) || !this.onBefore) : false
        },
        // 根據(jù)情況使用不同的提交的方法
        submit () {
            console.log('開(kāi)始提交')
            if (this.checkIfCanUpload()) {
                // console.log('開(kāi)始提交2')
                if (this.onProgress && typeof XMLHttpRequest !== 'undefined') {
                    this.xhrSubmit()
                } else {
                    this.fetchSubmit()
                }
            }
        },
        // fethc 提交
        fetchSubmit () {
            const keys = Object.keys(this.data); const values = Object.values(this.data); const action = this.action
            const promises = this.fileList.map(each => {
                each.status = 'uploading'
                const data = new FormData()
                data.append(this.name || 'file', each)
                keys.forEach((one, index) => data.append(one, values[index]))
                return fetch(action, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: data
                }).then(res => res.text()).then(res => JSON.parse(res))// 這里res.text()是根據(jù)返回值類型使用的，應(yīng)該視情況而定
            })
            Promise.all(promises).then(resArray => { // 多線程同時(shí)開(kāi)始，如果并發(fā)數(shù)有限制，可以使用同步的方式一個(gè)一個(gè)傳，這里不再贅述。
                let success = 0; let failed = 0
                resArray.forEach((res, index) => {
                    if (res.code === 1) {
                        success++ // 統(tǒng)計(jì)上傳成功的個(gè)數(shù)，由索引可以知道哪些成功了
                        this.onSuccess(index, res)
                    } else if (res.code === 520) { // 約定失敗的返回值是520
                        failed++ // 統(tǒng)計(jì)上傳失敗的個(gè)數(shù)，由索引可以知道哪些失敗了
                        this.onFailed(index, res)
                    }
                })
                return { success, failed } // 上傳結(jié)束，將結(jié)果傳遞到下文
            }).then(this.onFinished) // 把上傳總結(jié)果返回
        },
        // xhr 提交
        // xhrSubmit () {
        //     const _this = this
        //     const options = this.fileList.map((rawFile, index) => ({
        //         file: rawFile,
        //         data: _this.data,
        //         filename: _this.name || 'file',
        //         action: _this.action,
        //         headers: {
        //             Authorization: window.sessionStorage.getItem('token')
        //         },
        //         onProgress (e) {
        //             _this.onProgress(index, e)// 閉包，將index存住
        //         },
        //         onSuccess (res) {
        //             _this.onSuccess(index, res)
        //         },
        //         onError (err) {
        //             _this.onFailed(index, err)
        //         },
        //         onFinished (res) { // ????????這里補(bǔ)充一個(gè)配置
        //             _this.onFinished(res) // ????????
        //         }
        //     }))
        //     const l = this.fileList.length
        //     const send = async options => {
        //         for (let i = 0; i < l; i++) {
        //             await _this.sendRequest(options[i])// 這里用了個(gè)異步方法，按次序執(zhí)行this.sendRequest方法，參數(shù)為文件列表包裝的每個(gè)對(duì)象，this.sendRequest下面緊接著介紹
        //         }
        //     }
        //     send(options)
        // },
        xhrSubmit () {
            const _this = this
            const options = {
                file: this.fileList,
                data: _this.data,
                filename: _this.name || 'file',
                action: _this.action,
                headers: {
                    Authorization: window.sessionStorage.getItem('token')
                },
                onProgress (e) {
                    _this.onProgress(1, e)// 閉包，將index存住
                },
                onSuccess (res) {
                    _this.onSuccess(1, res)
                },
                onError (err) {
                    _this.onFailed(1, err)
                },
                onFinished (res) { // ????????這里補(bǔ)充一個(gè)配置
                    _this.onFinished(res) // ????????
                }
            }
            // this.fileList.map((rawFile, index) => ({
            //     file: rawFile,
            //     data: _this.data,
            //     filename: _this.name || 'file',
            //     action: _this.action,
            //     headers: {
            //         Authorization: window.sessionStorage.getItem('token')
            //     },
            //     onProgress (e) {
            //         _this.onProgress(index, e)// 閉包，將index存住
            //     },
            //     onSuccess (res) {
            //         _this.onSuccess(index, res)
            //     },
            //     onError (err) {
            //         _this.onFailed(index, err)
            //     },
            //     onFinished (res) { // ????????這里補(bǔ)充一個(gè)配置
            //         _this.onFinished(res) // ????????
            //     }
            // }))
            console.log(options)
            _this.sendRequest(options)
            // const l = this.fileList.length
            // const send = async options => {
            //     for (let i = 0; i < l; i++) {
            //         await _this.sendRequest(options[i])// 這里用了個(gè)異步方法，按次序執(zhí)行this.sendRequest方法，參數(shù)為文件列表包裝的每個(gè)對(duì)象，this.sendRequest下面緊接著介紹
            //     }
            // }
            // send(options)
        },
        // 發(fā)起上傳請(qǐng)求這里借鑒了element-ui的上傳源碼
        sendRequest (option) {
            // const _this = this
            upload(option)
            function getError (action, option, xhr) {
                // eslint-disable-next-line no-void
                var msg = void 0
                if (xhr.response) {
                    msg = xhr.status + ' ' + (xhr.response.error || xhr.response)
                } else if (xhr.responseText) {
                    msg = xhr.status + ' ' + xhr.responseText
                } else {
                    msg = 'fail to post ' + action + ' ' + xhr.status
                }
                var err = new Error(msg)
                err.status = xhr.status
                err.method = 'post'
                err.url = action
                return err
            }

            function getBody (xhr) {
                var text = xhr.responseText || xhr.response
                if (!text) {
                    return text
                }

                try {
                    return JSON.parse(text)
                } catch (e) {
                    return text
                }
            }

            function upload (option) {
                if (typeof XMLHttpRequest === 'undefined') {
                    return
                }

                var xhr = new XMLHttpRequest()
                var action = option.action

                if (xhr.upload) {
                    xhr.upload.onprogress = function progress (e) {
                        if (e.total > 0) {
                            e.percent = e.loaded / e.total * 100
                        }
                        option.onProgress(e)
                    }
                }
                var formData = new FormData()

                if (option.data) {
                    Object.keys(option.data).map(function (key) {
                        formData.append(key, option.data[key])
                    })
                }

                option.file.forEach(item => {
                    formData.append(option.filename, item)
                })
                // formData.append(option.filename, option.file)

                xhr.onerror = function error (e) {
                    option.onError(e)
                }

                xhr.onload = function onload () {
                    if (xhr.status < 200 || xhr.status >= 300) {
                        return option.onError(getError(action, option, xhr))
                    }

                    option.onSuccess(getBody(xhr))
                }

                xhr.open('post', action, true)

                if (option.withCredentials && 'withCredentials' in xhr) {
                    xhr.withCredentials = true
                }

                var headers = option.headers || {}

                for (var item in headers) {
                    // eslint-disable-next-line no-prototype-builtins
                    if (headers.hasOwnProperty(item) && headers[item] !== null) {
                        xhr.setRequestHeader(item, headers[item])
                    }
                }
                xhr.send(formData)
                return xhr
            }
        }
    }
}
</script>
<style lang="less" scoped>
</style>

<template>
    <div id="upload_works">
        <div class="type_info" >
            <div class="info">支持JPG，PNG，GIF格式，大小不超過(guò)20M</div>
            <!-- 自己封裝的手動(dòng)上傳文件的組件 -->
            <digital-upload
                accept="image/*"
                ref="myUpload"
                action="/api/production/uploadImgList"
                name="files"
                id="my-upload"
                multiple
                :limit="10"
                :file-list="fileList"
                :data="param"
                :on-change="onChange"
                :on-progress="uploadProgress"
                :on-success="uploadSuccess"
                :on-failed="uploadFailed"
                :on-finished="onFinished"
            >
                <div class="normal_button">上傳文件</div>
            </digital-upload>
            <div class="three">或拖放到這里</div>
        </div>
    </div>
</template>

<script>
import digitalUpload from '@/digitalComponents/upload/digitalUpload.vue'
export default {
    data () {
        return {
            fileList: [],
            param: { id: null }
        }
    },
    methods: {
        onChange (fileList) { // 監(jiān)聽(tīng)文件變化，增減文件時(shí)都會(huì)被子組件調(diào)用
            console.log(fileList)
            this.fileList = [...fileList]
        },
        uploadSuccess (index, response) { // 某個(gè)文件上傳成功都會(huì)執(zhí)行該方法，index代表列表中第index個(gè)文件
            console.log('圖片上傳成功')
            console.log(index, response)
            this.submitWorksCover()
        },
        upload () { // 觸發(fā)子組件的上傳方法
            this.$refs.myUpload.submit()
        },
        removeFile (index) { // 移除某文件
            this.$refs.myUpload.remove(index)
        },
        uploadProgress (index, progress) { // 上傳進(jìn)度，上傳時(shí)會(huì)不斷被觸發(fā)，需要進(jìn)度指示時(shí)會(huì)很有用
            const { percent } = progress
            console.log(index, percent)
        },
        uploadFailed (index, err) { // 某文件上傳失敗會(huì)執(zhí)行，index代表列表中第index個(gè)文件
            console.log(index, err)
        },
        onFinished (result) { // 所有文件上傳完畢后（無(wú)論成敗）執(zhí)行，result: { success: 成功數(shù)目, failed: 失敗數(shù)目 }
            console.log(result)
        }
    },
    components: {
        digitalUpload
    }
}
</script>
<style lang="less" scoped>
</style>