<template>
  <el-dialog
    :title="title"
    visible
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="800px"
  >
    <div v-for="item in fileList" :key="item.id" class="file-list">
      <span>{{ getFileName(item.url) }}</span>
      <div @click="deleteFile(item.id)">{{ $t('删除') }}</div>
      <div @click="downloadFile(item.url)">{{ $t('下载') }}</div>
    </div>
    <div style="margin-top: 30px;display:flex;">
      <el-upload action="#" accept="png" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUploadimg1">
        <el-button size="small">
          {{ $t('上传新附件') }}
          <i class="el-icon-upload el-icon--right" />
        </el-button>
      </el-upload>
      <el-button style="margin-left: 60px;" @click="closeDialog">{{ $t('返回') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { warehousePictureList, warehousePictureCreate, warehousePictureDelete,uploadOrgname } from '@/api/ecw/order'

export default {
  props: {
    orderId: [String, Number],
    orderNo: [String, Number]
  },
  data() {
    return {
      show: false,
      detail: null,
      fileList: []
    }
  },
  computed: {
    title() {
      let t = this.$t('报关资料')
      if (this.orderNo) {
        t += '-' + this.orderNo
      }
      return t
    }
  },
  created() {
    this.show = true
    this.loadData()
  },
  methods: {

    loadData() {
      warehousePictureList({ bizId: this.orderId, type: 6 }).then((res) => {
        this.fileList = res.data
      })
    },
    getFileName(url) {
    	if (!url) return '/'
    	var file = url.split('/')
    	return file[file.length - 1]
    },
    closeDialog() {
      this.show = false
      this.$emit('close')
    },
    // 覆盖默认的上传行为
    requestUpload() {
    },
    // 上传预处理
    beforeUploadimg1(file) {
      if (this.fileList.length >= 10) {
        this.$message.error(this.$t('您最多上传10个附件'))
        return
      }
      console.log(file)
      var type = file.name.split('.')

      if (['xls', 'doc', 'ppt', 'txt', 'pdf', 'jpg', 'png', 'jpeg', 'docx', 'xlsx'].indexOf(type[type.length - 1]) === -1) {
        this.$message.error(this.$t('附件仅限doc/xls/ppt/txt/pdf/jpg/png/jpeg/docx/xlsx格式'))
      } else {
      // 上传
        const formData = new FormData()
        formData.append('file', file)
        // formData.append('path', this.uuid())
        uploadOrgname(formData).then(response => {
          if (response.data) {
            this.createImage(response.data)
          }
        })
      }
    },
    createImage(url) {
      warehousePictureCreate({ bizId: this.orderId, type: 6, url: url }).then(res => {
        this.$message.success(this.$t('上传成功'))
        this.loadData()
      })
    },
    downloadFile(url) {
      window.open(url, '_self')
    },
    deleteFile(id) {
      this.$confirm(this.$t('确定删除附件吗?')).then(function() {
        return warehousePictureDelete(id)
      }).then(() => {
        this.loadData()
        this.$message({
          message: this.$t('删除成功'),
          type: 'success'
        })
      }).catch(() => {})
    },
    uuid() {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  &:before {
    content: '';
    width: 5px;
    height: 15px;
    background: #666;
    margin-right: 10px;
  }
}
  .file-list{
  	display: flex;
  	align-items: center;
  	color: #297CE7;
    margin-left: 30px;
    font-size:16px;
    margin-bottom:10px;
    div{
      cursor: pointer;
      margin-left: 30px;
    }
  }
</style>