<template>
  <div v-loading="loading" class="sign-form-wrapper">
    <div class="sign-form-body">
      <h4 v-if="signText" style="color:red;white-space: pre-line;">* {{ signText }}</h4>
      <el-form
        ref="signForm"
        :model="signForm"
        size="small"
        label-width="100px"
      >
        <!-- 用户名 -->
        <el-form-item
          :label="$t('common:form:sign:userName')"
          prop="userName"
          :rules="[
            { required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
          ]"
        >
          <el-input :maxLength="$inputMax" v-model="signForm.userName" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item
          :label="$t('common:form:sign:password')"
          prop="password"
          :rules="[
            { required: true, message: $t('common:ruleMessage:specify'), trigger: 'blur' }
          ]"
        >
          <el-input :maxLength="$inputMax" 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" :disabled="unsigned" 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,
      unsigned: false
    }
  },
  mounted() {
    this.loading = true
    this.$store.dispatch('trials/getSignInfo', { signCode: this.signCodeEnum })
      .then((res) => {
        this.unsigned = false
        this.loading = false
        this.signText = res.SignText
        this.signCode = res.SignCode
        this.signCodeId = res.SignCodeId
      }).catch(() => {
        this.loading = false
        this.unsigned = true
      })
  },
  methods: {
    handleVerifySignature() {
      const currentUser = zzSessionStorage.getItem('userName').toLocaleLowerCase()
      this.$refs.signForm.validate((valid) => {
        if (!valid) return
        if (this.signForm.userName.trim().toLocaleLowerCase() !== currentUser) {
          // 用户名输入错误！
          this.$message.error(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
        }
        this.$emit('closeDialog', true, param)
      })
    },
    handleclose() {
      this.$emit('closeDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>
  .sign-form-wrapper{
    .sign-form-body{
      padding:5px 10px 10px 10px;
      // border: 1px solid #e0e0e0;
      max-height:650px;
      overflow-y: auto;
      // >>>.el-form-item__label{
      //   color: #fff;
      // }
    }
    .sign-form-footer{
      padding:10px;
      margin-top: 10px;
      text-align: right;
    }
  }

</style>
<style>
.el-dialog__body .sign-form-body h4{
  word-break: normal!important;
}
</style>
