<template>
     <div>
         <img src="../../assets/image/backWrite@2x.png" class="leftIcon" alt="" @click="$router.replace('/user')">
         <div class="inviter-img">
             <!-- <img src="../../assets/image/invitation_02.png" alt=""> -->
             <img src="../../assets/image/invitation_02@2x.png" alt="">
         </div>
         <div class="inviter-con">
             <!-- <img class="img-left" src="../../assets/image/invitation_04.png" alt=""> -->
             <!-- <p class="jiangli">奖励无上限  呼朋唤友来河马</p> -->
             <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>-->
            <p class="yaoqing">
               <img src="../../assets/image/friend_icon@2x.png" alt="">
               <span>邀请好友列表</span>
               <img src="../../assets/image/friend_icon@2x.png" alt="">
            </p>
             <div class="table-div">
                 <!-- <p class="yaoqing">— 邀请好友列表 —</p> -->
                <div class="ziti-1-box">
                    <!-- <img class="ziti-1" src="../../assets/image/invitation_14.png" alt=""> -->
                    <img class="ziti-1" src="../../assets/image/invitation_14@2x.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 class="haoyou">
                    <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" :style="{color:item.status == '已消费' ? '#D92B2B' : '#1AB475'}"> {{item.status}} </span>
                        </li>
                    </ul>
                    <!-- <img class="no-info" src="../../assets/image/no-info_03.png" alt="" v-show="data.imgShow"> -->
                    <img class="no-info" src="../../assets/image/no-info_03@2x.png" alt="" v-show="data.imgShow">
                </div>
             </div>
             
             <p class="yaoqing" style="margin-top:1rem">
                <img src="../../assets/image/friend_icon@2x.png" alt="">
                <span>已获得奖励</span>
                <img src="../../assets/image/friend_icon@2x.png" alt="">
             </p>
             <div class="table-div">
                    <!-- <p class="yaoqing">— 已获得奖励 —</p> -->
                    <div class="ziti-1-box">
                        <!-- <img class="ziti-1" src="../../assets/image/invitation_18.png" alt=""> -->
                        <img class="ziti-1" src="../../assets/image/invitation_14@2x.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> -->
                        <ul class="list" >
                            <li v-for="item in data.couponList">
                                <p class="ni">{{item.type}}{{item.price}}元</p>
                                <p class="yao">获取时间: {{item.time}}</p>
                                <span v-if="item.status == 0" class="span-right" :style="{color:item.status == 0 ? '#1AB475' : '#D92B2B'}">未使用</span>
                                <span v-if="item.status == 1" class="span-right" :style="{color:item.status == 0 ? '#1AB475' : '#D92B2B'}">已使用</span>
                                <span v-if="item.status == 2" class="span-right" :style="{color:item.status == 0 ? '#1AB475' : '#D92B2B'}">已过期</span>
                                <span v-if="item.status == 3" class="span-right" :style="{color:item.status == 0 ? '#1AB475' : '#D92B2B'}">已锁定</span>
                            </li>
                        </ul>
                        <img class="no-info" src="../../assets/image/no-info_03@2x.png" alt="" v-show="data.cueShow">
                     </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,
            // 优惠券
            couponList:[],
            cueShow:false,
        };
          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
            //       });
            //   });

            // 优惠券列表
            let couponRes = await Http.getInstance().getDisCounts();
            console.log('优惠券', couponRes)
            couponRes.data.forEach((item: any) => {
                this.data.couponList.push({
                    time: item.created_at,
                    type: item.type,
                    price: item.money,
                    status: item.status,
                });
            });
            if(couponRes.data.length == 0){
                this.data.cueShow = true
            }


          }

    }
</script>
<style lang="scss" scoped>
    .leftIcon {
        width: 0.667rem;
        position: absolute;
        top: 4rem;
        left: 2rem;
    }
   .inviter-img{
       img{
           width: 100%;
       }
   }
    .inviter-con{
        // background: #20b453;
        background: #6AB1FF;
        // margin-top: 0.5rem;
        position: relative;
        padding-bottom: 5rem;
        .jiangli{
            text-align: center;
            // line-height: 4rem;
            // font-size: 1.7rem;
            // color: #ffffff;
            line-height: 3rem;
            font-size: 1.2rem;
            color: #333;
            background: #fff;
        }
        .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;
        }
    }
    .yaoqing{
        text-align: center;
        // line-height: 5rem;
        line-height: 2rem;
        // color: #bcbcbc;
        font-size: 1.4rem;
        color: #fff;
        background: #6AB1FF;
        span {
            vertical-align: middle;
        }
        img {
            width: 1.7rem;
            margin: 1rem;
        }
    }
    .table-div{
        background: white;
        // margin: 5rem 1.5rem;
        margin: 0rem 2rem;
        // border-radius: 5px;
        // padding-bottom: 8rem;
        padding: 2rem 0;
        border-radius: 1rem;
        // .yaoqing{
        //     text-align: center;
        //     line-height: 5rem;
        //     // color: #bcbcbc;
        //     font-size: 1.4rem;
        //     color: #fff;
        //     background: #6AB1FF;
        //     span {
        //         vertical-align: middle;
        //     }
        //     img {
        //         width: 1.7rem;
        //         margin: 1rem;
        //     }
        // }
       .ziti-1-box{
           display: flex;
           justify-content: center;
           .ziti-1{
            //    width: 18rem;
            //    height: 2rem;
                width: 14rem;
                height: 1.5rem;
           }
       }
        // .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;
            padding: 0 2rem;
            li{
                position: relative;
                // padding-top: 1rem;
                padding-top: 2rem;
                margin-right: 1rem;
                // border-bottom: 1px dashed #8fe9af;
                border-bottom: 1px solid #ccc;
                .ni{
                    line-height: 1rem;
                }
                .yao{
                    // color: #999999;
                    line-height: 2.2rem;
                    color: #666;
                    font-size: 1.2rem;
                }
                .span-right{
                    position: absolute;
                    // right: 1rem;
                    right: 0;
                    // top: 1rem;
                    top: 2.5rem;
                    font-size: 1.2rem;
                }
            }
        }
        .list li:last-child {
            border-bottom: 0;
        }

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

</style>
