<template>
  <div id="cpt-upload" v-bind="$attrs">
    <ul class="el-upload-list el-upload-list--picture-card">
      <li class="el-upload-list__item" v-if="item" v-for="(item,index) in pictures" :key="index">
        <img class="el-upload-list__item-thumbnail" :src="previewFileUrl(item)" alt=""/>
        <div class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(index, 'img')">
                        <i class="el-icon-delete"></i>
                    </span>
        </div>
      </li>
      <li class="el-upload-list__item" style="background-color: black;" v-if="video" v-for="(video,index2) in videos" :key="index2+'video'">
        <i class="el-icon-caret-right video-icon"></i>
        <video class="el-upload-list__item-thumbnail" :src="previewFileUrl(video)" alt=""></video>
        <div class="el-upload-list__item-actions">
			        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(video)">
			            <i class="el-icon-caret-right video-icon"></i>
			        </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(index2, 'video')">
			            <i class="el-icon-delete"></i>
			        </span>
        </div>
      </li>
    </ul>
    <el-upload
      v-if="!disabled && showUpload"
      :action="$store.state.uploadUrl"
      :headers="$store.state.uploadHeader"
      :data="$store.state.uploadData"
      :multiple="multiple"
      :show-file-list="false"
      :disabled="disabled"
      :accept="uploadType"
      :limit="maxCount"
      :on-exceed="fileOverLimit"
      :before-upload="beforeUpload"
      :on-success="uploadSuccessful"
      list-type="picture-card">
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <ViewImg :flag="showImgDialog"
             @close="close"
             :imgList.sync="imgList"
             :disabled="disabled"
             :deleteFlag="disabled"
             :appendBody="true"
             :modal="modal"
             :showIndex="showIndex"
             v-if="imgList.length"
             :title="title"
             @deleteImg="handleRemove"></ViewImg>
  </div>
</template>

<script>
    import ViewImg from "../enoPreviewPictures/enoPreviewPictures.vue";
    export default {
        name: "enoUpload",
        data() {
            return {
                dialogImageUrl: '',
                videoType:'',
                dialogVisible: false,
                pictures:this.value?this.value.split(','):[],
                imgList:[],
                showList:[],
                videos:this.videoList?this.videoList.split(','):[],
                showImgDialog:false,
                videoShow:false,
                videoUrl:false,
                showIndex:0,
                uploadType:'.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF'
            }
        },
        props: {
            value: {},
            disabled:{
                type:Boolean,
                default:false
            },
            showUpload:{
                type:Boolean,
                default:true
            },
            multiple:{
                type:Boolean,
                default:true
            },
            modal:{
                type:Boolean,
                default:true
            },
            maxCount:{
                type:Number,
                default:99
            },
            videoList:{
                type:String,
                default:''
            },
            title:{
              type:String,
              default: '查看'
            },
            limitMin:{
              type:String,
              default: ''
            },
            limitMessage:{
              type:String,
              default: ''
            },
            beforeUploadFunc:Function,
            uploadSuccessfulFunc:Function
        },
        components:{ViewImg},
        watch: {
            value(newVal) {
                if(typeof newVal=== 'string'&&newVal){
                    this.pictures = newVal.split(',');
                }

            },
            videoList(newVal) {
                if(typeof newVal=== 'string'){
                    this.videos = newVal.split(',');
                }
            }
        },
        created() {
        },
        methods: {
          previewFileUrl(item){
            return this.$eno.previewFileUrl(this, item)
          },
            fileOverLimit(){
                this.$message({
                    type:'error',
                    message:`最多可上传${this.maxCount}张图片`
                });
                return false;
            },

            /*上传文件之前*/
            beforeUpload:function(file){
				if(this.beforeUploadFunc){
					this.beforeUploadFunc(file)
				}
				this.videoType = file.name.split('.').pop().toLowerCase();
				return this.$eno.checkFileSize(this, file.size, this.limitMin,this.limitMessage)

            },


            /*删除图片*/
            handleRemove(data, type='img') {
                if(type == 'img'){
                    this.pictures.splice(data, 1);
                    this.imgList.splice(data, 1);
                    this.$emit('input',this.pictures.join(','));
                }
                else{
                    this.videos.splice(data, 1);
                }
            },

            /*查看大图*/
            handlePictureCardPreview(file) {
                this.initImgList()

                this.showIndex = this.imgList.findIndex(item=>{
                    return item.data == file;
                })
                this.showImgDialog = true;
            },
            initImgList(){
                this.imgList=[];
                this.pictures.forEach(value=>{
                    this.imgList.push({
                        type:'img',
                        data:value,
                        url:this.$eno.previewFileUrl(this, value),
                        name:value+'.png'
                    });
                });
                this.videos.forEach(value=>{
                    this.imgList.push({
                        type:'video',
                        data:value,
                        url:this.$eno.previewFileUrl(this, value),
                        name:value+'.mp4'
                    });
                });

            },

            /*图片上传成功*/
            uploadSuccessful: function (data, file) {
              if(data.code =='200'){
                if(this.uploadSuccessfulFunc){
                  this.uploadSuccessfulFunc(data, file)
                }
                if(this.videoType.includes('mp4')){
                  this.videos.push(data.data);
                } else {
                  this.pictures.push(data.data);
                }
                this.$emit('input', this.pictures.join(','));
                this.$emit('video', this.videos.join(','));
              } else {
                this.$message.error(data.data);
              }

            },

            /*关闭弹窗*/
            close() {
                this.showImgDialog = false;
            },
        }
    }
</script>

<style lang="less" scoped>
  .video-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    font-size: 25px;
    color: white;
  }
  .video-box{
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 20px;
    margin: 0 auto;
    height: 200px;
  }
  #cpt-upload {
    /deep/ .el-upload-list--picture-card {
      .el-upload-list__item {
        width: 64px;
        height: 64px;
        line-height: 64px;
        margin-bottom: 0;
        border: none;

        img {
          width: 64px;
          height: 64px;
          border-radius: 4px;
          object-fit: cover;
        }

        &:hover, &.focus&, &.visited {
          border: none
        }
      }

      .el-upload-list__item-actions {
        font-size: 14px;

        span + span {
          margin-left: 10px;
        }
      }

      & + div {
        display: inline-block;
        vertical-align: middle;
      }
    }

    /deep/ .el-upload {
      width: 64px;
      height: 64px;
      line-height: 64px;
      border-color: @borderColor;
      border-radius: 4px;

      .el-icon-plus {
        @normalFontSize();
        color: @textColor;
      }
    }
  }
</style>
