<template>
  <div class="chat-record" @click="onClickFollowRecord">
    <div class="chat-record-header">
      <CardTitle :data="data" />
      <span class="sum" v-if="chat_progress.total_count"
        >并附带{{ chat_progress.total_count }}条聊天记录</span
      >
    </div>
    <p class="chat_remark" v-if="data.material_name" v-html="data.material_name"></p>
    <div class="content">
      <div class="record">
        <p class="record-item" v-for="(item, index) in chat_progress.chats" :key="index">
          <span>{{ item.nick_name }}：</span>
          <span>{{ item.content }}</span>
        </p>
      </div>
    </div>
    <div class="pic-list-wrap" v-if="thumbnail_files.length > 0">
      <PicList :data="thumbnail_files" />
    </div>
    <CardFooter :data="data">
      <template slot="footerRight">
        <CommentNumber :data="reply_count" />
      </template>
    </CardFooter>
  </div>
</template>

<script>
import PicList from "@RecordCard/components/Common/PicList/index.vue";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
import CommentNumber from "@RecordCard/components/Common/CommentNumber/index.vue";
export default {
  name: "ChatRecord",
  components: { PicList, CommentNumber, CardFooter, CardTitle },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chat_progress: {},
      thumbnail_files: [],
      reply_count: 0,
    };
  },
  methods: {
    onClickFollowRecord() {
      this.$emit("onClickFollowRecord", {
        target: "CARD",
        data: this.data,
      });
    },
  },
  watch: {
    data: {
      handler(val) {
        const { materials = [] } = val;
        if (materials.length === 1) {
          this.chat_progress = materials[0].chat_progress;
          this.thumbnail_files = materials[0].thumbnail_files || [];
          const { reply_count = 0 } = materials[0];
          this.reply_count = reply_count;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-record {
  width: 100%;
  cursor: pointer;
  &-header {
    color: #000;
    font-size: $title-font-size;
    font-weight: 500;
    @extend %flex-middle;
    @include textEllipsis(1);
    display: flex;
    .sum {
      color: #444444;
      font-size: j(14);
      margin-left: j(10);
      flex-shrink: 0;
    }
  }
  .chat_remark {
    color: #454545;
    margin-bottom: j(8);
    @include textEllipsis(1);
  }
  .content {
    @include cardContent();
    @extend %flex-between;
    .record {
      flex: 1;
      &-item {
        word-break: break-all;
      }
    }
    .arrow {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 50%;
      border: 1px solid #eeeeee;
    }
  }
  .pic-list-wrap {
    padding: j(10) 0;
    @include halfBorder("bottom", #dcdcdc);
  }
}
</style>
