<template>
  <Dialog v-bind="$attrs" :options="{ title: '实名认证信息', size: '3xl' }">
    <template #body>
      <div v-if="loading" class="flex justify-center items-center py-12">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <span class="ml-3 text-gray-600">加载中...</span>
      </div>
      
      <div v-else-if="error" class="text-center py-12">
        <div class="text-red-500 mb-4">
          <AlertTriangleIcon class="h-12 w-12 mx-auto" />
        </div>
        <p class="text-gray-600">{{ error }}</p>
      </div>
      
      <div v-else-if="realNameData" class="space-y-6">
        <!-- 认证状态 -->
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border border-green-200">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <CheckCircleIcon class="h-8 w-8 text-green-500" />
            </div>
            <div class="ml-4">
              <h3 class="text-lg font-medium text-green-900">认证已通过</h3>
              <p class="text-sm text-green-700">该域名已完成实名认证</p>
            </div>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
          <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <FileTextIcon class="h-5 w-5 mr-2 text-blue-600" />
              域名基本信息
            </h3>
          </div>
          <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-4">
                <InfoItem label="域名" :value="realNameData.domain" />
                <InfoItem label="注册日期" :value="formatDate(realNameData.regdate)" />
                <InfoItem label="到期日期" :value="formatDate(realNameData.rexpiredate)" />
                <InfoItem label="认证状态" :value="getStatusText(realNameData.c_status)" />
              </div>
              <div class="space-y-4">
                <InfoItem label="模板ID" :value="realNameData.c_sysid" />
                <InfoItem label="注册类型" :value="getRegTypeText(realNameData.c_regtype)" />
                <InfoItem label="域名状态" :value="realNameData.status" />
              </div>
            </div>
          </div>
        </div>

        <!-- 所有者信息 -->
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
          <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <UserIcon class="h-5 w-5 mr-2 text-blue-600" />
              所有者信息
            </h3>
          </div>
          <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-4">
                <InfoItem label="中文姓名" :value="getFullChineseName()" />
                <InfoItem label="英文姓名" :value="getFullEnglishName()" />
                <InfoItem v-if="realNameData.owner.dom_org_m" label="中文单位" :value="realNameData.owner.dom_org_m" />
                <InfoItem v-if="realNameData.owner.dom_org" label="英文单位" :value="realNameData.owner.dom_org" />
                <InfoItem label="邮箱" :value="realNameData.owner.dom_em" />
              </div>
              <div class="space-y-4">
                <InfoItem label="电话" :value="realNameData.owner.dom_ph" />
                <InfoItem label="传真" :value="realNameData.owner.dom_fax" />
                <InfoItem label="国家/地区" :value="realNameData.owner.dom_co" />
                <InfoItem label="省份" :value="realNameData.owner.dom_st_m || realNameData.owner.dom_st" />
                <InfoItem label="城市" :value="realNameData.owner.dom_ct_m || realNameData.owner.dom_ct" />
              </div>
            </div>
            <div class="mt-4">
              <InfoItem label="地址" :value="realNameData.owner.dom_adr_m || realNameData.owner.dom_adr1" />
              <InfoItem label="邮编" :value="realNameData.owner.dom_pc" />
            </div>
          </div>
        </div>

        <!-- 联系人信息 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- 管理联系人 -->
          <ContactCard
            title="管理联系人"
            icon="UserCircleIcon"
            :contact="realNameData.admin"
            type="admin"
          />
          
          <!-- 技术联系人 -->
          <ContactCard
            title="技术联系人"
            icon="SettingsIcon"
            :contact="realNameData.tech"
            type="tech"
          />
          
          <!-- 缴费联系人 -->
          <ContactCard
            title="缴费联系人"
            icon="CreditCardIcon"
            :contact="realNameData.billing"
            type="bill"
          />
        </div>

        <!-- DNS服务器 -->
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
          <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <GlobeIcon class="h-5 w-5 mr-2 text-blue-600" />
              DNS服务器
            </h3>
          </div>
          <div class="p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              <div v-for="(dns, index) in getDnsServers()" :key="index" class="bg-gray-50 rounded-lg p-4">
                <div class="text-sm font-medium text-gray-600 mb-1">DNS{{ index + 1 }}</div>
                <div class="font-mono text-sm text-gray-900">{{ dns || '未设置' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Dialog>
</template>

<script>
import { Dialog, createResource } from 'jingrow-ui';
import { toast } from 'vue-sonner';
import CheckCircleIcon from '~icons/lucide/check-circle';
import AlertTriangleIcon from '~icons/lucide/alert-triangle';
import FileTextIcon from '~icons/lucide/file-text';
import UserIcon from '~icons/lucide/user';
import UserCircleIcon from '~icons/lucide/user-circle';
import SettingsIcon from '~icons/lucide/settings';
import CreditCardIcon from '~icons/lucide/credit-card';
import GlobeIcon from '~icons/lucide/globe';

// 信息项组件
const InfoItem = {
  props: ['label', 'value'],
  template: `
    <div>
      <dt class="text-sm font-medium text-gray-600">{{ label }}</dt>
      <dd class="mt-1 text-sm text-gray-900">{{ value || '未填写' }}</dd>
    </div>
  `
};

// 联系人卡片组件
const ContactCard = {
  props: ['title', 'icon', 'contact', 'type'],
  components: { UserCircleIcon, SettingsIcon, CreditCardIcon },
  template: `
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
      <div class="px-4 py-3 border-b border-gray-100">
        <h4 class="text-sm font-medium text-gray-900 flex items-center">
          <component :is="icon" class="h-4 w-4 mr-2 text-blue-600" />
          {{ title }}
        </h4>
      </div>
      <div class="p-4 space-y-3">
        <div>
          <div class="text-xs font-medium text-gray-600">姓名</div>
          <div class="text-sm text-gray-900">{{ getContactName() }}</div>
        </div>
        <div>
          <div class="text-xs font-medium text-gray-600">邮箱</div>
          <div class="text-sm text-gray-900">{{ contact[type + '_em'] || '未填写' }}</div>
        </div>
        <div>
          <div class="text-xs font-medium text-gray-600">电话</div>
          <div class="text-sm text-gray-900">{{ contact[type + '_ph'] || '未填写' }}</div>
        </div>
      </div>
    </div>
  `,
  methods: {
    getContactName() {
      const chineseName = (this.contact[this.type + '_ln_m'] || '') + (this.contact[this.type + '_fn_m'] || '');
      const englishName = (this.contact[this.type + '_ln'] || '') + ' ' + (this.contact[this.type + '_fn'] || '');
      return chineseName || englishName.trim() || '未填写';
    }
  }
};

export default {
  name: 'JsiteDomainRealNameInfoDialog',
  components: {
    Dialog,
    CheckCircleIcon,
    AlertTriangleIcon,
    FileTextIcon,
    UserIcon,
    UserCircleIcon,
    SettingsIcon,
    CreditCardIcon,
    GlobeIcon,
    InfoItem,
    ContactCard
  },
  props: {
    domain: String,
    domainDoc: Object,
    realNameInfo: Object
  },
  data() {
    return {
      loading: false,
      error: null,
      realNameData: null
    };
  },
  methods: {
    async loadRealNameInfo() {
      if (this.realNameInfo) {
        this.realNameData = this.realNameInfo;
        return;
      }

      if (!this.domainDoc?.domain) {
        this.error = '域名信息不存在';
        return;
      }

      this.loading = true;
      this.error = null;

      try {
        const getRealNameRequest = createResource({
          url: 'jcloud.api.domain_west.get_west_domain_real_info',
          params: {
            domain: this.domainDoc.domain
          },
          onSuccess: (response) => {
            if (response && response.status === "success" && response.data) {
              this.realNameData = response.data;
            } else {
              this.error = '获取实名认证信息失败';
            }
            this.loading = false;
          },
          onError: (error) => {
            console.error('获取域名实名信息失败:', error);
            this.error = '获取实名认证信息失败';
            this.loading = false;
          }
        });
        getRealNameRequest.submit();
      } catch (error) {
        console.error('获取域名实名信息失败:', error);
        this.error = '获取实名认证信息失败';
        this.loading = false;
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return '未知';
      try {
        const date = new Date(dateStr);
        return date.toLocaleDateString('zh-CN');
      } catch {
        return dateStr;
      }
    },
    getStatusText(status) {
      const statusMap = {
        1: '已通过',
        2: '审核中',
        3: '审核失败',
        4: '待上传'
      };
      return statusMap[status] || status || '未知';
    },
    getRegTypeText(regType) {
      const typeMap = {
        'I': '个人',
        'E': '企业'
      };
      return typeMap[regType] || regType || '未知';
    },
    getFullChineseName() {
      if (!this.realNameData?.owner) return '未填写';
      const lastName = this.realNameData.owner.dom_ln_m || '';
      const firstName = this.realNameData.owner.dom_fn_m || '';
      return lastName + firstName || '未填写';
    },
    getFullEnglishName() {
      if (!this.realNameData?.owner) return '未填写';
      const lastName = this.realNameData.owner.dom_ln || '';
      const firstName = this.realNameData.owner.dom_fn || '';
      return (lastName + ' ' + firstName).trim() || '未填写';
    },
    getDnsServers() {
      if (!this.realNameData?.dns_hosts) return [];
      return [
        this.realNameData.dns_hosts.dns_host1,
        this.realNameData.dns_hosts.dns_host2,
        this.realNameData.dns_hosts.dns_host3,
        this.realNameData.dns_hosts.dns_host4,
        this.realNameData.dns_hosts.dns_host5,
        this.realNameData.dns_hosts.dns_host6
      ].filter(Boolean);
    }
  },
  mounted() {
    this.loadRealNameInfo();
  }
};
</script> 