// 批量上传
<template>
  <div>
    <el-dialog
      title="批量导入"
      width="500px"
      :visible.sync="dialogVisible"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      @close="dialogClose"
    >
      <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="120px">
        <el-form-item v-if="checkRole([1])" label="绑定账号" prop="adminId" required>
          <el-select v-model="form.adminId" class="filter-item" placeholder="请选择账号" clearable filterable>
            <el-option
              v-for="item in userList"
              :key="item.adminId"
              :label="item.username"
              :value="item.adminId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="correctList">
          <batch-file-upload ref="batchUploadRef" :range="1" @getFileList="batchUploadResult" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 批量注册-抽屉 -->
    <el-drawer
      :title="hasCompleted ? '导入已完成' : '正在处理中..'"
      :visible.sync="drawerVisible"
      :wrapper-closable="false"
      size="50%"
      direction="rtl"
    >
      <div style="padding: 50px">
        <div>
          已处理条数；{{ hasDealNumber }}; 待处理条数：{{ waitDealNumber }};
          总共条数：{{ allNumber }}
        </div>
        <el-progress
          :percentage="makePercent"
          :format="formatProgress"
          style="margin-top: 10px"
        />
        <el-table
          ref="batch_upload_result"
          v-loading="false"
          :data="batchUploadResultList"
          class="table"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          height="500"
        >
          <el-table-column label="错误序号" align="center" width="100px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="楼层" align="center">
            <template slot-scope="scope">
              {{ scope.row.floor }}
            </template>
          </el-table-column>
          <el-table-column label="显示标题" align="center">
            <template slot-scope="scope">
              {{ scope.row.showTitle }}
            </template>
          </el-table-column>
          <el-table-column label="身份证号" align="center">
            <template slot-scope="scope">
              {{ scope.row.idNumber }}
            </template>
          </el-table-column>
          <el-table-column label="错误描述" align="center">
            <template slot-scope="scope">
              {{ scope.row.err }}
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center; margin: 20px 0">
          <el-button type="primary" @click="drawerVisible = false">
            我已知晓
          </el-button>
          <el-button type="warning" @click="downloadBatchUploadErrorList">
            下载错误列表文件
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { checkRole } from '@/utils/checkRole'
import { addOrUpdate } from '@/api/visitee'
import BatchFileUpload from '@/components/BatchFileUpload'

