<template>
  <div class="sign-form-wrapper">
    <div class="sign-form-body">
      <h4 style="color:red">*{{ signText }}</h4>
      <el-form
        ref="signForm"
        :model="signForm"
        size="small"
        label-width="100px"
      >
        <el-form-item
          label="User ID: "
          prop="UserName"
          :rules="[
            { required: true, message: 'please specify.', trigger: 'blur' }
          ]"
        >
          <el-input v-model="signForm.UserName" />
        </el-form-item>
        <el-form-item
          label="Password: "
          prop="Password"
          :rules="[
            { required: true, message: 'please specify.', trigger: 'blur' }
          ]"
        >
          <el-input v-model="signForm.Password" show-password auto-complete="new-password" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer sign-form-footer">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="handleclose">Cancel</el-button>
      <el-button :loading="btnLoading" size="small" type="primary" @click="handleVerifySignature">签名</el-button>
    </div>
  </div>
</template>
<script>
import { VerifySignature } from '@/api/trials'
import md5 from 'js-md5'
export default {
  name: 'SignForm',
  props: {
    signText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      signForm: {
        UserName: '',
        Password: ''
      },
      btnLoading: false
    }
  },
  methods: {
    handleVerifySignature() {
      const currentUser = zzSessionStorage.getItem('userName').toLocaleLowerCase()
      this.$refs.signForm.validate((valid) => {
        if (!valid) return
        if (this.signForm.UserName.trim().toLocaleLowerCase() !== currentUser) {
          this.$alert('用户名输入错误！')
          return
        }
        this.btnLoading = true
        VerifySignature(this.signForm.UserName, md5(this.signForm.Password)).then(_ => {
          // 关闭窗口，并执行其他操作
          this.$emit('closeDialog', true)
        }).catch(() => { this.btnLoading = false })
      })
    },
    handleclose() {
      this.$emit('closeDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.sign-form-wrapper{
  .sign-form-body{
    padding:10px;
    border: 1px solid #e0e0e0;
    max-height:650px;
    overflow-y: auto;
  }
  .sign-form-footer{
    margin-top: 10px;
    text-align: right;
  }
}
</style>
