<template>
  <div class="short-message">
    <div class="header">
      <p class="head_img_url">
        <WlPic :src="head_img_url" />
      </p>
      <p class="share-name">
        <StaffName :name="user_info.user_name" :openid="user_info.userid_third" type="userName" />
      </p>
      <p class="send-message">{{ card_title }}</p>
    </div>
    <div class="content" v-html="remark" />
  </div>
</template>

<script>
import WlPic from "weiling-mobile-ui/lib/WlPic";
import StaffName from "@RecordCard/components/Common/StaffName/index.vue";
export default {
  name: "ShortMessage",
  components: { WlPic, StaffName },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      remark: "",
      head_img_url: "",
      user_info: {},
      card_title: "",
    };
  },
  watch: {
    data: {
      handler(val) {
        const { user_info = {}, materials = [], title = "" } = val;
        const { head_img_url } = user_info;
        this.remark = materials[0]?.material_name;
        this.head_img_url = head_img_url;
        this.user_info = user_info;
        this.card_title = title;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.short-message {
  width: 100%;
  padding-bottom: j(10);
  .header {
    color: #000;
    font-size: $title-font-size;
    font-weight: 500;
    padding: j(7) 0;
    @extend %flex-middle;
    .head_img_url {
      width: j(18);
      height: j(18);
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .share-name {
      padding: 0 j(6);
      @include textEllipsis(1);
    }
    .send-message {
      flex-shrink: 0;
    }
  }
  .content {
    @include cardContent(false);
  }
}
</style>
