<script setup lang="ts">
import { computed, ref } from 'vue'
import { NInput } from 'naive-ui'
import { api } from '@/shared/api/common'

const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()

// Label布局：上下结构(vertical) 或 左右结构(horizontal)
const labelLayout = computed(() => props.df.label_layout || 'vertical')

const isAdministrator = computed(() => {
  const boot = (window as any).jingrow?.boot
  return boot?.user?.name === 'Administrator' || boot?.user?.roles?.includes?.('Administrator')
})

const visible = ref(false)
const revealing = ref(false)

const inputType = computed(() => visible.value ? 'text' : 'password')

function isDummyPassword(val: string | undefined | null): boolean {
  if (!val) return false
  return [...new Set(val)].join('') === '*'
}

const pagetype = computed(() =>
  (props.ctx?.entity && (props.ctx.entity.value ?? props.ctx.entity))
  || (props.record as any)?.pagetype
  || ''
)
const pagename = computed(() =>
  (props.ctx?.id && (props.ctx.id.value ?? props.ctx.id))
  || (props.record as any)?.name
  || ''
)

async function toggleVisible() {
  if (visible.value) {
    visible.value = false
    return
  }
  const currentValue = props.record[props.df.fieldname]
  if (isDummyPassword(currentValue) && pagetype.value && pagename.value) {
    revealing.value = true
    try {
      const res = await api.call('jingrow.client.get_password', {
        pagetype: pagetype.value,
        name: pagename.value,
        fieldname: props.df.fieldname,
      })
      const decrypted = res?.message ?? res
      if (decrypted) {
        props.record[props.df.fieldname] = decrypted
      }
    } catch {
      // 无权限等，仍切换显示
    } finally {
      revealing.value = false
    }
  }
  visible.value = true
}
</script>

<template>
  <div :class="['field-wrapper', `layout-${labelLayout}`]">
    <label class="field-label">
      {{ ctx.t(df.label || df.fieldname) }}
      <span v-if="df.reqd" class="required">*</span>
    </label>
    <div class="password-input-wrap">
      <n-input 
        v-model:value="record[df.fieldname]" 
        :type="inputType"
        placeholder=""
        :disabled="!canEdit"
        :loading="revealing"
      />
      <button 
        v-if="canEdit && isAdministrator"
        type="button" 
        class="password-toggle-btn" 
        @click="toggleVisible"
      >
        <svg v-if="visible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
      </button>
    </div>
  </div>
</template>

<style scoped>
.field-wrapper :deep(.n-input) {
  flex: 1;
}
.password-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.password-input-wrap :deep(.n-input) {
  flex: 1;
  padding-right: 32px;
}
.password-toggle-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 2px;
  display: flex;
  align-items: center;
  z-index: 1;
}
.password-toggle-btn:hover {
  color: #333;
}
</style>
