<template>
  <div class="card-footer" :class="{ 'only-card-footer-right': !inner_footer_left_show }">
    <div class="card-footer-left" v-if="inner_footer_left_show">
      <div class="user-wrap" v-if="showUser">
        <User :data="user_info" size="small" />
      </div>
      <span class="desc" v-if="data.desc">
        {{ data.desc }}
      </span>
      <slot name="desc" />
      <span class="qrcode-name" v-if="data.qrcode_name">{{
          data.qrcode_name
      }}</span>
    </div>
    <div :class="{ 'card-footer-right': card_data.reply_count>0 }" v-if="inner_footer_right_show">
      <slot name="footerRight" />
    </div>
  </div>
</template>

<script>
import useGetEmployeeUrl from "@RecordCard/hooks/useGetEmployeeUrl";
import User from "@RecordCard/components/Common/User/index.vue";
export default {
  name: "CardFooter",
  inject: {
    card_data: {
      default: () => ({})
    }
  },
  components: { User },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showUser: {
      type: Boolean,
      default: true,
    },
    inner_footer_left_show: {
      type: Boolean,
      default: true,
    },
    inner_footer_right_show: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      user_info: {
        head_img_url: "",
        nick_name: "",
        desc: "",
      },
    };
  },
  watch: {
    data: {
      handler(val) {
        const { user_info = {}, desc = "", state = "" } = val;
        const { head_img_url = "", nick_name = "", userid_third = "", user_id = "" } = user_info;
        this.user_info = {
          desc,
          userid_third,
          href: useGetEmployeeUrl(user_id),
          nick_name,
          qrcode_name: state,
          head_img_url: head_img_url,
        };
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.card-footer {
  // min-height: j(10);
  font-size: j(12);
  @extend %flex-middle-center;

  &-left {
    flex: 1;
    padding: j(8) 0;
    @extend %flex-middle;

    .user-wrap {
      margin-right: j(5);
    }

    .desc {
      flex-shrink: 0;
      @include textEllipsis(1);
    }

    .share-way {
      min-width: j(40);
      @include textEllipsis(1);
    }

    .qrcode-name {
      padding-left: j(5);
      color: var(--wl-primary-color,  #1c9fff);
      @include textEllipsis(1);
    }
  }

  &-right {
    padding: j(8) 0;
  }
}

.only-card-footer-right {
  display: flex;
  justify-content: flex-end;
}
</style>
