<template>
  <div class="chart-item-wrap">
    <span class="synopsis-btn">{{ companyName ? companyName + "--" : "" }}{{ chartData.RealName }} -- {{ chartData.Mobile }}</span>
    <div style="margin-top: 20px" class="chart-list" v-infinite-scroll="load" :infinite-scroll-distance="0">
      <div class="chart-item" v-for="key in chartData.ListChart" :key="key.ChartId" @click="chartDetial(key)">
        <img class="item-img" :src="key.BodyHtml" />
        <p class="text_twoLine title-chart">{{ key.Title }}</p>
        <div class="chart-tag">
          <template v-if="key.CtagNamePc">
            <span class="tag-item" v-for="val in key.CtagNamePc.split(',')" :key="val">{{ val }}</span>
          </template>
        </div>
        <p class="tiem">收藏时间:{{ key.CreateDate }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { customInterence, equityContacts } from "@/api/api.js";
export default {
  props: {
    chartData: {},
    companyName: {
      type: "string",
      default: "",
    },
    activeTypeName: {
      type: Number,
    },
  },
  data() {
    return {
      page: 1,
      pageSize: 18,
      publicHaveMoveCompany: true,
    };
  },
  methods: {
    load() {
      if (this.publicHaveMoveCompany && !this.chartData.IsEnd) {
        this.page++;
        this.nexttPage();
      }
    },
    async nexttPage() {
      const res = await equityContacts.getCygxMutualDetail({
        UserId: this.chartData.UserId,
        Source: 4,
        PageSize: this.pageSize,
        CurrentIndex: this.page,
        ClassType: this.activeTypeName,
      });
      if (res.Ret === 200) {
        this.publicHaveMoveCompany = !res.Data.Paging.IsEnd;
        this.chartData.ListChart = res.Data ? [...this.chartData.ListChart, ...res.Data.List] : [...this.chartData.ListChart];
      }
    },
    chartDetial(item) {
      window.open(item.HttpUrl, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-item-wrap {
  @import "./details.scss";
  .synopsis-btn {
    margin-top: 20px;
    display: inline-block;
    height: 32px;
    padding: 0 20px;
    background: #eaf2ff;
    border-radius: 2px;
    border: 1px solid #3385ff;
    color: #3385ff;
    line-height: 30px;
  }
  .chart-list {
    height: auto !important;
    max-height: 720px !important;
  }
}
</style>
