<template>
  <div>
    <!-- 导入弹窗 -->
    <el-dialog
      ref="exportdialog"
      title="导入"
      :visible.sync="openLeadIn"
      width="580px"
      append-to-body
      :close-on-click-modal="false"
      target="el-dialog__body"
      @closed="dialogClose"
    >
      <div
        v-loading="loading"
        class="dialogAAA"
        element-loading-text="正在导入中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0)"
        :style="{'pointer-events':loading?'':'none'}"
      />
      <slot />
      <div v-if="notemplate" class="dialog_link" @click="importLink">
        <el-link type="primary" :underline="false">
          下载导入模板
          <i type="primary" class="el-icon-download" />
        </el-link>
      </div>
      <el-upload
        ref="upload"
        class="upload-demo"
        :on-change="onChange"
        :auto-upload="false"
        :show-file-list="false"
        :file-list="fileList"
        :accept="accept"
        :before-upload="beforeUpload"
      >
        <div class="ele_dialog">
          <div slot="tip" class="ele_dialog_put">{{ uploadName }}</div>
          <el-button slot="trigger" class="ele_dialog_btn">浏览</el-button>
        </div>
      </el-upload>
      <div class="dialog_linkresult" v-if="hasResultLink">
        <el-link type="primary" :underline="false" @click="importResult">导入结果</el-link>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" :disabled="disimport" @click="submitFormLeadIn">确定</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import {downloadStatic} from '@/apiV2/common.js'
export default {
  props: {
    disimport: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    openLeadIn: {
      type: Boolean,
      default: false
    },
    // uploadName: {
    //   type: String,
    //   default: ''
    // },
    onChangeFunc: {
      type: Function,
      default: () => {}
    },
    importLinkFunc: {
      type: Function,
      default: () => {}
    },
    hasResultLink:{
      type:Boolean,
      default:true
    },
    importModelCode:{
      type:String,
      default:""
    },
    accept:{
      type:String,
      default:""

    },
    //MB
    fileSize:{
      type:Number,
      default:0
    },
    isExcel:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return{
      fileList:[],
      uploadName:""
    }
    
  },
  methods: {
    dialogClose() {
      this.fileList = []
      this.uploadName=""
      this.$emit('update:openLeadIn', false)
      
    },
    importLink() {
      if(this.importModelCode){
        downloadStatic(this.importModelCode).then(res=>{
            if(res.success){
              this.downloadExcel(res)
            }

        })
      }else{
        this.importLinkFunc().then(res => {
          if (res.data.value) {
            this.downloadExcel(window.open(res.data.value))
          } else {
            this.downloadExcel(res)
          }
        })

      }
      
    },
    onChange(e) {
      console.log(e)
      if(this.isExcel){
        let reg=/\.(xlsx|xls)$/
        if(!reg.test(e.name)){
          this.$message.error(`文件格式必须为xls或者xlsx`)
          this.fileList.pop()
          return
        }

      }
      if (this.fileSize) {
        const isLt = e.size / 1024 / 1024 < this.fileSize
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
          this.fileList.pop()
          return
        }
      }
      this.uploadName = e.name
      this.onChangeFunc(e)
    },
    submitFormLeadIn() {
      this.$emit('submitFormLeadIn')
    },
    // 导入结果按钮直接引用
    importResult() {
      this.$router.push({ path: '/exportlist/exportlist' })
    }
  }
}
</script>

<style scoped lang='scss'>
.ele_dialog {
  display: flex;
  margin: 20px;
  padding: 2px;
  border: 1px solid #DDE2EE;
  .ele_dialog_put{
    width: 360px;
    padding-left: 20px;
    margin-right: 10px;
    text-align: left;
    line-height: 36px
  }
  .ele_dialog_btn {
    background: #FFFFFF;
    color: #2D72FF;
    border: 1px solid #2D72FF;
    border-radius: 30px;
  }
}
.dialog_link {
  margin-left: 20px;
}
.dialog_linkresult {
  margin-left: 20px;
  margin-bottom: 10px;
}
.dialogAAA {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
}
</style>

