<template>
    <div>
        <el-upload
            v-if="uploadType === 1"
            ref="upload"
            class="uploader"
            :action="picAction"
            list-type="picture-card"
            multiple
            :accept="accept"
            :limit="limitUpload"
            :auto-upload="true"
            :on-change="handleUploadChange"
            :on-success="handleUploadSuccess"
            :on-remove="handleUploadRemove"
            :before-upload="beforeUpload"
            :class="hideUpload || hideUploadFather ? 'hide' : ''"
            :file-list="fileList"
        >
            <i class="el-icon-plus uploader-icon"></i>
            <!-- <div class="el-upload__text">添加上传图片</div> -->
        </el-upload>
        <el-upload
            v-else-if="uploadType === 2"
            ref="uploadVideo"
            class="upload-demo"
            :action="videoAction"
            :accept="acceptVideo"
            :limit="limitUploadVideo"
            :file-list="fileListVideo"
            :auto-upload="true"
            :on-change="handleUploadChangeVideo"
            :on-success="handleUploadSuccessVideo"
            :on-exceed="handleUploadBeyondVideo"
            :on-remove="handleUploadRemoveVideo"
            :before-upload="beforeUploadVideo"
        >
            <el-button size="small" type="primary">添加附件</el-button>
            <span slot="tip" class="el-upload__tip ml10">视频格式为MP4， 大小不超过50M</span>
        </el-upload>
    </div>
