<template>
  <div class="clue-transfer">
    <div class="card-header">
      <p class="card-header-from">由</p>
      <User :data="origin_owner_info" size="normal" />
      <p class="card-header-title">转移给了</p>
      <User :data="owner_info" size="normal" />
    </div>
    <CardFooter :data="data" :showUser="false">
      <p slot="desc">
        <span>操作</span>
        <StaffName :openid="data.user_info.userid_third" :name="data.user_info.nick_name" type="userName"/>
      </p>
    </CardFooter>
  </div>
</template>

<script>
import useGetEmployeeUrl from "@RecordCard/hooks/useGetEmployeeUrl";
import User from "@RecordCard/components/Common/User/index.vue";
import StaffName from "@RecordCard/components/Common/StaffName/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
export default {
  name: "ClueTransfer",
  components: { User, CardFooter, StaffName },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      owner_info: {
        head_img_url: "",
        nick_name: "",
      },
      origin_owner_info: {
        head_img_url: "",
        nick_name: "",
      },
    };
  },
  watch: {
    data: {
      handler(val) {
        const { owner = {}, origin_owner = {} } = 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.origin_owner_info = {
          nick_name: origin_owner?.nick_name,
          userid_third: origin_owner?.userid_third,
          head_img_url: origin_owner?.head_img_url,
          href: useGetEmployeeUrl(origin_owner?.user_id),
        };
      },
      immediate: true,
    },
  },
};
</script>

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