<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="$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" size="small" type="primary" @click="userConfirm">
        {{ $t('common:button:sign') }}
      </el-button>
    </div>
  </div>
</template>
<script>
import { getSystemBasicData } from '@/api/dictionary'
import { userConfirm } from '@/api/trials/trials'
import md5 from 'js-md5'
const attachmentSignCode = 'Document_Sign_Code'
export default {
  name: 'SignForm',
  props: {
    fileName: {
      type: String,
      required: true
    },
    isSystemDoc: {
      type: Boolean,
      required: true
    },
    documentId: {
      type: String,
      required: true
    },
    trialId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      signForm: {
        UserName: '',
        Password: ''
      },
      signText: '',
      btnLoading: false,
      loading: false
    }
  },
  mounted() {
    this.loading = true
    getSystemBasicData(attachmentSignCode).then(res => {
      var text
      if (this.$i18n.locale === 'zh') {
        text = res.Result.ValueCN
      } else {
        text = res.Result.Value
      }
      this.signText = text.replace('xxx', this.fileName)
      this.loading = false
    }).catch(() => { this.loading = false })
  },
  methods: {
    userConfirm() {
      const currentUser = zzSessionStorage.getItem('userName').toLocaleLowerCase()
      this.$refs.signForm.validate((valid) => {
        console.log(valid)
        if (!valid) return
        if (this.signForm.UserName.trim().toLocaleLowerCase() !== currentUser) {
          // 用户名输入错误！
          this.$alert(this.$t('common:message:signWarning'))
          return
        }
        this.btnLoading = true
        var params = {
          data: {
            trialId: this.trialId,
            documentId: this.documentId,
            isSystemDoc: this.isSystemDoc
          },
          signInfo: {
            UserName: this.signForm.UserName,
            PassWord: md5(this.signForm.Password),
            TrialId: this.trialId,
            SignCode: '',
            SignText: this.signText,
            SignCodeId: '',
            SubjectVisitId: ''
          }
        }
        userConfirm(params).then(res => {
          if (res.IsSuccess) {
            // 签名成功！
            this.$message.success(this.$t('common:message:signSuccessfully'))
            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>
