<template>
  <div v-loading="loading" class="sign-form-wrapper">
    <div class="sign-form-body">
      <h4 v-if="signText" 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: $t('common:ruleMessage:specify'), trigger: 'blur' }
          ]"
        >
          <el-input v-model="signForm.userName" />
        </el-form-item>
        <el-form-item
          label="Password: "
          prop="password"
          :rules="[
            { required: true, message: $t('common:ruleMessage: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">
        {{ $t('common:button:cancel') }}
      </el-button>
      <el-button :loading="btnLoading" size="small" type="primary" @click="handleVerifySignature">
        {{ $t('common:button:sign') }}
      </el-button>
    </div>
  </div>
</template>
<script>
import { verifySignature } from '@/api/trials'
import md5 from 'js-md5'
// import const_ from '@/const/sign-code'
export default {
  name: 'SignForm',
  props: {
    signCodeEnum: {
      type: Number,
      required: true
    },
    subjectVisitId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      signForm: {
        userName: '',
        password: ''
      },
      signText: '',
      signCodeId: '',
      signCode: '',
      btnLoading: false,
      loading: false

    }
  },
  mounted() {
    this.loading = true
    this.$store.dispatch('trials/getSignInfo', { signCode: this.signCodeEnum })
      .then((res) => {
        this.loading = false
        this.signText = res.SignText
        this.signCode = res.SignCode
        this.signCodeId = res.SignCodeId
      }).catch(() => {
        this.loading = 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(this.$t('common:message:signWarning'))
          return
        }
        this.btnLoading = true
        const param = {
          userName: this.signForm.userName,
          passWord: md5(this.signForm.password),
          trialId: this.$route.query.trialId,
          signCode: this.signCode,
          signText: this.signText,
          signCodeId: this.signCodeId,
          subjectVisitId: this.subjectVisitId
        }
        verifySignature(param).then(res => {
          var signId = res.Result
          // 关闭窗口，并执行其他操作
          this.$emit('closeDialog', true, signId, this.signCode)
        }).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>
