<template>
  <div>
    <div class="drawer_body_box">
      <el-form ref="importForm" :rules="rules" label-position="left" label-width="90px">
        <el-form-item label="文件模板" prop="name">
          <el-button size="small" @click="downloadTemplate">下载模板</el-button>
          <span>请按照模板格式填写数据</span>
        </el-form-item>
        <el-form-item label="导入文件" prop="name">
          <!-- “文件大小不可超过8MB”、“请上传格式为以.xlsx或.xls结尾的excel文件” -->
          <el-upload
            action="#"
            class="upload-demo"
            ref="upload"
            :limit="1"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            accept="image/jpeg, image/gif, image/png"
          >
            <i class="el-icon-upload" slot="trigger"></i>
            <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
            <el-button
              v-show="0"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >上传到服务器</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer__footer text-rt">
      <el-button type="primary" @click="saveData(1)">确定</el-button>
      <el-button @click="saveData(0)">取消</el-button>
    </div>
    <el-dialog
      title="导入数据结果"
      :visible.sync="dialogResultVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleResultClose"
    >
      <div class="result-box">
        <div>
          <i
            v-if="num_f>0"
            class="el-icon-warning"
            :class="[num_s===0&&num_f>0?'fail-all-bgc':'fail-bgc']"
          ></i>
          <i v-else class="el-icon-success"></i>
        </div>
        <div>成功导入{{num_s}}个号码，{{num_f}}个号码导入失败</div>
        <div v-if="num_f>0">
          <span>失败数据文件：</span>
          <a class="down-txt" @click="downloadFail">点击下载</a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { fetchCodesList } from '@/api/article'

export default {
  name: 'ImprtData',
  data() {
    return {
      num_s: 10,
      num_f: 11,
      dialogResultVisible: false,
      fileList: [],
      dialogFormVisible: false,
      rules: {}
    }
  },
  created() {},
  methods: {
    downloadFail() {
      console.log(this)
    },
    handleResultClose() {
      this.dialogResultVisible = false
    },
    downloadTemplate() {},
    addCallback(status) {},
    handleChange(file, fileList) {
      console.log(arguments)
      this.fileList = fileList
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`)
    },
    submitUpload() {
      if (!this.fileList.length) {
        this.$message.warning('请先选择上文件')
        return
      }
      var form = new FormData()
      form.append('photo', this.fileList[0].raw)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.9)'
      })
      this.$store
        .dispatch('user/uploadAvatar', form)
        .then(res => {
          console.log(res)
          loading.close()
          this.$emit('save', 1)
          this.$message({
            message: res.status || 'Successfully',
            type: 'success'
          })
        })
        .catch(err => {
          loading.close()
          this.$message.warning(err.status)
        })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleDownload() {},
    saveData(status) {
      console.log(this.fileList)
      this.dialogResultVisible = true

      // 0 cancel/close 1 save  dialogStatus/create/update
      if (status) {
        this.$refs['importForm'].validate(valid => {
          if (valid) {
            // if (!this.fileList.length) {
            //   this.$message({
            //     message: '请导入文件',
            //     type: 'warning'
            //   })
            //   return false
            // }
            // this.submitUpload()
          }
        })
      } else {
        this.$emit('save')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-upload {
  color: mediumblue;
  font-size: 24px;
  vertical-align: middle;
}
.result-box {
  line-height: 30px;
  text-align: center;
  .down-txt {
    color: rgb(77, 193, 244);
  }
  .el-icon-success {
    color: rgb(3, 182, 21);
    font-size: 33px;
  }
  .el-icon-warning {
    font-size: 33px;
  }
  .fail-all-bgc {
    color: #d9001b;
  }
  .fail-bgc {
    color: #f59a23;
  }
}
</style>
