<template>
  <!-- 发货信息，用于导出代发货订单的excel交给快递公司 -->
  <el-dialog
    :modal="false"
    title="请选择操作,同时只能上传一个文件"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="38%"
  >
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="$http.adornUrl('/prod/prod/exportExcel')"
      :headers="{Authorization: $cookie.get('Authorization_vs')}"
      :limit="1"
      name="excelFile"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-error="uploadFalse"
      :on-success="uploadSuccess"
      :file-list="files"
      :auto-upload="false"
      :before-upload="beforeAvatarUpload"
    >
      <!-- :file-list="fileList" -->
      <!-- multiple -->
      <div slot="tip" class="el-upload__tip"></div>
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="downloadModel">下载模板</el-button>
    </el-upload>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      couponId: 3,
      files: [],
      dataForm: {
        consignmentName: '',
        consignmentMobile: '',
        consignmentAddr: ''
      },
      dataRule: {
        consignmentName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        consignmentMobile: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        consignmentAddr: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // uploadUrl: function () {
    //   return this.$http({
    //     url: this.$http.adornUrl('/order/order/exportExcel'),
    //     method: 'post',
    //     params: this.$http.adornParams({
    //       'businessName': this.businessName,
    //       'businessStatus': this.businessStatus,
    //       'businessType': this.businessType
    //     }) })

    //   this.$http.adornUrl(
    //   '/order/order/exportExcel' +
    //   '?businessName=' +
    //   this.businessName +
    //   '&businessStatus=' +
    //   this.businessStatus +
    //   '&businessType=' +
    //   this.businessType
    // )
    // },
    uploadSuccess (response) {
      console.log(response)
      if (response) {
        alert(response)
        this.files = []
        this.visible = false
      } else {
        console.log('boboboboobo')
        alert('文件导入失败')
      }
    },
    uploadFalse (response) {
      alert('文件上传失败！')
    },
    init (id) {
      this.visible = true
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
      })
      this.couponId = id
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        alert('上传模板只能是 xls、xlsx格式!')
      }
      if (!isLt2M) {
        console.log('上传模板大小不能超过 10MB!')
      }
      return extension || (extension2 && isLt2M)
    },
    submitUpload () {
      // if (this.businessType != null) {
      console.log('subumit')
      // 触发组件的action
      this.$refs.upload.submit()
      // }
      // if (this.businessType == null) {
      //   this.businessType = 'businessType不能为空'
      // }
    },
    handleRemove (file) {
      console.log(file)
    },
    handlePreview (file) {
      if (file.response.status) {
        alert('此文件导入成功')
      } else {
        alert('此文件导入失败')
      }
    },
    // 下载模板
    downloadModel () {
      this.$http({
        url: this.$http.adornUrl('/prod/prod/downloadModel'),
        method: 'get',
        responseType: 'blob' // 解决文件下载乱码问题
      }).then(({ data }) => {
        var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        const fileName = '商品导入模板.xls'
        const elink = document.createElement('a')
        if ('download' in elink) { // 非IE下载
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
    // init () {
    //   console.log('11111111111111111')
    //   this.visible = true
    //   this.$nextTick(() => {
    //     // this.$refs['dataForm'].resetFields()
    //   })
    // }
    // // 表单提交
    // dataFormSubmit () {
    //   this.$refs['dataForm'].validate((valid) => {
    //     if (valid) {
    //       this.visible = false
    //       this.$emit('inputCallback', this.dataForm)
    //     }
    //   })
    // }
  }
}
</script>
