<template>
  <a :class="userClass" :target="target" :href="userUrl">
    <div class="img-wrap">
      <p class="head_img_url" v-if="data.nick_name || (is_trial && data.userid_third)">
        <WlPic :src="data.head_img_url || default_avatar" />
      </p>
      <div :class="`user-icon ${type}`" v-if="type">
        <i :class="`icon-card-${type} iconfont icon`"></i>
      </div>
    </div>
    <p class="user-name" v-if="data.nick_name || (is_trial && data.userid_third)">
      <StaffName :name="data.nick_name" type="userName" :openid="data.userid_third" />
    </p>
  </a>
</template>

<script>
import { isEmpty } from "@RecordCard/utils/utils";
import WlPic from "weiling-mobile-ui/lib/WlPic";
import StaffName from "@RecordCard/components/Common/StaffName/index.vue";
import { default_avatar } from "@RecordCard/utils/cdn";
import useGetStaffHomePageUrl from "@RecordCard/hooks/useGetStaffHomePageUrl";
import useGetExternalUserUrl from "@RecordCard/hooks/useGetExternalUserUrl";
export default {
  name: "User",
  components: { WlPic, StaffName },
  inject: ["is_trial"],
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    size: {
      type: String,
      default: "normal",
    },
    target: {
      type: String,
      default: "_self",
    },
    type: {
      type: String,
      default: "",
    },
    user_type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      default_avatar,
    };
  },
  computed: {
    userUrl() {
      const { id = "", external_userid } = this.data;
      if (this.data.href) {
        return this.data.href;
      }
      if (this.user_type && (id || external_userid)) {
        if (this.user_type === "staff") {
          return useGetStaffHomePageUrl(id);
        } else if (this.user_type === "client") {
          return useGetExternalUserUrl(external_userid);
        }
      }
      return "javascript:void(0)";
    },
    userClass() {
      return {
        "user-wrap": true,
        [this.size]: true,
        cursor: !isEmpty(this.data.href),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.user-wrap {
  @extend %flex-middle;
  .img-wrap {
    position: relative;
    .user-icon {
      position: absolute;
      width: j(17px);
      height: j(17px);
      border-radius: 50%;
      border: j(2px) solid white;
      bottom: 0;
      right: 0;
      transform: translate(3px, 3px);
      color: white;
      @extend %flex-middle-center;
      .icon {
        font-size: j(12px);
        transform: scale(0.7);
      }
    }
    .weixin {
      background-color: var(--wl-success-color-hover, #74d178);
    }
    .wxwork {
      background-color: var(--wl-primary-color-hover, #5bbaff);
    }
  }
  .head_img_url {
    flex-shrink: 0;
    width: j(16);
    height: j(16);
    border-radius: 50%;
    overflow: hidden;
  }
  .user-name {
    font-size: j(12);
    color: $disabled-color;
    font-weight: 500;
    padding-left: 5px;
    color: rgba(41, 80, 184, 1);
    @include textEllipsis(1);
  }
  &.normal {
    .head_img_url {
      width: 22px;
      height: 22px;
    }
    .user-name {
      font-size: j(15);
    }
  }
  &.medium {
    .head_img_url {
      width: 20px;
      height: 20px;
    }
    .user-name {
      font-size: j(13);
    }
  }
  &.small {
    .head_img_url {
      width: 16px;
      height: 16px;
    }
    .user-name {
      font-size: j(12);
    }
  }
  &.cursor {
    cursor: pointer;
    .user-name {
      color: var(--wl-primary-color-dark, #2950b8);
    }
  }
}
</style>
