<template>
  <div class="clue-transfer-client">
    <CardTitle :data="data" />
    <div>
      <User :data="user_info" />
    </div>
    <CardFooter :data="data" />
  </div>
</template>

<script>
import User from "@RecordCard/components/Common/User/index.vue";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
import useGetExternalUserUrl from "@RecordCard/hooks/useGetExternalUserUrl";
export default {
  name: "ClueTransferClient",
  components: { CardFooter, CardTitle, User },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    user_info() {
      const { external_user_info = {} } = this.data;
      const { external_userid = "" } = external_user_info;
      return {
        ...this.data?.external_user_info,
        href: useGetExternalUserUrl(external_userid),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.clue-transfer-client {
  width: 100%;
}
</style>
