<template>
  <van-contact-card
    v-model="contactVisible"
    :name="contactInfo.name"
    :tel="contactInfo.tel"
    :add-text="contactInfo.addText"
    :address="contactInfo.address"
    @click-avatar="onClickAvatar"
    @click-edit="onClickEdit"
    @click-delete="onClickDelete"
  />
</template>

<script>
import { ContactCard } from 'vant';

export default {
  components: {
    [ContactCard.name]: ContactCard,
  },
  data() {
    return {
      contactVisible: true, // 是否显示联系人卡片
      contactInfo: {
        name: 'John Doe',
        tel: '13800138000',
        addText: '公司地址',
        address: '广东省 深圳市 南山区 南山大道 1 号',
      },
    };
  },
  methods: {
    onClickAvatar() {
      // 处理点击头像的逻辑
      console.log('点击了头像');
    },
    onClickEdit() {
      // 处理点击编辑按钮的逻辑
      console.log('点击了编辑按钮');
    },
    onClickDelete() {
      // 处理点击删除按钮的逻辑
      console.log('点击了删除按钮');
    },
  },
};
</script>