<template>
  <div class="app-container">
    <div>
      <div v-for="item in voteList" :key="item.id" class="voteitems">
        <div class="left">
          <div class="vote_title">{{ item.voteTitle }}</div>
          <div class="vote_time">{{ item.sTime + ' - ' + item.eTime }}</div>
        </div>
        <div class="right">
          <el-button
            v-if="(new Date(item.sTime) < (new Date())) && (new Date(item.eTime) > (new Date()))"
            size="mini"
            type="text"
            icon="el-icon-thumb"
            @click="goVotepage(item)"
          >去评分</el-button>
        </div>
      </div>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listByConditons } from "@/api/kaohe/vote"

export default {
  name: "Index",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 总条数
      total: 0,
      voteList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      listByConditons(this.queryParams).then(response => {
        this.voteList = response.rows;
        this.total = response.total
      })
    },
    goVotepage(row){
      this.$router.push({ path: '/votepage', query: { id: row.id }});
    },
  }
}
</script>

<style scoped lang="scss">
.voteitems{
  display: flex;
  justify-content: space-between;
  width: 800px;
  font-size: 14px;
  color: #333;
  border: 1px solid #eeeeee;
  margin-top: 10px;
  height: 60px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;

  .left{
    width: 700px;

    .vote_title{
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden;    /* 隐藏溢出的文本 */
      text-overflow: ellipsis; /* 显示省略号 */
    }

    .vote_time{
      color: #af5e5e;
    }
  }

  .right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;
  }
}

.pagination-container{
  margin-top: 30px;
  justify-content: flex-start;
}
</style>

