<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 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
            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: '',
    },
    signReplaceText: {
      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
        if (this.signReplaceText) {
          this.signText = res.SignText.replace('xxx', this.signReplaceText)
        } else {
          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.$alert(this.$t('common:message:signWarning'))
          this.loading = false
          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;
    // /deep/ .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>
