<template>
  <div>
    <!-- 解锁弹窗 -->
    <el-dialog :title="$t('page.business.resource.gsp.dr')" :visible.sync="open" width="600px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-upload  ref="upload" :data="form" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
              :action="upload.url" :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">{{ $t('page.business.resource.gsp.tzsc') }}<em>{{
                $t('page.business.resource.gsp.djsc') }}</em></div>
              <div class="el-upload__tip text-center" slot="tip">
                <span>{{ $t('page.business.resource.gsp.wjgs') }}</span>
                <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                  @click="importTemplate">{{ $t('page.business.resource.gsp.xzmb') }}</el-link>
              </div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;">
          <el-col :span="12">
            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
              <el-input type="text" :value="form.qmyy" maxlength="50" disabled
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('form.signer')">
              <el-input type="text" v-model="nickName" maxlength="50" disabled
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.signerPsw')" prop="qmrmm">
              <div class="sbzdtcma"> <input type="text"></div>
              <el-input type="password" v-model="form.qmrmm" show-password maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.remark')" prop="qmbz">
              <el-input type="textarea" v-model="form.qmbz" :rows="2" maxlength="500"
                :placeholder="$t('form.placeholderInput')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">{{ $t('form.confirm') }}</el-button>
        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { js } from "@/api/business/gsp/gspRkjl"
import { mapGetters } from 'vuex'
import { getToken } from "@/utils/auth"
export default {
  name: "Js",
  data() {
    return {
      open: false,
      form: {
        qmrmm: null,
        qmbz: null
      },
      rules: {
        qmrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }]
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/business/gspRkjl/importData"
      },
    }
  },
  computed: {
    ...mapGetters([
      'nickName'
    ]),
  },
  created() {
  },
  methods: {
    // 下载模板
    importTemplate() {
      this.download('/system/business/gspRkjl/importTemplate', {
      }, `【模板】供试品入库记录.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      const file = this.$refs.upload.uploadFiles
      if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) {
        this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
        return
      }
      this.$refs.upload.submit()
    },
    cancel() {
      this.open = false
    },
    reset() {
      this.form = {
        qmyy: this.$t('page.business.resource.gsp.xzgsprkjl'),
        qmrmm: null
      }
      this.resetForm("form")
    },
    show() {
      this.reset()
      this.open = true
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          js(this.form).then(response => {
            this.open = false
            this.$emit('callback')
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss"  scoped>

::v-deep .el-upload-dragger {
  width: 560px;
}
</style>