<template>
  <div class="communication-explore">
    <div class="explore-main">
      <ExploreItem class="explore-item"
                   v-for="communication in communicationList"
                   :key="communication.id"
                   :communicationVO="communication"
                   @starChange="starChange(communication)"
      />
    </div>
    <div class="pagination">
      <el-pagination
          layout="prev, pager, next"
          :page-size="size"
          :total="total"
          @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ExploreItem from "@/views/CommunicationPage/components/ExploreItem.vue";

export default {
  name: "ManagePage",
  components: {ExploreItem},
  data() {
    return {
      page: 0,
      size: 5,
      total: 0,
      // explore-selector
      checkAll: true,
      checkedTypes: ["难题", "活动", "其他"],
      types: ["难题", "活动", "其他"],
      isIndeterminate: false,
      // explore-search
      content: "",
      sort: "PUBLISH_TIME_ASC",
      communicationList: [],
    };
  },
  computed: {
    userId() {
      return Number(this.$store.state.user.id);
    },
  },
  methods: {
    fetchData(){
      const payload = {
        userId: this.userId,
        page: this.page,
        size: this.size,
        sort: this.sort
      };
      this.$apis.getUserPublishCommunication(payload).then(res=>{
        this.communicationList = res.data.data.content;
        this.total = res.data.data.totalElements;
      });
    },
    handleCheckAllChange(val) {
      this.checkedTypes = val ? this.types : [];
      this.isIndeterminate = false;
    },
    handleCheckedTypesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.types.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.types.length;
    },
    pageChange(currentPage){
      this.page = currentPage - 1;
      this.fetchData();
    },
    sortChange(){
      this.fetchData();
    },
    starChange(communication){
      communication.starred = !communication.starred;
    }
  },
  async mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
.communication-explore {
  flex: 1;
  padding: 10px;
}

.explore-header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

.explore-sorter{
  /*position: absolute;*/
  left: 250px;
  top: 5px;
}

.explore-search{
  display: flex;
  align-items: center;
}

.explore-main{
  padding: 0 30px;
}

.explore-item{
  margin-bottom: 10px;
}

.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>