export default {
  components: { BatchFileUpload },
  props: {
    userList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        adminId: null,
        correctList: {
          correct: [],
          incorrect: []
        }
      },
      rules: {
        adminId: [
          { required: true, type: 'number', whitespace: true, message: '不能为空!', trigger: ['change', 'blur'] }
        ],
        correctList: [
          { required: true, type: 'object', message: '模板不能为空!', trigger: ['change', 'blur'], validator: (rule, value, callback) => {
            if (Object.keys(value).length > 0 && ((value.correct && value.correct.length > 0) || (value.incorrect && value.incorrect.length > 0))) {
              return callback()
            }
            return callback('数据不能为空!')
          } }
        ]
      },
      dialogVisible: false,
      // 批量注册-处理提示值
      hasDealNumber: 0,
      waitDealNumber: 0,
      allNumber: 0,
      hasCompleted: false,
      // 批量注册-抽屉控制值
      drawerVisible: false,
      batchUploadResultList: []
    }
  },
  computed: {
    // 批量注册-返回向下取整，减少渲染次数
    makePercent() {
      return Math.floor((this.hasDealNumber / this.allNumber) * 100)
    }
  },
  created() {},
  methods: {
    checkRole,
    open() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    dialogClose() {
      this.$refs.batchUploadRef.clearFile()
    },
    batchUploadResult(correctList) {
      this.form.correctList = correctList
    },
    // 批量注册-操作
    getFileList(correctList) {
      this.hasCompleted = false
      this.drawerVisible = true
      this.hasDealNumber = correctList.incorrect.length
      this.waitDealNumber = correctList.correct.length
      this.allNumber = correctList.incorrect.length + correctList.correct.length
      this.batchUploadResultList = correctList.incorrect.map((item) => {
        return { name: item.name, err: item.reason }
      })
      this.makeScrollDown()
      this.doSubmitUrl(correctList, 0)
    },
    // 批量注册-并提交至添加到接口
    async doSubmitUrl(correctList, index) {
      if (index <= correctList.correct.length - 1) {
        const item = correctList.correct[index]
        if (item['楼层'] && item['显示标题']) {
          // 组装数据上传
          const data = JSON.parse(JSON.stringify(this.form))
          console.log(data);
          data.name = item['姓名'] ? item['姓名'] : null
          console.log(item);
          console.log(item['手机号']);
          data.phone = item['手机号'] ? item['手机号'] : null
          data.idNumber = item['身份证号'] ? item['身份证号'] : null
          data.company = item['单位名称'] ? item['单位名称'] : null
          data.unitName = item['部门'] ? item['部门'] : null
          data.floor = item['楼层']
          data.room = item['房间号'] ? item['房间号'] : null
          data.showTitle = item['显示标题']
          data.zoneNames = item['区域'] ? item['区域'] : null
          delete data.correctList

          let hasValidate = true
          // let error = {
          //   floor: data.floor,
          //   showTitle: data.showTitle,
          //   idNumber: data.idNumber,
          //   err: ''
          // }
          // if (data.floor) {
          //   const idreg = /^-?[1-9]\d*$/
          //   if (!idreg.test(data.floor)) {
          //     error.err = '楼层只能为整数'
          //     hasValidate = false
          //   }
          // }
          if (data.idNumber) {
            if (data.idNumber.length === 15) {
              const idreg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
              if (!idreg.test(data.idNumber)) {
                this.batchUploadResultList.push({
                  floor: data.floor,
                  showTitle: data.showTitle,
                  idNumber: data.idNumber,
                  err: '身份证号格式错误'
                })
                hasValidate = false
              }
            } else if (data.idNumber.length === 18) {
              const idreg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
              if (!idreg.test(data.idNumber)) {
                this.batchUploadResultList.push({
                  floor: data.floor,
                  showTitle: data.showTitle,
                  idNumber: data.idNumber,
                  err: '身份证号格式错误'
                })
                hasValidate = false
              }
            } else {
              this.batchUploadResultList.push({
                floor: data.floor,
                showTitle: data.showTitle,
                idNumber: data.idNumber,
                err: '身份证号位数错误'
              })
              hasValidate = false
            }
          }
          if (hasValidate) {
            try {
              await addOrUpdate(data)
            } catch (err) {
              this.batchUploadResultList.push({
                floor: data.floor,
                showTitle: data.showTitle,
                idNumber: data.idNumber,
                err: err
              })
            }
          }
        } else {
          this.batchUploadResultList.push({
            name: item['姓名'] || '',
            phone: item['手机号'] || '',
            idNumber: item['身份证号'] || '',
            company: item['单位名称'] || '',
            unitName: item['部门'] || '',
            floor: item['楼层'] || '',
            room: item['房间号'] || '',
            showTitle: item['显示标题'] || '',
            zoneNames: item['区域'] || '',
            err: '不包含 "楼层" 或 "显示标题" 字段'
          })
        }
        this.hasDealNumber += 1
        this.waitDealNumber -= 1
        this.makeScrollDown()
        // 继续调用
        this.doSubmitUrl(correctList, ++index)
      } else {
        this.hasCompleted = true
        this.$emit('finish')
      }
    },
    // 批量注册人员-保持滚动条在最底部
    makeScrollDown() {
      this.$nextTick(() => {
        this.$refs.batch_upload_result.$refs.bodyWrapper.scrollTop = this.$refs.batch_upload_result.$refs.bodyWrapper.scrollHeight
      })
    },
    // 批量注册-返回进度条尾部显示值
    formatProgress(percent) {
      return percent === 100 ? '已完成' : ''
    },
    // 批量注册-导出错误名单
    downloadBatchUploadErrorList() {
      const list = this.batchUploadResultList
      let string = '序号\t楼层\t显示标题\t身份证号\t错误原因\n'
      for (let i = 0; i < this.batchUploadResultList.length; i++) {
        string +=
          (i + 1).toString() +
          '\t' +
          list[i].floor +
          '\t' +
          list[i].showTitle +
          '\t' +
          list[i].idNumber || '' +
          '\t' +
          list[i].err +
          '\t' +
          '\n'
      }
      const blob = new Blob([string], { type: 'text/plain;charset=utf-8' })
      const excel_url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = excel_url
      link.download = '批量注册结果错误名单.xls'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    submit(e) {
      e.preventDefault()
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.dialogVisible = false
        this.getFileList(this.form.correctList)
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
.table {
  margin-top: 15px;
}
</style>
