<template>
  <div class="add-client-to-crop">
    <CardTitle :data="data" @onClickUser="onClickUser" :need_user="true"></CardTitle>
    <a :target="link_target" :href="group_url">
      <div class="content-wrap" @click.stop="onClickContent">
        <div class="avatar">
          <WlPic :src="data.company_list_vo.image_url || en_default_logo" />
        </div>
        <div class="content">
          <p :class="titleClass">{{ data.company_list_vo.company_name }}</p>
          <p class="subtitle">{{ data.company_list_vo.desc }}</p>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
import WlPic from "weiling-mobile-ui/lib/WlPic";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import { en_default_logo } from "@RecordCard/utils/cdn";
import useGetCompanyUrl from "@RecordCard/hooks/useGetCompanyUrl.js";
export default {
  name: "AddClientToCompany",
  components: { WlPic, CardTitle },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      en_default_logo,
    };
  },
  computed: {
    titleClass() {
      const { subtitle = "" } = this.data;
      return subtitle ? "title-line" : "title";
    },
    group_url() {
      const { company_list_vo = {} } = this.data;
      const { company_id = "" } = company_list_vo;
      const hash = window.location.hash;
      return company_id
        ? useGetCompanyUrl(company_id, hash.includes("group") ? "group" : "client")
        : "javascript:void(0)";
    },
    link_target(){
      const { company_list_vo = {} } = this.data;
      const { company_id = "" } = company_list_vo;
      return company_id ? "_blank" : "_self"
    }
  },
  methods: {
    onClickUser() {
      this.$emit("onClickUser", this.data.user_info);
    },
    onClickContent() {
      this.$emit("onClickContent", this.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.add-client-to-crop {
  width: 100%;
  padding-bottom: j(12px);
  .header-text {
    font-size: j(15px);
    color: #000000;
    flex-shrink: 0;
    margin-right: j(5);
    font-weight: 500;
  }
  .content-wrap {
    @extend %flex-middle;
    @include cardContent(true);
    .avatar {
      width: j(38px);
      height: j(38px);
      border-radius: j(8px);
      overflow: hidden;
      flex-shrink: 0;
    }
    .content {
      flex: 1;
      margin-left: j(9px);
      @extend %flex-direction-column;
      .title,
      .title-line {
        font-size: j(14px);
        color: rgba(41, 80, 184, 1);
        @include textEllipsis(1);
      }
      .title-line {
        font-size: j(15px);
      }
      .subtitle {
        margin-top: j(2px);
        font-size: j(12px);
        color: var(--wl-text-color-primary-2, #4c4c4c);
      }
    }
  }
}
</style>
