
<script setup>
import { customInterence, equityContacts } from "@/api/api.js";
import { computed,ref } from "vue";
   
const props = defineProps({
  chartData: {
    type: Object
  },
  companyName: {
    type: String,
    default: "",
  },
})


function load() {
  if (publicHaveMoveCompany.value && !props.chartData.IsEnd) {
    page.value++;
    nexttPage();
  }
}

const page = ref(1)
const pageSize = ref(18)
const publicHaveMoveCompany = ref(true)
const data = ref(props.chartData)
async function nexttPage() {
  const res = await equityContacts.getCygxMutualDetail({
    UserId: props.chartData.UserId,
    Source: 4,
    PageSize: pageSize.value,
    CurrentIndex: page.value,
  });
  if (res.Ret === 200) {
    publicHaveMoveCompany.value = !res.Data.Paging.IsEnd;
    data.value.ListChart = res.Data ? [...data.value.ListChart, ...res.Data.List] : [...data.value.ListChart];
  }
}

function chartDetial(item) {
  window.open(item.HttpUrl, "_blank");
}
</script>

<template>
  <div class="chart-item-wrap">
    <span class="synopsis-btn">{{ companyName ? companyName + "--" : "" }}{{ data.RealName }} -- {{ data.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 data.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>

<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>
