<template>
  <ta-modal :title="title" :visible="visible" :destroy-on-close="true" @cancel="closeModal">
    <div v-if="authRequest">
      <p>操作敏感数据项<span style="color: red">{{ description }}</span>，请先确认身份</p>
      <ta-input v-model="authKey" placeholder="请输入当前登录账户密码" type="password" autocomplete="new-password" :readonly="readonly">
        <ta-icon slot="prefix" type="key" />
        <ta-icon v-if="password" slot="suffix" type="eye-o" />
      </ta-input>
    </div>
    <div v-else>
      <p>验证失败, authRequest 参数缺失</p>
    </div>
    <template slot="footer">
      <ta-button type="primary" @click="confirmHttp">
        确定
      </ta-button>
      <ta-button @click="closeModal">
        取消
      </ta-button>
    </template>
  </ta-modal>
</template>

<script>
import encryption from '../../utils/js/encryption'
export default {
  name: 'ConfirmAuth',
  props: {
    authRequest: {
      type: Function,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    description: {
      type: String,
      default: '',
    },
    inputKey: {
      type: String,
      default: null,
    },
    inputValue: {
      type: String,
      default: null,
    },
  },
  data () {
    return {
      title: '敏感数据操作确认',
      authKey: '',
      readonly: true,
      password: 'password',
    }
  },
  watch: {
    visible: {
      handler (val) {
        this.authKey = ''
        this.readonly = !val
      },
      immediate: true,
    },
  },
  methods: {
    confirmHttp () {
      if (!this.authRequest) return
      if (!this.authKey || this.authKey == '') return
      this.authRequest({
        inputKey: this.inputKey,
        authKey: this.securityDeal(this.authKey),
      }, (val) => {
        this.authKey = ''
        this.$message.success('身份认证通过')
        this.$emit('authPass', this.inputValue || val)
        this.closeModal()
      })
    },
    securityDeal (key) {
      return encryption.encryptString(key)
    },
    closeModal () {
      this.authKey = ''
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style scoped>

</style>
