<template>
  <view class="all_detail">
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="" @scrolltoupper="upper" @scrolltolower="lower"
      @scroll="scroll" style="width: 100%;height:100%;padding-top: 20rpx;box-sizing: border-box;">
      <view v-if="
					pageTitle == '市場佣金' && swiperListMoneyZ.length == 0 || 
					pageTitle == '資產收益' && swiperListMoneyW.length == 0
				" style="color: #fff;width: 100%;height: 100%;text-align: center;">
        暫無數據
      </view>
      <!-- 推薦客戶 -->
      <view v-if="pageTitle == '推薦客戶'" class="tuijian_personal">
        <view class="t_p_header">
          <view class="t_p_h_left">
            <text style="font-size: 24rpx;">直推人數:</text>
            <text style="
								width: 45%;
								height: 50%;
								border-radius: 20rpx;
								border: 1px solid #a5ace2;
                font-weight: 600;
                font-size: 38rpx;
                margin-left: 20%;
							">
              {{kehuZhitui || 0}}
            </text>
          </view>
        </view>
        <view class="t_p_header" style="margin-top: 50rpx;">
          <view class="t_p_h_left">
            <text style="font-size: 24rpx;">客戶總人數:</text>
            <text style="
								width: 45%;
								height: 50%;
								border-radius: 20rpx;
								border: 1px solid #a5ace2;
                font-weight: 600;
                font-size: 38rpx;
                margin-left: 20%;
							">
              {{kehuNum || 0}}
            </text>
          </view>
        </view>
      </view>
      <!-- 我的身份 -->
      <view v-if="pageTitle == '我的身份'" class="my_vipNum">
        <view v-for="(item,index) in sysVipList" :key="item.id"
          :style="{backgroundColor:userinfo.level == item.lv ? '#3eb93b' : ''}" class="m_v_content">
          <view class="m_v_c_box">{{item.title}}</view>
          <view class="m_v_c_box">收益：{{item.parent_rate * 100}} %</view>
        </view>
      </view>
      <!-- 市場佣金 -->
      <view v-if="pageTitle == '市場佣金'" class="each_content" v-for="(item,index) in swiperListMoneyZ" :key="item.id">
        <view class="each_content_left">
          <view class="header_money">
            <view class="text-green">
              <text class=" ">+</text>
              <text class="">{{item.coin}}</text>
            </view>
          </view>
          <view class="content_adress">
            <view class="text-gray"
              style=" width: 300rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 20rpx;">
              收款地址:{{item.to_addr}}
            </view>
            <view class="margin-top-lg" style="margin-top: -10rpx;margin-left: 20rpx;">
              <image @click="fuzhi(item.to_addr)" src="/static/fizhi.png" style="width: 40rpx;height: 40rpx;"></image>
            </view>
          </view>
          <view class="content_adress">
            <view class="text-gray"
              style=" width: 300rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 20rpx;">
              付款地址:{{item.from_addr}}
            </view>
            <view class="margin-top-lg" style="margin-top: -10rpx;margin-left: 20rpx;">
              <image @click="fuzhi(item.from_addr)" src="/static/fizhi.png" style="width: 40rpx;height: 40rpx;"></image>
            </view>
          </view>
          <view class="footer_shouy">{{item.type}}</view>
        </view>
        <view class="each_content_right">
          <view class="timeBtn">
            {{timeOptions(item.createtime*1000)}}
          </view>
        </view>
      </view>
      <!-- 資產收益 -->
      <view v-if="pageTitle == '資產收益'" class="each_content" v-for="(item,index) in swiperListMoneyW" :key="item.id"
        style="height: 150rpx;">
        <view class="each_content_left">
          <view class="header_money">
            <view class="text-green">
              <text class=" ">+</text>
              <text class="">{{item.score}}</text>
            </view>
          </view>
          <view class="content_adress">
            <view class="text-gray" style="font-size: 25rpx;">
              變動前:{{item.before}}
            </view>
          </view>
          <view class="content_adress">
            <view class="text-gray" style="font-size: 25rpx;">
              變動後:{{item.after}}
            </view>
          </view>
        </view>
        <view class="each_content_right">
          <view class="timeBtn" style="margin-top: 20rpx;">
            {{timeOptions(item.createtime*1000)}}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    _rewardlist,
    _viplist,
    _userInfos,
    _childrens,
    _minerscorelist
  } from "@/request/api.js"
  export default {
    data() {
      return {
        userinfo: {},
        pageTitle: "",
        swiperListMoneyZ: [],
        swiperListMoneyW: [],
        sysVipList: [],
        kehuList: {}, //推薦信息
        kehuZhitui: "",
        kehuNum: ""
      }
    },
    onLoad(e) {
      uni.setNavigationBarTitle({
        title: e.detailLabel
      });
      this.pageTitle = e.detailLabel;
    },
    onShow() {
      switch (this.pageTitle) {
        case '推薦客戶':
          this.getChildrenlist();
          break;
        case '我的身份':
          this.getViplist()
          this.getUserInfos();
          break;
        case '市場佣金':
          this.getRewardlist();
          break;
        case '資產收益':
          this.getMinerrewardlist();
          break;
      }
    },
    methods: {
      async getViplist() {
        let res = await _viplist();
        if (res.code === 1) {
          this.sysVipList = res.data;
        }
      },
      async getUserInfos() {
        let res = await _userInfos();
        if (res.code === 1) {
          this.userinfo = res.data.userinfo;
        }
      },
      async getRewardlist() {
        let res = await _rewardlist();
        if (res.code === 1) {
          this.swiperListMoneyZ = res.data;
        }
      },
      async getMinerrewardlist() {
        const params = {
          page: 1,
          listrow: 999999
        };
        let res = await _minerscorelist(params);
        if (res.code === 1) {
          this.swiperListMoneyW = res.data.data;
        }
      },
      async getChildrenlist() {
        let res = await _childrens();
        if (res.code === 1) {
          this.kehuList = res.data;
          this.kehuZhitui = this.kehuList.children.length;
          this.kehuNum = this.kehuList.tree.length;
        }
      },
      timeOptions(timestamp) {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      },
      fuzhi(e) {
        uni.setClipboardData({
          data: e,
          success: function() {
            uni.showToast({
              title: '複製成功'
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .all_detail {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #000033, #51599b);
    padding: 20rpx;
    box-sizing: border-box;

    .my_vipNum {
      width: 100%;
      height: 100%;
      color: #fff;

      .m_v_content {
        background-color: #3a3d71;
        height: 15%;
        border-radius: 30rpx;
        margin-bottom: 30rpx;
        display: flex;
        padding: 30rpx;
        box-sizing: border-box;

        .m_v_c_box {
          flex: 1;
          display: flex;
          align-items: center;
        }

        .m_v_c_box:last-child {
          justify-content: flex-end;
        }
      }
    }

    .tuijian_personal {
      width: 100%;
      height: 100%;
      color: #fff;

      .t_p_header {
        background-color: #383D84;
        height: 10%;
        border-radius: 30rpx;

        .t_p_h_left {
          display: flex;
          height: 100%;
          align-items: center;

          >text {
            height: 100%;
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    .each_content {
      height: 220rpx;
      background-color: #4c5188;
      border-radius: 20rpx;
      display: flex;
      padding: 20rpx;
      box-sizing: border-box;
      margin-bottom: 30rpx;
      color: #fff;

      .header_money {
        height: 45rpx;
        line-height: 45rpx;

        .text-green {
          color: #3eb93b;
          font-weight: 700;
        }

        .text-red {
          color: #e54d42;
          font-weight: 700;
        }
      }

      .footer_shouy {
        width: 60%;
        text-align: center;
        color: #0081ff;
        border: 1px solid skyblue;
        border-radius: 30rpx;
        font-weight: 700;
        font-size: 30rpx;
        line-height: 50rpx;
      }

      .content_adress {
        display: flex;
      }

      .each_content_left {
        width: 60%;
        height: 100%;
      }

      .each_content_right {
        width: 40%;
        height: 100%;

        .timeBtn {
          background: linear-gradient(to right, #8f8f8f, #3e3e3e);
          font-size: 30rpx;
          border-radius: 40rpx;
          color: #fff;
          height: 75rpx;
          line-height: 30rpx;
          padding: 10rpx;
          text-align: center;
          box-sizing: border-box;
          margin-top: 40rpx;
        }
      }
    }
  }
</style>