ShowEasyFrontEnd/FrontEnd/components/user/contactInfoContent.vue

<template>
  <!-- close-contact-info -->
  
  <div>
    <div class="xl:tw-grid tw-gap-[15px] tw-grid-cols-[100px_100px_160px_200px_142px] tw-hidden tw-mb-[30px]">
      <div class="tw-text-neutrals-500 tw-body-4">{{ $t("First Name") }}</div>
      <div class="tw-text-neutrals-500 tw-body-4">{{ $t("Last Name") }}</div>
      <div class="tw-text-neutrals-500 tw-body-4">{{ $t("Phone") }}</div>
      <div class="tw-text-neutrals-500 tw-body-4">{{ $t("Email") }}</div>
    </div>
    <div v-for="(item, index) in contacts" :key="index"
      class="tw-flex tw-place-content-between tw-border-solid tw-border-neutral-200 tw-rounded-[10px] xl:tw-border-none xl:tw-px-0 tw-bg-white tw-py-[10px] tw-px-5 tw-mb-5 tw-mt-[30px] last:tw-mb-0">
      <!-- 手機板 -->
      <div class="xl:tw-hidden">
        <div class="tw-pb-[6px] tw-text-[14px] tw-font-medium tw-text-base-primary">
          {{ item.FirstName + " " + item.LastName }}
        </div>
        <div class="tw-pb-[6px] tw-text-[12px]">
          {{ "+" + item.PhoneCountryCode + item.PhoneNo }}
        </div>
        <div class="tw-text-[12px]">{{ item.Email }}</div>
      </div>
      <div class="tw-grid tw-grid-cols-1 tw-gap-[20px] md:tw-grid-cols-2 md:tw-gap-[15px] xl:tw-hidden">
        <button @click="editItem(index)" type="button">
          <img :src="editImg" alt="" class="tw-h-[28px] tw-w-[28px]" />
        </button>
        <button @click="deleteItem(index)" type="button">
          <img :src="deleteImg" alt="" class="tw-h-[28px] tw-w-[28px]" />
        </button>
      </div>
      <!-- 電腦版 -->
      <div class="tw-hidden xl:tw-block">
        <div class="xl:tw-flex xl:tw-flex-row">
          <div class="xl:tw-grid tw-gap-[15px] tw-grid-cols-[100px_100px_160px_200px_142px] tw-mr-[10px]">
            <div>{{ item.FirstName }}</div>
            <div>{{ item.LastName }}</div>
            <div>{{ item.PhoneNo }}</div>
            <div>{{ item.Email }}</div>
            <!-- <div>{{ item.passport_number }}</div> -->
          </div>
          <div class="tw-flex tw-flex-row">
            <button @click="editItem(index)" type="button">
              <img :src="editImg" alt="" class="tw-h-[28px] tw-w-[28px] tw-mr-[15px]" />
            </button>
            <button @click="deleteItem(index)" type="button">
              <img :src="deleteImg" alt="" class="tw-h-[28px] tw-w-[28px]" />
            </button>
          </div>
        </div>
      </div>
    </div>
    <EditContactModal :contact="item" @update="$emit('refetch-contact-info')"></EditContactModal>
    <DeleteContactModal :contactId="itemId" :contactName="itemName" @update="$emit('refetch-contact-info')">
    </DeleteContactModal>
  </div>
</template>
<script>
import EditContactModal from "../newComponent/modal/UserEditContactModal.vue";
import DeleteContactModal from "../newComponent/modal/UserDeleteContactModal.vue";
export default {
  name: "ContactInfoContent",
  components: {
    EditContactModal,
    DeleteContactModal,
  },
  props: {
    contacts: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      editImg: require("~/assets/svg/edit.svg"),
      deleteImg: require("~/assets/svg/delete.svg"),
      item: {},
      itemId: "",
      itemName: "",
    };
  },
  methods: {
    editItem(index) {
      this.item = JSON.parse(JSON.stringify(this.contacts[index]));
      this.$modal.show("edit-contact-modal");
    },
    deleteItem(index) {
      this.itemId = this.contacts[index].ContactID;
      this.itemName =
        this.contacts[index].FirstName + " " + this.contacts[index].LastName;
      this.$modal.show("delete-contact-modal");
    },
  },
};
</script>
<style scoped lang="scss">

</style>