<template>
  <div class="main">
   <div class="box" >
      <van-list  v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" > 
    <div class="row" v-for="(item, index) in list" :key="item.project_id" @click="goCase(item.project_id,item.project_image,item.case_count)">
      <div class="cell">
        <div class="mark">
          <img src="../assets/newicon.png" alt="" v-if="item.is_recently_update==1">
          <img src="../assets/fuli.png" alt="" v-if="item.is_welfare==1">
        </div>
        <div class="casenum">
          病例数：{{ item.case_count }}
        </div>
        <van-image lazy-load radius="8" width="100%" height="194" fit="cover" :src="item.project_image" />
      </div>
    </div>
    </van-list>
    </div>
    <div class="nodata" v-if="list.length == 0">
      暂无数据！
    </div>
  </div>
</template>

<script setup>
import api from '../api/user.js';
import { ref } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { WXSHARE } from "../utils/wxshare-1.6.0";
import host from "../utils/host"
const router = useRouter();
const page = ref(0);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const goCase = (id,img,num) => {
  router.push({ 
    path: 'caseList', 
    query: { project_id: id} 
  })
}
const getList = async () => {
    const {data,code}=await api.getProjectList({
      page:page.value,
      page_size:10,
    })
     loading.value = false;
    if (code == 200) {
      console.log(data);
     list.value = list.value.concat(data.data);
    if (data.data.length <10) {
      finished.value = true;
      
    }
  }


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


}; 
onMounted(() => {
  let link=host+'/web/home';
  WXSHARE('肝胆相照互动病例等你来挑战，福利享不停',"肝胆相照-肝胆病在线公共服务平台",link,'');
})
</script>

<style lang='scss' scoped>
.main {
  .row {
    margin: 0 15px;

    .cell {
      margin-top: 12px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;

      .casenum {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 3;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }

      .mark {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 3;
        display: flex;

        img {
          height: 21px;
        }
      }
    }
  }
}
</style>
