<template>
  <div class="container-collection">
    <mDialog :show.sync="collectionDlgShow" @beforeClose="closeDlg" :width="'50%'">
      <div>
        <div v-if="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="collectionType === '关注' ? '关注时间' : '收藏时间'"></el-table-column>
        </el-table>
      </div>
      <div slot="title" style="display: flex; align-items: center">
        <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="fontsize: 16px"> {{ collectionType === "关注" ? "关注详情" : "收藏详情" }}</span>
      </div>
      <div slot="footer" style="margin-top:40px">
        <el-button type="primary" @click="closeDlg">关闭</el-button>
      </div>
    </mDialog>
  </div>
</template>

<script>
import mDialog from "@/components/mDialog.vue";
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {
    mDialog,
  },
  props: {
    collectionDlgShow: {
      type: Boolean,
      default: false,
    },
    collectionId: {
      type: String,
      default: "",
    },
    collectionType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dataList: [],
      fllowNum: "",
      nickName: "",
    };
  },
  computed: {},
  watch: {
    collectionDlgShow: {
      handler(newValue) {
        if (newValue) {
          this.getArticle();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    closeDlg() {
      this.$parent.collectionDlgShow = false;
    },
    async getArticle() {
      const res = this.collectionType == "关注" ? await raiInterface.departmentFollowList({ DepartmentId: this.collectionId }) : await raiInterface.articleCollection({ ArticleId: this.collectionId });
      if (res.Ret === 200) {
        if (this.collectionType == "关注") {
          this.dataList = res.Data.List || [];
          this.fllowNum = res.Data.FllowNum;
          this.nickName = res.Data.NickName;
        } else {
          this.dataList = res.Data || [];
        }
      }
    },
  },
};
</script>
<style scoped lang="less"></style>
