<template>
    <!-- Header Start -->
    <header class="header">
        <div class="logo-wrap">
            <i class="icon-arrow-left-bold-box icli" @click="$router.push('/user/info')"></i>
            <h1 class="title-color font-md">我的推薦</h1>
        </div>
    </header>
    <!-- Header End -->

    <!-- Main Start -->
    <main class="main-wrap about-us-page mb-xxl">
      <!-- 分潤獎金 Section Start -->
      <section class="bonus-section">
        <div class="css-table">
          <div class="css-tr">
            <div class="css-td">推薦人數</div>
            <div class="css-td">推薦會員</div>
            <div class="css-td">轉換率</div>
          </div>
          <div class="css-tr">
            <div class="css-td">{{shareInfo.share_num}}人</div>
            <div class="css-td">{{shareInfo.l1_num}}人</div>
            <div class="css-td">{{shareInfo.tran_rate}}%</div>
          </div>
        </div>
        <div @click="showRecommand">(查看推薦會員)</div>
      </section>
      <!-- 分潤獎金 Section End -->

      <!-- 分潤獎金 Section Start -->
      <section class="profit-section">
        <div class="css-table">
          <div class="css-tr">
            <div class="css-td">二級人數</div>
            <div class="css-td">三級人數</div>
            <div class="css-td">四級人數</div>
          </div>
          <div class="css-tr">
            <div class="css-td">{{ shareInfo.l2_num}}人</div>
            <div class="css-td">{{ shareInfo.l3_num}}人</div>
            <div class="css-td">{{ shareInfo.l4_num}}人</div>
          </div>
        </div>
      </section>
      <!-- 分潤獎金 Section End -->

    </main>
    <!-- Main End -->

</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getShareInfo } from '@/services/user'

import { useRouter } from 'vue-router'

const router = useRouter();
const shareInfo = ref({})

onMounted(async ()=>{
    let res = await getShareInfo()
    
    if (res.code === 200) {
        shareInfo.value = res.data
    }
})

const showRecommand = () => {
    router.push('/user/share/recommand')
}
</script>

<style lang="less" scoped>
.bonus-section{
    margin-bottom: 20px;
    width: 100%;
    padding: 17px;
    background-color: #fafafa;
    border-radius: 7px;
}

.profit-section{
    width: 100%;
    padding: 17px;
    background-color: #fafafa;
    border-radius: 7px;
}
.css-table {
  display:table;
  width: 100%;
  .css-tr {
      display: table-row;

      .css-td {
        width: 33%;
        display: table-cell;
        text-align: center;
        border: 1px #ccc solid;
      }
  }
}
</style>