<template>
  <div class="importFile">
    <el-alert title="选取的EXCEL文件需要严格按照下载的EXCEL模板进行填写！选择好文件后点击导入即可！" type="warning" class="md" show-icon/>
    <el-row>
      <el-col :lg="7" class="md">
        <a :href="downloadUrl" download="外呼号码导入模板.xlsx" class="download_btn" title="点击下载EXCEL模板" rel="nofollow">
          下载EXCEL模板
        </a>
      </el-col>
      <el-col :lg="17" class="md">
        <el-upload
          ref="upload"
          :limit="1"
          :file-list="uploadData.fileList"
          :action= "uploadData.uploadUrl"
          :data = "uploadData.uploaderFiles"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :on-exceed="uploadExceed"
          :auto-upload="false"
          class="uploadFiles"
          list-type="text"
          name="upFile"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
          <el-button slot="trigger" size="small" type="primary">选取EXCEL文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'ImportFile',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      downloadUrl: '/static/xls/importPhonesTemplate.xlsx',
      uploadData: {// 文件上传数据
        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'callcenterapi/api/autocallouttask/importexcel',
        uploaderFiles: {// 上传文件的参数
          taskid: this.rowid // 是	string	任务id
        },
        fileList: [] // 展示文件的数据
      }
    }
  },
  created() {
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 文件上传
    uploadSuccess(response, file, fileList) {
      if (response.state.toLowerCase() === 'success') {
        this.$parent.$layer.close(this.layerid)
        this.$parent.getListR() // 重新加载父级数据
        this.$message.success('恭喜你，外呼号码导入成功!')
      } else {
        this.$message.error(response.message)
      }
    },
    uploadExceed(file, fileList) {
      this.$message.warning('只能选择一个文件!')
    },
    uploadError(err, file, fileList) {
      this.$message.error(err)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	.importFile{
		.md{
			margin-bottom: 20px;
		}
		.download_btn{
			display: inline-block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			border: 1px solid #dcdfe6;
			-webkit-appearance: none;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			outline: 0;
			margin: 0;
			-webkit-transition: .1s;
			transition: .1s;
			font-weight: 500;
			padding: 9px 15px;
			font-size: 12px;
			border-radius: 4px;
			color: #fff;
			background-color: #409EFF;
			border-color: #409EFF;
			&:hover{
				background: #66b1ff;
				border-color: #66b1ff;
				color: #fff;
			}
			&:active{
				background: #66b1ff;
				border-color: #66b1ff;
				color: #fff;
			}
		}
	}

</style>
