<template>
  <div class="delete-client">
    <p class="desc">{{ !data.initiative_flag ? "删除了" : "被" }}</p>
    <div v-if="show_user" class="user" @click.stop="onClickUser">
      <User :data="show_user" :href="show_user.url" target="_blank" />
    </div>
    <p class="desc" v-if="data.initiative_flag">删除</p>
  </div>
</template>

<script>
import User from "@RecordCard/components/Common/User/index.vue";
import useGetStaffHomePageUrl from "@RecordCard/hooks/useGetStaffHomePageUrl.js";
export default {
  name: "DeleteClient",
  components: { User },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    show_user() {
      const { user_info = {} } = this.data;
      const staffUrl = useGetStaffHomePageUrl(user_info.id);
      return { ...user_info, url: staffUrl };
    },
  },
  methods: {
    onClickUser() {
      this.$emit("onClickUser", this.data.show_user);
    },
  },
};
</script>
<style lang="scss" scoped>
.delete-client {
  padding: j(18px) j(2px);
  box-sizing: border-box;
  @extend %flex-middle;
  .desc {
    flex-shrink: 0;
    color: var(--wl-error-color, #ff4545);
    font-size: j(15px);
    font-weight: 500;
  }
  .user {
    margin: 0 j(8px);
  }
}
</style>
