<template>
  <van-pull-refresh v-model="pull_loading" @refresh="onRefresh" success-text="刷新成功">
    <van-list v-model:loading="loading" :finished="finished" finished-text="" style="min-height: 350px;" ref="clist"
      @load="onLoad" class="msglist">
      <div class="bar"></div>
      <div class="cell" v-for="(item, index) in list" :key="item.case_id" @click="goDetail(item.case_id, item.is_join)">
        <div class="namebox">
          <img src="../assets/newicon.png" alt="" v-if="item.is_new == 1">
          <img src="../assets/fuli.png" alt="" v-if="item.is_welfare == 1">
          <div class="name">{{ item.case_name }}</div>
        </div>
        <div class="btnbox">
          <div class="writer">{{ item.case_author }}</div>
          <div class="btn" :class="{ finsihed: item.is_join == 1 }">{{ item.is_join == 1 ? '已参与' : '立即参与' }}</div>
        </div>
      </div>
      <div class="nodata" v-show="list.length == 0">
        <div class="empty">
          <div class="emptydesc">
            "暂无相关数据~"
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref } from 'vue';
import api from '../api/user.js';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const pull_loading = ref(false);
const page = ref(0);
const project_id = ref(route.query.project_id);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const props = defineProps({
  is_take_part: {
    type: Number,
    default: 0
  },
});

const getList = async () => {
  let { code, data } = await api.getCaseList({
    page: page.value,
    project_id: project_id.value,
    page_size: 10,
    is_take_part: props.is_take_part
  })
  loading.value = false;
  if (code == 200) {
    pull_loading.value = false;
    list.value = list.value.concat(data.data);
    if (data.data.length <10) {
      finished.value = true;
      
    }
  }

}
const onRefresh = () => {
  finished.value = false;
  loading.value = true;
  list.value = [];
  page.value = 1;
  getList()
}
const goDetail = (id, join) => {
  if (join == 1) {
    router.push({
      path: '/result',
      query: {
        case_id: id,
        project_id: project_id.value
      }
    })
  } else {
    router.push({
      path: '/caseIntro',
      query: {
        case_id: id
      }
    })
  }

}
const onLoad = () => {
 if(!finished.value) {
   page.value++;
   getList();
 }
}; 
</script>

<style lang='scss' scoped>
.bar {
  width: 100%;
  height: 10px;
  background: #F5F5F5;
}

.cell {
  margin: 0 15px;
  border-bottom: 1px solid #E6E6E6;

  .btnbox {
    margin-top: 18px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .writer {
      font-size: 15px;
      color: #666666;

    }

    .btn {
      display: flex;
      align-items: center;
      height: 27px;
      background: #43C9C3;
      border-radius: 14px;
      padding: 0 6px;
      font-size: 12px;
      color: #FFFFFF;
    }

    .finsihed {
      background: #B5B5B5;
    }

  }

  .namebox {
    margin-top: 15px;
    vertical-align: baseline;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    .name {
      font-weight: 500;
      font-size: 16px;
      color: #000000;
      display: inline;
    }

    img {
      display: inline-block;
      position: relative;
      top: 4px;
      line-height: 24px;
      height: 20px;
    }
  }
}
</style>