<template>
  <div>
    <!-- 如果密码已经设置，则显示重置密码按钮 -->
    <div v-if="!showonly&&showPassInput" class="cursor-pointer">
      <q-toggle v-model="showPassInput" />设置密码
    </div>
    <kyb-input
      v-if="!showonly&&!showPassInput"
      v-model="valueInner"
      :mdata="mdata"
      clearable
      :type="showText?'text':'password'"
      v-bind="$attrs"
      @submit="$emit('submit',$event)"
      @input="$emit('input',$event)"
    >
      <template v-slot:append>
        <q-icon
          :name="!showText ? 'visibility_off' : 'visibility'"
          class="cursor-pointer q-mx-sm"
          @click="showText=!showText"
        >
          <q-tooltip>{{!showText ? '显示密码原文' : '关闭密码原文'}}</q-tooltip>
        </q-icon>
      </template>
    </kyb-input>
  </div>
</template>
<script>
export default {
  name: 'kyb-password',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String,
    mdata: Object,
    showonly: Boolean,
    updateShow: Boolean
  },
  watch: {
    value(old) {
      this.valueInner = old
    }
  },
  data() {
    return {
      showPassInput: this.updateShow,
      showText: false,
      valueInner: this.value
    }
  }
}
</script>
