Component({
  data: {
    isFeatured: false,
    layoutClass: '',
    visibleSpecialties: [] as string[],
    moreSpecialtiesCount: 0,
    contactItems: [] as string[],
  },
  properties: {
    lawyer: {
      type: Object,
      value: null,
    },
    layout: {
      type: String,
      value: 'compact',
    },
  },
  observers: {
    'lawyer, layout'(lawyer: {
      specialties?: string[];
      phone?: string;
      email?: string;
    } | null, layout: string) {
      const specialties =
        lawyer && Array.isArray(lawyer.specialties) ? lawyer.specialties : [];
      const isFeatured = layout === 'featured';
      const visibleLimit = isFeatured ? 4 : 3;
      const phone = lawyer && typeof lawyer.phone === 'string' ? lawyer.phone.trim() : '';
      const email = lawyer && typeof lawyer.email === 'string' ? lawyer.email.trim() : '';
      const phoneText = phone ? `电话：${phone}` : '';
      const emailText = email ? `邮箱：${email}` : '';
      const contactItems = isFeatured
        ? [phoneText, emailText].filter((item) => Boolean(item)).slice(0, 2)
        : [];
      this.setData({
        isFeatured,
        layoutClass: isFeatured ? 'lawyer-card--featured' : 'lawyer-card--compact',
        visibleSpecialties: specialties.slice(0, visibleLimit),
        moreSpecialtiesCount: Math.max(0, specialties.length - visibleLimit),
        contactItems,
      });
    },
  },
  methods: {
    handleTap() {
      const lawyer = this.properties.lawyer as { id?: string } | null;
      this.triggerEvent('select', {
        id: lawyer && typeof lawyer.id === 'string' ? lawyer.id : '',
      });
    },
  },
});