<style></style>
<style lang="scss" scoped></style>
<template>
    <div class="upload-file">
        <a-upload
            name="file"
            :multiple="multiple"
            list-type="picture-card"
            class="avatar-uploader"
            action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/"
            :before-upload="beforeUpload"
            @change="handleChange"
            :accept="uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/jpg' : 'mp4')"
            :file-list="fileList"
            :remove="removeFile"
            @preview="handlePreview"
            :disabled="loadingElse || disabled"
        >
            <div v-if="fileList.length < fileCount || fileList.length < 1">
                <a-progress v-if="loadingElse" :percent="percent" :show-info="false" />
                <div class="ant-upload-text">点击上传</div>
            </div>
        </a-upload>
        <div style="color: red" v-if="sizeCheck">
            {{ uploadType == 'image' ? '请上传jpg格式的图片,并且大小在2m之内' : '请上传mp4格式' }}
        </div>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType == 'image'" />
            <video :src="previewImage" v-else style="width: 100%" controls="controls">
                您的浏览器不支持 video 标签。
            </video>
        </a-modal>
    </div>
</template>

<script>
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import { mapGetters } from 'vuex'
import moment from 'moment'

import BMF from 'browser-md5-file'

import qs from 'qs'
var COS = require('cos-js-sdk-v5')
var cos = new COS({
    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
})
var i = 0
const oneKB = 1024

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)
    })
}
export default {
    name: 'upload-file',
    components: {},
    props: {
        uploadType: {
            //上传类型  值为  image/video,同时目录名称也是这样
            type: String,
            default() {
                return 'image'
            },
        },
        multiple: {
            // true 可以批量上传  false 不可以
            type: Boolean,
            default() {
                return true
            },
        },
        fileCount: {
            //最大上传数量
            type: Number,
            default() {
                return 10
            },
        },
        checkFile: {
            //返回promise方法,判读文件是否上传过,进行上传拦截
            type: Function,
            default() {
                return Promise.resolve()
            },
        },
        disabled: {
            type: Boolean,
            default() {
                return false
            },
        },
        value: {
            required: true,
            default() {
                return ''
            },
        },
        size: {
            type: Number,
            default() {
                if (this.sizeCheck) {
                    if (this.uploadType == 'image') {
                        return 2048
                    } else {
                        return 1024000
                    }
                }
            },
        },
        sizeCheck: {
            type: Boolean,
            default() {
                return true
            },
        },
        onOversize: {
            type: Function,
            default() {
                alert(`请选择${this.size}KB内的文件！`)
            },
        },
    },
    data() {
        return {
            fileList: [],
            loadingElse: false,
            imageUrl: '',
            percent: 0,
            previewVisible: false,
            previewImage: '',
        }
    },
    filters: {},
    computed: {},
    mounted() {},
    watch: {
        //    fileListAll
        value: {
            immediate: true,
            handler(n, o) {
                this.$nextTick(() => {
                    if (this.fileList && this.fileList.length == 0) {
                        if (typeof n == 'object') {
                            this.fileList = n.map((item, index) => {
                                return {
                                    uid: index + 1,
                                    name: index + 1,
                                    status: 'done',
                                    url: item,
                                }
                            })
                        } else {
                            if (n === '') {
                                this.fileList = []
                            } else {
                                this.fileList = []
                                var data = {
                                    uid: 1,
                                    name: '回显',
                                    status: 'done',
                                    url: n,
                                }
                                this.fileList.push(data)
                            }
                        }
                    } else {
                        if (n.length == 0 || n == '') {
                            this.clearAll()
                        }
                    }
                })
            },
            deep: true,
        },
    },
    methods: {
        handleCancel() {
            closeAllVideoFun()
            this.previewVisible = false
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true
                return
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, (imageUrl) => {
                    this.imageUrl = imageUrl
                    this.loading = false
                })
            }
        },
        removeFile(file) {
            // console.log(file)
            var index = this.fileList.findIndex((v) => v.uid === file.uid)
            this.fileList.splice(index, 1)
            this.$emit('removeUpload', file)
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj)
            }
            this.previewImage = file.url || file.preview
            this.previewVisible = true
        },
        beforeUpload(file) {
            this.percent = 0
            this.loadingElse = true
            const fileOvesize = file.size > this.size * oneKB
            // console.log(fileOvesize)
            if (fileOvesize && this.sizeCheck) {
                this.onOversize()
                this.loadingElse = false
                return
            } else {
                this.checkFile(file)
                    .then((res) => {
                        this.cosUpload(file)
                    })
                    .catch(() => {
                        this.loadingElse = false
                    })
                return new Promise(function (resolve, reject) {
                    reject()
                })
            }
        },
        clearAll() {
            this.fileList = []
        },
        cosUpload(file) {
            var that = this
            let date = new Date()
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? '0' + MM : MM
            let d = date.getDate()
            d = d < 10 ? '0' + d : d
            var timeElse = new Date().getTime()
            var arr = file.name.split('.')

            var str = ''
            for (let i = 0; i < arr.length; i++) {
                if (i == arr.length - 1) {
                } else {
                    if (i == arr.length - 2) {
                        str += arr[i]
                    } else {
                        str += arr[i] + '.'
                    }
                }
            }
            // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
            cos.putObject(
                {
                    Bucket: 'media-1301855440',
                    /* 必须 */
                    Region: 'ap-chongqing',
                    /* 存储桶所在地域，必须字段 */
                    Key:
                        '/external-videos/' +
                        y +
                        '' +
                        MM +
                        '' +
                        d +
                        '/' +
                        str +
                        '-' +
                        timeElse +
                        '.' +
                        arr[arr.length - 1],
                    /* 必须 */
                    StorageClass: 'STANDARD',
                    Body: file, // 上传文件对象
                    onProgress: function (progressData) {
                        //进度条方法

                        that.percent = progressData.percent * 100
                    },
                    onTaskReady: function (tid) {
                        // console.log('onTaskReady', tid);
                    },
                    onTaskStart: function (info) {
                        //开始上传
                        // console.log('onTaskStart', info);
                    },
                },
                function (err, data) {
                    if (err) {
                        that.loadingElse = false
                        that.$message.error('上传失败!!!' + err)
                        return
                    }
                    // alert('成功')
                    that.loadingElse = false
                    if (that.fileList.length < that.fileCount) {
                        that.fileList.push({
                            uid: file.name,
                            name: file.name,
                            status: 'done',
                            url: '//' + data.Location,
                        })

                        // that.$emit('overUpload', that.fileList.map(item => {
                        //                 return item.url
                        //               }))
                        that.$emit('overUpload', that.fileList)

                        if (that.multiple) {
                            let urlList = that.fileList.map((item) => {
                                return item.url
                            })

                            that.$emit('update:value', urlList)
                        } else {
                            that.$emit(
                                'update:value',
                                that.fileList.map((item) => {
                                    return item.url
                                })[0]
                            )
                        }
                    } else {
                        that.$message.error('上传已达上限' + that.fileCount + '张')
                    }
                }
            )
        },
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
