<template>

  <div class="file-box">
    <div 
      class="item-file" 
      v-for="(item,index) in fileData" 
      :key="index"
      :style="[
        {'width': auto ? '100%' : '300px'},
        {'margin-right':marginRight + 'px'},
        {'margin-bottom':marginRight + 'px'}
      ]"
    >
      <div class="left">
        <div class="image">
          <previewImage 
            v-if="item.fileType == 'image'"
            style="width:38px;height:38px;margin:0px" 
            :image="item" 
            :deletebtn="false"
          ></previewImage>
          <el-image v-else :src="item.cover" fit="fit" alt  />
        </div>
        <div class="text">
          <!-- <el-tooltip v-if="item.document" class="item" effect="dark" :content="item.document" placement="top-start"> -->
            <p @click="downLoad(item)" style="font-size:14px" class="file-title">{{item.document}}</p>
          <!-- </el-tooltip> -->
          <p class="create-date" style="font-size:12px" v-if="item.createdate">{{item.createdate}}</p>
        </div>
      </div>
      <div class="right">
        <i class="el-icon-zoom-in" v-if="item.fileType != 'image'" @click="seeClick(item)"></i>
        <i class="el-icon-delete" style="font-size:16px" @click="deleteFile(item,index)" v-if="isDelete"></i>
      </div>
    </div>
    <see-File ref="seeFile" :fileData="seeFile"></see-File>
  </div>
</template>

<script>
import SeeFile from '@/components/file-block/components/SeeFile'
import previewImage from '@/components/previewImage/index'

import removeFile from '@/utils/removeFile'
export default {
  name: 'index',
  data () {
    return {
      seeFile: '',
      isSeeFileShow:false,
      fileBoxEl: '',
      itemWidth:0
    };
  },
  props: {
    auto: Boolean,
    isDownLoad: Boolean,
    isDelete:Boolean,
    fileData: {
      default() {
        return []
      }
    },
    /* 一行展示几个 */
    rowCount: {
      type: Number,
      default () {
        return 1
      }
    },
    /* 块margin-right */
    marginRight: {
      type:Number,
      default () {
        return 0
      }
    },
  },
  components: {
    SeeFile,
    previewImage
  },
  computed: {
  },
  watch: {
  },
  created() {
    
  },
  mounted () {
    let el = document.querySelector('.file-box')
    this.itemWidth = el.clientWidth / this.rowCount - this.marginRight > 200 ? el.clientWidth / this.rowCount - this.marginRight : 200
  },
  methods: {
    debouned () {

    },
    deleteFile(item,index) {
      let temp = item
      removeFile.removeFileList([item]).then(res => {
        this.tool.showMessage(res,() => {
          this.$emit('deleteSuccess',temp)
        })
      })
      this.$emit('deleteFile',index)
    },
    //预览
    seeClick(item) {
      if(item.fileType == 'image' || item.fileType == 'video') {
        this.seeFile = item
        this.$refs.seeFile.dialogVisible = true
      } else {
        this.$notify({
          title:'提示',
          message:'该文件暂不支持',
          type:'warning'
        })
      }
    },
    downLoad(item) {
      this.$emit('updateDownLoadRecord',item)
      window.open(item.url,'_self')
    }
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.file-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item-file {
  display: flex;
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
  background: #ffffff;
  height: 80px;
}
.item-file:hover {
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
.file-box .left {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
}
.file-box .left .image {
  margin-right: 10px;
}
.file-box .left .image .el-image{
  width: 50px;
}
.file-box .left .text {
  width: calc(100% - 50px);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  padding-right: 10px;
}
.file-box .left .text .file-title {
  color: #3874f6;
  font-size: 16px;
  text-decoration: underline;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.file-box .left .text .create-date {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.file-box .right {
  width: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
}
.file-box .right .see{}
.el-empty {
  height: 150px;
  transform: scale(70%);
}
/deep/.el-dialog__wrapper {
  z-index: 9999;
}
</style>
