<template>
     <div>
         <div class="inviter-img">
             <img src="../../assets/image/invitation_02.png" alt="">
         </div>
         <div class="inviter-con">
             <img class="img-left" src="../../assets/image/invitation_04.png" alt="">
             <p class="jiangli">奖励无上限  呼朋唤友来河马</p>
             <img class="img-right" src="../../assets/image/invitation_06.png" alt="">
<!--             <router-link tag="div" class="liji-btn" to="/user/share">-->
<!--                 <img class="btn" src="../../assets/image/invitation_22.png" alt="">-->
<!--             </router-link>-->
             <div class="table-div">
                 <p class="yaoqing">— 邀请好友列表 —</p>
                <div class="ziti-1-box">
                    <img class="ziti-1" src="../../assets/image/invitation_14.png" alt="">
                </div>
                 <el-tabs   class="haoyou">
                     <el-tab-pane label="直接好友" >
                         <ul class="list" v-if="data.isChildUpdate1">
                             <li  v-for="item in data.list">
                                 <p class="ni">{{item.nickname}}</p>
                                 <p class="yao">邀请时间: {{item.time}}</p>
                                 <span class="span-right"> {{item.status}} </span>
                             </li>
                         </ul>
                         <img class="no-info" src="../../assets/image/no-info_03.png" alt="" v-show="data.imgShow">
                     </el-tab-pane>
                     <el-tab-pane label="间接好友" name="second">
                         <ul class="list" v-if="data.isChildUpdate2">
                             <li v-for="items in data.lists">
                                 <p class="ni">{{items.nickname}}</p>
                                 <p class="yao">邀请时间: {{items.time}}</p>
                                 <span class="span-right">{{items.status}}</span>
                             </li>
                         </ul>
                         <img class="no-info" src="../../assets/image/no-info_03.png" alt="" v-show="data.imgShows">
                     </el-tab-pane>
                 </el-tabs>
             </div>

             <div class="table-div">
                    <p class="yaoqing">— 已获得奖励 —</p>
                    <div class="ziti-1-box">
                        <img class="ziti-1" src="../../assets/image/invitation_18.png" alt="">
                    </div>
                     <div class="haoyou">
                         <ul class="list" >
                             <li v-for="item in data.yaolist">
                                 <p class="ni">{{item.nickname}}</p>
                                 <p class="yao">缴费{{item.count}}次</p>
                                 <span class="span-right">{{item.price}}元</span>
                             </li>
                         </ul>
                         <img class="no-info" src="../../assets/image/no-info_03.png" alt="" v-show="data.imgSho">
                     </div>

             </div>
         </div>
     </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    @Component({
        components: {}
    })

    export default class UserIndex extends Vue {
        public data: any = {
            list: [],
            lists:[],
            yaolist:[],
            isChildUpdate1:true,
            isChildUpdate2:true,
            imgShow:true,
            imgShows:true,
            imgSho:true
        };
          async created(){
              console.log('2222222222')
              let res = await Http.getInstance().getInvitationList();
              console.log(res.data)
              if(res.data.length == 0){
                  this.data.imgShow = true
              }else {
                  this.data.imgShow = false
              }
              console.log(this.data.imgShow)
              res.data.forEach((item: any) => {
                  this.data.list.push({
                      time: item.create_timestamp,
                      nickname: item.realname,
                      status: item.status == 1 ? "已消费" : item.status == 2 ? "未消费" : "已完成",
                  });
              });

              let ress = await Http.getInstance().getInvitationChild();
              console.log(ress)
              if(ress.data.length == 0){
                  this.data.imgShows = true

              }else {
                  this.data.imgShows = false
              }
              console.log(this.data.imgShows)
              ress.data.forEach((item: any) => {
                  this.data.lists.push({
                      time: item.create_timestamp,
                      nickname: item.realname,
                      status: item.status == 1 ? "已消费" : item.status == 2 ? "未消费" : "已完成",
                  });
              });

              let rres = await Http.getInstance().getInvitationawardList();
              console.log(rres)
              if(rres.data.length == 0){
                  this.data.imgSho = true

              }else {
                  this.data.imgSho = false
              }
              rres.data.forEach((item: any) => {
                  this.data.yaolist.push({
                      count: item.count,
                      nickname: item.realname,
                      price: item.sum
                  });
              });


          }

    }
</script>
<style lang="scss">
   .inviter-img{
       img{
           width: 100%;
       }
   }
    .inviter-con{
        background: #20b453;
        margin-top: 0.5rem;
        position: relative;
        padding-bottom: 5rem;
        .jiangli{
            text-align: center;
            line-height: 4rem;
            font-size: 1.7rem;
            color: #ffffff;
        }
        .img-left{
            position:absolute;
            width: 10rem;
            top: -2.5rem;
        }
        .img-right{
            position:absolute;
            width: 10rem;
            top: -2.5rem;
            right: 0;
        }
    }
    .liji-btn{
        display: flex;
        justify-content: center;
        .btn{
            width: 20rem;
            height: 5rem;
        }
    }
    .table-div{
        background: white;
        margin: 5rem 1.5rem;
        border-radius: 5px;
        padding-bottom: 8rem;
        .yaoqing{
            text-align: center;
            line-height: 5rem;
            color: #bcbcbc;
            font-size: 1.4rem;
        }
       .ziti-1-box{
           display: flex;
           justify-content: center;
           .ziti-1{
               width: 18rem;
               height: 2rem;
           }
       }
        .haoyou{
            .el-tabs__nav-scroll{
                margin-left: 9rem;
                margin-top: 1.5rem;
            }

        }
        .list{
            list-style: none;
            font-size: 1.3rem;
            margin-left: -1.5rem;
            margin-top: 2rem;
            li{
                position: relative;
                padding-top: 1rem;
                margin-right: 1rem;
                border-bottom: 1px dashed #8fe9af;
                .ni{
                    line-height: 1rem;
                }
                .yao{
                    color: #999999;
                    line-height: 2.2rem;
                }
                .span-right{
                    position: absolute;
                    right: 1rem;
                    top: 1rem;
                    color: #04b954;
                }
            }
        }

    }
 .no-info{
     width: 50%;
     margin: auto;
     display: block;
 }

</style>
