import { ref } from 'vue'

export function useLoginView() {
  const username = ref('')
  const password = ref('')
  const tenant = ref('')
  const remember = ref(true)
  const showPassword = ref(false)

  const features = [
    {
      title: '智能审单',
      desc: 'AI 自动识别票据与规则，提升准确率与处理效率',
      icon: 'mdi mdi-file-document-outline',
      tone: 'green'
    },
    {
      title: '异常预警',
      desc: '多维风险识别与预警，主动防控报销风险',
      icon: 'mdi mdi-bell-outline',
      tone: 'red'
    },
    {
      title: 'SLA 监控',
      desc: '实时监控服务水位，保障审批和处理时效',
      icon: 'mdi mdi-sync',
      tone: 'blue'
    }
  ]

  const LogoMark = {
    template: `
      <span class="logo-mark" aria-hidden="true">
        <svg viewBox="0 0 36 36">
          <path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
          <path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
        </svg>
      </span>
    `
  }

  return {
    features,
    LogoMark,
    password,
    remember,
    showPassword,
    tenant,
    username
  }
}