<template>
  <div @click="fileclick" class="FlowFileDiv box">
    <div class="FlowFileLeft box_f1 box box_v">
      <div class="FlowFileTitle">{{name.length>11?name.slice(0,11)+'...':name}}</div>
      <div class="FlowFileSize">{{this.size}} M</div>
    </div>
    <div :class="`FlowFileIcon iconfont icon-file-${endname}`"></div>
  </div>
</template>

<script>
    export default {
        name: "d-flowFile",
        mounted() {
          if(!this.file.name || !this.file.path) {
            this.name = "未知文件类型"
            this.size = 0
          }else {
            this.name = this.file.name
            this.size = this.file.size?parseFloat(this.file.size/1024).toFixed(2):0
            let h = this.file.path.replace(/.*\./g,'').toLowerCase();
            switch(h) {
              case 'doc' :
                this.endname = 'word'
                break;
              case 'docx' :
                this.endname = 'word'
                break;
              case 'xls' :
                this.endname = 'excel'
                break;
              case 'xlsx' :
                this.endname = 'excel'
                break;
              case 'ppt' :
                this.endname = 'ppt'
                break;
              case 'pptx' :
                this.endname = 'ppt'
                break;
              case 'txt' :
                this.endname = 'txt'
                break;
              case 'pdf' :
                this.endname = 'pdf'
                break;
              case 'jpg' :
                this.endname = 'img'
                break;
              case 'png' :
                this.endname = 'img'
                break;
              case 'gif' :
                this.endname = 'img'
                break;
              default:
                this.endname = 'none'
                break;
            }
          }

        },
        data() {
            return {
              name: "",
              endname : "",
              size: 0
            }
        },
        props: {
          file: Object
        },
        components: {},
        methods: {
          fileclick() {
            this.$emit('fileclick',this.file)
          }
        }
    }
</script>

<style scoped>
.FlowFileDiv {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  position: relative;
}
.FlowFileDiv::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 5px;
  left: 0;
  top: 0;
  display: none;
  background: rgba(0, 0, 0, .1);
  pointer-events: none;
}
.FlowFileDiv:active::after {
  display: block;
  pointer-events: none;
}
.FlowFileLeft {
  position: relative;
}
.FlowFileTitle {
  height:30px;
  line-height: 40px;
  font-size: 15px;
}
.FlowFileSize {
  height: 30px;
  line-height: 25px;
  font-size: 14px;
  color: #999;
}
.FlowFileIcon {
  font-size: 35px;
  height: 60px;
  line-height: 58px;
}
.icon-file-word {
  color: #4d97ff;
}
.icon-file-excel {
  color: #58c012;
}
.icon-file-ppt {
  color: #ff9843;
}
.icon-file-none {
  color: #999;
}
.icon-file-pdf {
  color: #ff5b5a;
}
.icon-file-txt {
  color: #91a7b9;
}
.icon-file-img {
  color: #ff5b5a;
}
</style>
