<template>
  <div class="clue-distribution">
    <div class="card-header">
      <div class="user-wrap">
        <User :data="user_info" size="normal" />
      </div>
      <p class="card-header-title">分配给了</p>
      <div class="user-wrap">
        <User :data="owner_info" size="normal" />
      </div>
    </div>
    <CardFooter :data="data" :showUser="false" v-if="footer_desc" />
  </div>
</template>

<script>
import useGetEmployeeUrl from "@RecordCard/hooks/useGetEmployeeUrl";
import User from "@RecordCard/components/Common/User/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
export default {
  name: "ClueDistribution",
  components: { User, CardFooter },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      owner_info: {
        head_img_url: "",
        nick_name: "",
      },
      user_info: {
        head_img_url: "",
        nick_name: "",
      },
      footer_desc: "",
    };
  },
  watch: {
    data: {
      handler(val) {
        const { owner = {}, user_info = {}, desc = "" } = val;
        this.owner_info = {
          nick_name: owner?.nick_name,
          userid_third: owner?.userid_third,
          head_img_url: owner?.head_img_url,
          href: useGetEmployeeUrl(owner?.user_id),
        };
        this.user_info = {
          nick_name: user_info?.nick_name,
          userid_third: user_info?.userid_third,
          head_img_url: user_info?.head_img_url,
          href: useGetEmployeeUrl(user_info?.user_id),
        };
        this.footer_desc = desc;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.clue-distribution {
  width: 100%;
  .card-header {
    color: #000;
    font-size: $title-font-size;
    font-weight: 500;
    padding: j(7) 0;
    overflow: hidden;
    @extend %flex-middle;
    &-title {
      flex-shrink: 0;
      margin: 0 j(5);
    }
  }
}
</style>
