<template>
  <div class="card-title" :style="card_title_style">
    <!-- 显示员工头像昵称 -->
    <div class="card-title-user" v-if="need_user" @click.stop="onClickUser">
      <User :data="user_info" size="normal" />
    </div>
    <!-- 显示外部联系人名字 -->
    <template v-if="need_name">
      <span class="user-name" v-if="external_name">{{ external_name }}</span>
    </template>
    <span class="card-title-text" v-html="card_title"></span>
    <slot name="card-title-more" />
  </div>
</template>

<script>
import User from "@RecordCard/components/Common/User/index.vue";
export default {
  name: "CardTitle",
  components: { User },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    need_user: {
      type: Boolean,
      default: false,
    },
    need_ellipsis: {
      type: Boolean,
      default: false,
    },
    ellipsis_line: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      card_title: "",
      user_info: {},
      user_name: "",
      need_name: false,
    };
  },
  computed: {
    card_title_style() {
      if (this.need_ellipsis) {
        return {
          overflow: "hidden",
          "text-overflow": "ellipsis",
          display: "-webkit-box",
          "word-break": "break-all",
          "-webkit-box-orient": "vertical",
          "-webkit-line-clamp": this.ellipsis_line,
        };
      } else {
        return {};
      }
    },
  },
  watch: {
    data: {
      handler(val) {
        const { title, root_user = {}, user_info = {}, external_user_info = {} } = val;
        const { nick_name: external_name } = external_user_info;
        const { nick_name: user_name } = user_info;
        this.card_title = title;
        this.user_info = user_info;
        //如果root_user里的type为4需要显示用户
        if (root_user.type === 4) {
          this.need_name = true;
          this.external_name = external_name;
          this.user_name = user_name;
        }
      },
      immediate: true,
    },
  },
  methods: {
    onClickUser(){
      this.$emit("onClickUser")
    }
  }
};
</script>

<style lang="scss" scoped>
.card-title {
  @extend %card-title;
  @extend %flex-middle;
  &-user {
    padding-right: $left-right-spacing;
  }
  &-text {
    flex-shrink: 0;
    max-width: 100%;
  }
  .give {
    padding-right: j(6);
  }
  .user-name {
    padding-right: j(6);
  }
  .external-name {
    padding-right: j(6);
  }
}
</style>
