<template>
    <div class="communication-explore">
        <div class="explore-header">
<!--            <div class="explore-selector">-->
<!--                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选-->
<!--                </el-checkbox>-->
<!--                <el-checkbox-group v-model="checkedTypes" @change="handleCheckedTypesChange">-->
<!--                    <el-checkbox v-for="type in types" :label="type" :key="type">{{ type }}</el-checkbox>-->
<!--                </el-checkbox-group>-->
<!--            </div>-->

          <div class="explore-sorter">
            <el-select class="sort-select" style="width: 150px;" placeholder="排序方式"
                       v-model="sort"
                       @change="sortChange"
            >
              <template #prefix>
                  <span style="padding-left: 5px;">
                    <i class="el-icon-sort"></i>
                  </span>
              </template>
              <el-option label="发布时间升序" value="PUBLISH_TIME_ASC"></el-option>
              <el-option label="发布时间降序" value="PUBLISH_TIME_DESC"></el-option>
<!--              <el-option label="截止时间升序" value="deadlineAsc"></el-option>-->
<!--              <el-option label="截止时间降序" value="deadlineDesc"></el-option>-->
            </el-select>
          </div>

<!--          <div class="explore-search">-->
<!--                <el-input placeholder="请输入搜索内容" v-model="content"></el-input>-->
<!--                <el-button type="primary" style="margin-left: 10px">确认</el-button>-->
<!--          </div>-->
        </div>
        <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: "Explore",
  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.getAllCommunications(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>