<!--
 * @Description:
 * @Author: ymz
 * @Date: 2021-12-14 16:10:04
 * @LastEditTime: 2021-12-20 18:22:17
 * @LastEditors: ymz
 * @Reference:
-->
<template>
<div>
    <el-dialog
      title="导入成员数据"
      :visible.sync="dialogVisible"
      width="40%"
      @close='closeDia'>
        <div class="upload">
          <div class="content">
            <div class="title">创建导入数据</div>
            <div class="icon" @click="down">
              <i class="el-icon-download"></i>
              <span>模板下载</span>
            </div>
            <div class="info">
              <p>1. 点击上面按钮下载Excel模板</p>
              <p>2. 按照模板格式填写团队成员姓名和手机号码</p>
              <p>3. 导入的成员姓名和手机号码需与维护的兼职学术推广员信息一致</p>
              <p>4. 保存Excel文件</p>
            </div>
          </div>
          <div class="line"></div>
          <div class="content">
            <div class="title">上传导入数据</div>
            <el-upload
              ref="upload"
              class="upload-demo"
              :action="uploadUrl"
              :headers="headers"
              :multiple='false'
              show-file-list
              :on-remove='removeFile'
              :file-list="uploadFileList"
              :on-change='fileChange'
              :on-success='uploadSuccess'
              :on-error='uploadError'
              :before-upload='beforeUpload'
              accept=".xls,.xlsx"
              :data='data'
              name='file'
              :limit="1"
              :auto-upload="false"
              >
              <div class="icon">
                <i class="el-icon-download"></i>
                <span>数据上传</span>
            </div>
        </el-upload>

            <div class="info">
              <p>1. 点击上面“数据上传”按钮</p>
              <p>2. 选择已更新过的Excel文件，并点击确定</p>
              <p>3. 您的文件名称将显示在页面上，可删除重新上传</p>
              <p>4. 点击导入按钮，会提示导入信息</p>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="importClick()">导 入</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="上传失败！"
      width="600px"
      :close-on-click-modal="false"
      @close="importErrorDialogShow = false"
      :visible.sync="importErrorDialogShow"
      center>
      <avue-crud
        style="width: 100%;"
        :data="importErrorTableData"
        :option="option1"
      >
      </avue-crud>
    </el-dialog>
</div>
</template>

<script>
import { download} from '@/api/teamManagement/index'
import store from '@/store'
import {tableOption, importErrorTableOption,} from '@/const/crud/admin/user'
export default {
//import 引入的组件需要注入到对象中才能使用
components:{},
props:{
  show:{
    type:Boolean,
    required:true,
    default:false
  },
  teamId:{
    required:true,
  }
},
data(){
//这里存数据
return{
  option1: importErrorTableOption,
  importErrorDialogShow:false,
  dialogVisible:false,
  importLoading:false,
  uploadUrl: '/admin/team/batch-import',
  uploadFileList:[],
  importErrorTableData:[],
  data:{
    teamId:this.teamId,
  },
  headers: {
    Authorization: 'Bearer ' + store.getters.access_token
    }
};
},
//计算属性
computed: {

},
//监控data中数据变化
watch: {
  show:{
    handler(val){
      this.dialogVisible = val
    },
    immediate:true
  },
},
//方法
methods: {
  // 下载模板
  async down(){
    let obj = {
      fileName: "team_member_upload_template.xlsx"
    }
    const res = await download(obj)
    let url = window.URL.createObjectURL(new Blob([res.data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '批量导入成员数据.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
  },
  uploadSuccess(res, file){
    this.$refs.upload.clearFiles()
    if(res.code === 1){
      // 上传错误
      if(res.data && res.data.code === 'FAILURE'){
        this.importErrorTableData = []
        const errorData = res.data.data
        if(Object.keys(errorData).length > 0){
           Object.keys(errorData).forEach(ele => {
            this.importErrorTableData.push({ reason: ele, index: errorData[ele] })
          })
        }
        this.importErrorDialogShow = true
      }else{
         this.$message.error(res.msg)
      }
      this.uploadFileList = []
    }else{
      this.uploadFileList = []
      this.$emit('importSuccess',1)
      this.$message.success('上传成功！')
      this.closeDia()
    }
  },
  uploadError(err){
    console.log(err);
  },
  beforeUpload(file){
    console.log(file);
  },
  fileChange(file,fileList){
    this.uploadFileList = fileList
  },
  importClick(){
    if(this.uploadFileList.length === 0){
      this.$message.closeAll()
      this.$message.info('请上传文件')
      return
    }
    this.data.teamId = this.teamId
    this.$refs.upload.submit();
  },
  removeFile(){
    // console.log(this.uploadFileList);
  },
  closeDia(){
    this.$emit('update:show', false)
  },

},
//声明周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
};
</script>

<style scoped lang='scss'>
.upload{
  .content{
    .title{
      font-size: 12px;
      color: #999;
    }
    .icon{
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #02a7f0;
      margin-top: 5px;
      padding-left: 10px;
      i{
        font-size: 20px;
        line-height: 25px;
      }
      span{
        margin-left: 5px;
        font-size: 14px;
        line-height: 25px;
      }
    }
    .info{
      margin-top: 5px;
      p{
        font-size: 13px;
        color: #999;
        line-height: 20px;
      }
    }
  }
  .line{
    width: 80%;
    margin: 15px auto;
    height: 1px;
    // background-color: #ccc;
  }
}
</style>