</template>
<script>
// import Upload from '../../../components/uploadAuto/index';
// import { uploadUrl } from '@/config.js';
import { uploadUrl } from '../../../../config';
export default {
    props: {
        uploadType: {
            type: Number,
            default: 1,
        },
        limitUpload: {
            // 最多可上传个数
            type: Number,
            default: 5,
        },
        limitUploadVideo: {
            // 最多可上传个数
            type: Number,
            default: 5,
        },
        maximumSize: {
            // 文件最大大小限制
            type: Number,
            default: 6,
        },
        maximumSizeKb: {
            type: Number,
            default: 0,
        },
        maximumSizeVideo: {
            // 文件最大大小限制
            type: Number,
            default: 1,
        },
        accept: {
            type: String,
            default: 'image/*',
        },
        acceptVideo: {
            type: String,
            default: '.mp4',
        },
        fileList: {
            type: Array,
            default() {
                return [];
            },
        },
        fileListVideo: {
            type: Array,
            default() {
                return [];
            },
        },
        hideUploadFather: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            hideUpload: false,
            picAction: `${uploadUrl}`,
            videoAction: `${uploadUrl}`,
        };
    },
    // watch: {
    //   fileList(val) {
    //     console.log(val, "val---");
    //     if (val.length >= this.limitUpload) {
    //       this.hideUpload = true;
    //     } else {
    //       this.hideUpload = false;
    //       this.bus.$emit("changeHide", false);
    //     }
    //   }
    //   // picDisabled(val) {
    //   //     console.log(val, 'picDisabled');
    //   // },
    // },
    methods: {
        changeHideUpload() {
            this.hideUpload = this.fileList.length >= this.limitUpload;
        },
        handleUploadBeyondVideo(file, fileList) {
            // console.log(file, fileList, "6666");
            this.$message({
                showClose: true,
                message: `上传视频数量不得超过${this.limitUploadVideo}个,请删除后在进行操作`,
                type: 'warning',
            });
        },
        /**
         * 选择上传文件后判断文件大小、判断数量是否超出需要隐藏文件上传框、手动验证upload
         * @param {Object} file 当前上传的文件
         * @param {Array} fileList 所有上传的文件列表
         */
        handleUploadChange(file, fileList) {
            let isLt6M = file.size / 1024 / 1024 < this.maximumSize;
            let fileType = ['image/jpeg', 'image/png'].indexOf(file.raw.type);
            if (this.maximumSizeKb != 0) {
                isLt6M = file.size / 1024 / 1024 / 1024 < this.maximumSizeKb;
            }
            if (!isLt6M) {
                var index = fileList.findIndex(item => {
                    return item.uid === file.uid;
                });
                if (this.maximumSizeKb != 0) {
                    this.$message({
                        showClose: true,
                        message: `${file.name}超出${this.maximumSizeKb}kb`,
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: `${file.name}超出${this.maximumSize}M`,
                        type: 'warning',
                    });
                }
                console.log(index);
                fileList.splice(index, 1);
                return;
            }
            if (fileType === -1) {
                var index = fileList.findIndex(item => {
                    return item.uid === file.uid;
                });
                fileList.splice(index, 1);
                this.$message.warning('图片只能是 jpg,jpeg,png 格式!');
                return;
            }
            if (fileList.length >= this.limitUpload) {
                this.hideUpload = true;
            } else {
                this.hideUpload = false;
            }
            // this.$emit('validateUpload', { fileList: fileList, validateValues: true });
            // this.fileList = fileList;
            // this.addEditDialogForm.file = true;
            // this.$refs['addEditDialogForm'].validateField('file');
        },
        handleUploadSuccess(response, file, fileList) {
            console.log(response, file, fileList, 'response, file, fileList');

            this.$emit('validateUpload', {
                fileList: fileList,
                validateValues: true,
            });
        },
        handleUploadSuccessVideo(response, file, fileList) {
            this.$emit('validateUploadVideo', {
                fileList: fileList,
                validateValues: true,
            });
        },
        /**
         * 删除上传文件后判断是否隐藏文件上传框、手动验证upload
         * @param {Object} file 当前上传的文件
         * @param {Array}  fileList 所有上传的文件列表
         */
        handleUploadRemove(file, fileList) {
            console.log(fileList, fileList.length, 77777);
            if (fileList.length === 0) {
                this.$emit('validateUpload', {
                    fileList: fileList,
                    validateValues: null,
                });
            } else {
                this.$emit('validateUpload', {
                    fileList: fileList,
                    validateValues: true,
                });
            }
            if (fileList.length >= this.limitUpload) {
                this.hideUpload = true;
            } else {
                this.hideUpload = false;
            }
        },
        /**
         * 选择上传文件后判断文件大小、判断数量是否超出需要隐藏文件上传框、手动验证upload
         * @param {Object} file 当前上传的文件
         * @param {Array} fileList 所有上传的文件列表
         */
        handleUploadChangeVideo(file, fileList) {
            // console.log(file, fileList);
            const isLt6M = file.size / 1024 / 1024 < this.maximumSizeVideo;
            if (!isLt6M) {
                var index = fileList.findIndex(item => {
                    return item.uid === file.uid;
                });
                this.$message({
                    showClose: true,
                    message: `${file.name}超出${this.maximumSizeVideo}M`,
                    type: 'warning',
                });
                console.log(index);
                fileList.splice(index, 1);
                return;
            }
        },
        /**
         * 删除上传文件后判断是否隐藏文件上传框、手动验证upload
         * @param {Object} file 当前上传的文件
         * @param {Array}  fileList 所有上传的文件列表
         */
        handleUploadRemoveVideo(file, fileList) {
            console.log(fileList, fileList.length);
            if (fileList.length === 0) {
                this.$emit('validateUploadVideo', {
                    fileList: fileList,
                    validateValues: null,
                });
            } else {
                this.$emit('validateUploadVideo', {
                    fileList: fileList,
                    validateValues: true,
                });
            }
        },
        clearFiles() {
            if (this.uploadType === 1) {
                this.$refs.upload.clearFiles();
            } else if (this.uploadType === 2) {
                this.$refs.uploadVideo.clearFiles();
            }
        },
        beforeUpload(file) {
            // let fileType = ['image/jpeg', 'image/png'].indexOf(file.type);
            // if (fileType === -1) {
            //     this.$message.warning('图片只能是 jpg,jpeg,png 格式!');
            // }
            // return fileType !== -1;
        },
        beforeUploadVideo(file){
            // console.log(file);
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'mp4'
            const extension2 = testmsg === 'avi'
            const isSize = file.size / 1024 / 1024 < 50
            if(!extension && !extension2) {
                this.$message({
                    message: '上传文件只能是 mp4、avi格式!',
                    type: 'warning'
                });
            }
            if(!isSize) {
                this.$message({
                    message: '上传文件大小不能超过 50MB!',
                    type: 'warning'
                });
            }
            return (extension || extension2) && isSize
            return extension || extension2
        }
    },
};
</script>
<style lang="stylus" scoped>
::v-deep .el-upload--picture-card {
  line-height: normal;
}

.uploader-icon {
  margin-top: 35px;
}

.el-upload__text {
  line-height: 40px;
}

::v-deep .el-upload,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload-list--picture-card .el-upload-list__item{
width: 106px;
height: 106px;
}
::v-deep .hide .el-upload--picture-card {
  display: none;
}
</style>
