<template>
    <div>
        <!-- ,application/vnd.ms-excel -->
        <!-- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet -->
        <el-upload
      
            action="#"
            :show-file-list="false"
            accept="application/vnd.ms-excel"
            :http-request="upload"
            :before-upload="beforeAvatarUpload"
          >
          <el-button slot="trigger" type="">商品批量导入</el-button>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible" :modal="false">
        <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { _deepClone, _deal,_getStorage } from '@/utils/utils'

export default {
  props:{
    templateId:{
      type:String,
      default:''
    }
  },
    data(){
        return {
          form:{
            logo:''
          },
            uploadData: {keys:[],successNum:0,beforeNum:0}, // 临时存放上传文件
            imgsJson:{
                supMainImgs: [],
            },
            dialogImageUrl: '',
            dialogVisible: false,
            picWidth:'200',
            picHeight:'200'
        }
    },
    methods:{
      beforeAvatarUpload(file){
        if(file){
            if((file.type == 'application/vnd.ms-excel')){
              // xlsx: (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
            } else {
                this.$message({
                    type:'warning',
                    message:'请上传xls文件！'
                })
            }
        } else {
            this.$message({
                type:'warning',
                message:'请上传附件！'
            })
        } 
      },
      // 上传
        upload(e) {
            this.getApi(e.file)
        },
        getApi(file){
          let formData = new FormData()
          formData.append('file', file)
          formData.append('templateId', this.templateId)
          const config = {
              headers: {
                  'Content-Type': 'multipart/form-data',
              }
          }
          this.loadingStart()
          this.$axios.post('/excel/read',formData, config).then((res) => {
            let {code,data,message,msg} =res.data
            if(code==200){
              this.$emit('uploadResult',data)
            }else{
              this.$emit('uploadResult',false)
              this.$message.error(message||msg)
            }
            this.loadingEnd()
          }).catch(()=>{
             this.loadingEnd()
          })
        },
        //图片文件转base64方法
          getBase64(file) {
            return new Promise(function(resolve, reject) {
                const reader = new FileReader()
                let imgResult = ''
                reader.readAsDataURL(file)
                reader.onload = function() {
                    imgResult = reader.result
                    console.log(imgResult.width)
                }
                reader.onerror = function(error) {
                    reject(error)
                }
                reader.onloadend = function() {
                    resolve(imgResult)
                }
            })
        },
        loadingStart(tx){
            this.loading = this.$loading({
                lock: true,
                text: tx?tx:'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        loadingEnd(type){
            if(type){
                this.$message.error('网络异常,请重新上传试试！')
            }
            this.loading.close()
        },
    
    }
}
</script>
<style lang="scss" scoped>
.avatar-uploader{
  margin: 0 auto;
  text-align: center;
}
</style>