<template>
  <div class="main">
    <div class="banner">
      <van-image width="100%" height="211" fit="cover" :src="img_url" />
      <div class="casenum" v-if="case_num>0">
          病例数：{{ case_num }}
        </div>
    </div>
    <div class="content">
      <van-tabs color="#0984FD" title-inactive-color="#666666" v-model:active="activeName" sticky offset-top="0">
        <van-tab title="未参与" :name="2">
          <div class="tabcon">
              <c-list :is_take_part="2" ></c-list>
          </div>
        </van-tab>
        <van-tab title="已参与" :name="1">
          <c-list :is_take_part="1" ></c-list>
        </van-tab>
        <van-tab title="全部" :name="0">
          <c-list :is_take_part="0" ></c-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref} from "vue";
import { useRoute } from 'vue-router';
import { WXSHARE } from "../utils/wxshare-1.6.0";
import host from "../utils/host"
import api from '../api/user.js';
  const route = useRoute();
//0:全部 1:已参与 2:未参与
 const activeName = ref(2);
 const img_url=ref('')
 const case_num=ref('');
 const getDetail=async()=>{
  const {code,data}=await api.getProjectDetail(route.query.project_id);
  if(code==200){
    img_url.value=data.project_image;
    case_num.value=data.case_count;
    let link=host+'/web/caseList?project_id='+route.query.project_id;
    WXSHARE(data.project_name,"肝胆相照-肝胆病在线公共服务平台",link,'');
  }
 }
 onMounted(() => {
  getDetail();
})
</script>

<style lang='scss' scoped>
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .banner{
    position: relative;
    .casenum {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 3;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }
  }

  .row {
    height: 2000px;
    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>
