<template>
  <div class="xh-files-cont"
       :class="[disabled ? 'is_disabled' : 'is_valid']">
    <flexbox class="f-header"
             :class="[disabled ? 'is_disabled' : 'is_valid']"
             @click.native="selectImage">
      <img class="f-logo"
           v-if="!disabled"
           src="@/assets/img/relevance_file.png" />
      <div class="f-name">附件</div>
      <input :id="'xhImageInput' + index||'0'"
             type="file"
             class="bar-iput"
             accept="*.*"
             multiple
             @change="xhUploadFile" />
    </flexbox>
    <div class="f-body">
      <flexbox class="f-item"
               v-for="(item, index) in dataValue"
               :key="index">
        <img class="f-img"
             src="@/assets/img/relevance_file.png" />
        <div class="f-name">{{item.name.length > 25 ? (item.name.substring(0, 25) + '...'): item.name+'('+item.size+')'}}</div>
        <div class="close-button"
             @click="deleteFile(item, index)">×</div>
      </flexbox>
    </div>
  </div>
</template>
<script type="text/javascript">
import arrayMixin from './arrayMixin'
import { crmFileSave, crmFileDelete } from '@/api/common'

export default {
  name: 'xh-files', // 新建 file  以数组的形式上传
  components: {},
  mixins: [arrayMixin],
  computed: {},
  watch: {},
  data() {
    return {}
  },
  props: {},
  mounted() {},
  methods: {
    selectImage() {
      if (!this.disabled) {
        document.getElementById('xhImageInput' + this.index || '0').click()
      }
    },
    /** 图片选择出发 */
    xhUploadFile(event) {
      var files = event.target.files
      var self = this
      for (let index = 0; index < files.length; index++) {
        const file = files[index]
        crmFileSave({
          'file[]': file
        })
          .then(res => {
            if (res.data) {
              this.dataValue.push(res.data[0])
              this.$emit('value-change', {
                index: this.index,
                value: this.dataValue
              })
            }
          })
          .catch(() => {})
      }
      event.target.value = ''
    },
    /** 删除图片 */
    deleteFile(item, index) {
      this.$confirm('您确定要删除该文件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          crmFileDelete({
            save_name: item.save_name
          })
            .then(res => {
              this.dataValue.splice(index, 1)
              this.$emit('value-change', {
                index: this.index,
                value: this.dataValue
              })
              this.$message.success(res.data)
            })
            .catch(() => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
/** 附件  */
.xh-files-cont {
  position: relative;
  display: inline-block;
  border-radius: 3px;
  width: 100%;
  border: 1px solid #ddd;
  padding: 3.5px 5px;
  margin: 3px;
  line-height: 15px;
}

.xh-files-cont.is_disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  cursor: not-allowed;
  .f-name {
    background-color: #f0f4f8ea;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

.xh-files-cont.is_valid:hover {
  border-color: #c0c4cc;
}

.f-header {
  cursor: pointer;
  padding: 5px 0 5px;
  .f-logo {
    position: block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
  }
  .f-name {
    color: #3e84e9;
    font-size: 12px;
  }
}
.f-header.is_disabled {
  cursor: not-allowed;
}

.f-body {
  .f-item {
    padding: 3px 0;
    height: 25px;
    .f-img {
      position: block;
      width: 15px;
      height: 15px;
      padding: 0 1px;
      margin-right: 8px;
    }
    .f-name {
      color: #666;
      font-size: 12px;
    }
    .close-button {
      cursor: pointer;
    }
  }
}

.bar-iput {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  opacity: 0;
}
</style>
