<script setup>
import { ref, watch } from "vue";

import { raiInterface } from "@/api/api.js";

const props = defineProps({
  collectionDlgShow: {
    type: Boolean,
    default: false,
  },
  collectionId: {
    type: String,
    default: "",
  },
  collectionType: {
    type: String,
    default: "",
  },
});

watch(
  () => props.collectionDlgShow,
  (newValue) => {
    if (newValue) {
      this.getArticle();
    }
  }
);

const emit = defineEmits();
function closeDlg() {
  emit("update:collectionDlgShow", false);
}

const dataList = ref([]);
const fllowNum = ref("");
const nickName = ref("");
async function getArticle() {
  const res = props.collectionType == "关注" ? await raiInterface.departmentFollowList({ DepartmentId: props.collectionId }) : await raiInterface.articleCollection({ ArticleId: props.collectionId });
  if (res.Ret === 200) {
    if (props.collectionType == "关注") {
      dataList.value = res.Data.List || [];
      fllowNum.value = res.Data.FllowNum;
      nickName.value = res.Data.NickName;
    } else {
      dataList.value = res.Data || [];
    }
  }
}
</script>

<template>
  <div class="container-collection">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.collectionDlgShow" customClass="generaiton-applydialog" :before-close="closeDlg">
      <div>
        <div v-if="props.collectionType == '关注' && fllowNum" style="margin-bottom: 20px">
          <span>{{ nickName }}</span>
          <span>&nbsp;&nbsp;{{ fllowNum }}人关注</span>
        </div>
        <el-table :data="dataList" style="width: 100%" border>
          <el-table-column align="center" prop="RealName" label="姓名"></el-table-column>
          <el-table-column align="center" prop="CompanyName" label="公司名称"></el-table-column>
          <el-table-column align="center" prop="SellerName" label="所属销售"></el-table-column>
          <el-table-column min-width="150" align="center" prop="CreateTime" :label="props.collectionType === '关注' ? '关注时间' : '收藏时间'"></el-table-column>
        </el-table>
      </div>
      <template #header>
        <div style="display: flex; align-items: center">
          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="fontsize: 16px"> {{ props.collectionType === "关注" ? "关注详情" : "收藏详情" }}</span>
        </div>
      </template>
      <template #footer>
        <div style="margin-top: 40px">
          <el-button type="primary" @click="closeDlg">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
