<template>
  <view class="">
    <view class="finance_head">
      <view class="top">
        <view>
          <view v-if="user_id == 0" class="accont">
            <u--image
              :showLoading="true"
              :src="userInfo.avatar || '../../static/img/public/man.png'"
              width="44px"
              height="44px"
              shape="circle"
            ></u--image>
            <view class="name">{{ userInfo.nickname }}</view>
            <!-- <u-icon name="setting-fill" color="white" size="20"></u-icon> -->
          </view>
          <view v-else class="accont">
            <u--image
              :showLoading="true"
              :src="userInfo.avatar || '../../static/img/public/man.png'"
              width="44px"
              height="44px"
              shape="circle"
            ></u--image>

            <view class="name">{{ userInfo.nickname }}</view>
            <!-- <u-icon name="setting-fill" color="white" size="20"></u-icon> -->
          </view>
        </view>
        <!-- <view class="right" @click="navTo('/subpkg/topUp/topUp')">
          账户充值
        </view> -->
      </view>
      <view class="center">
        <view class="title">
          <text style="margin-right: 20rpx">账户总金额(元)</text
          ><uni-icons
            @click="updateEye()"
            :type="eyeType ? 'eye-filled' : 'eye-slash-filled'"
            color="#fff"
          ></uni-icons>
        </view>
        <view class="price" v-show="eyeType"
          >{{ all_money }}元</view
        >
        <view class="price" v-show="!eyeType">****元</view>
        <view class="bubble">
          <!-- <image src="../../static/img/contract/bubble.png"></image> -->
          <view class="text" v-show="eyeType"
            >可提现金额{{ userInfo.user_money || 0.0 }}元</view
          >
          <view class="text" v-show="!eyeType">可提现金额****元</view>
        </view>
      </view>
      <view class="bottom" @click="navTo('/subpkg/orderDetail/orderDetail')">
        <view class="item">
          <view>履约押金额(元)</view>
          <view class="num" v-show="eyeType">{{
            userInfo.deposit || 0.0
          }}</view>
          <view class="num" v-show="!eyeType">****</view>
        </view>
        <u-line direction="col" length="40%" color="#999999FF"></u-line>
        <view class="item">
          <view>个人收益金额(元)</view>
          <view class="num" v-show="eyeType">{{
            userInfo.user_money || 0.0
          }}</view>
          <view class="num" v-show="!eyeType">****</view>
        </view>
      </view>
    </view>
    <view class="bill">
      <view style="width: 100%; height: 90rpx; background-color: #fff"></view>
      <uni-section
        titleFontSize="32rpx"
        type="line"
        title="账单流水"
      ></uni-section>
      <!-- <u-subsection :list="billTypeList" :current="current" mode="subsection"></u-subsection> -->
      <!-- <view class="type_box">
        <view class="type">
          <view :class="current == 0 ? 'active' : ''" @click="changeBillType(0)"
            >日账单</view
          >
          <view :class="current == 1 ? 'active' : ''" @click="changeBillType(1)"
            >月账单</view
          >
        </view>
      </view> -->
      <!-- 日账单 -->
      <view class="bill_list" v-show="current == 0">
        <!-- <view class="card" v-for="(item, index) in billList" :key="index">
          <view class="top">
            <view class="blue">账单详情</view>
            <view>账单日期：{{item.create_time}}</view>
          </view>
          <view class="bottom">
            <view class="left">
              <view>收益金额(元)</view>
              <view class="num">{{item.change_amount}}</view>
            </view>
            <view class="right">
              <view>支出金额:{{item.change_amount_desc<0?item.change_amount:'0.00'}}</view>
              <view>入账金额:{{item.change_amount_desc>0?item.change_amount:'0.00'}}</view>
            </view>
          </view>
        </view> -->
        <view class="item" v-for="(item, index) in billList" :key="item.id">
          <view class="top">
            账单日期: {{ current ? item.month : item.create_time }}
          </view>
          <view class="bottom">
            <view class="text">
              <view class="t_item" v-if="current == 0">
                <view class="t_title">任务名称：</view>
                <view class="tips">{{ item.remark }}</view>
              </view>
       <!--<view class="t_item">
                <view class="t_title">金额归属：</view>
                <view class="tips">{{
                  $store.state.app.userInfo.nickname
                }}</view>
              </view>  -->
			  
              <view class="t_item">
                <view class="t_title">收益来源：</view>
                <view class="tips">
                  <text v-if="item.change_type == 202" style="color: #46be61">{{
                    item.type_desc
                  }}</text>
                  <text
                    v-else-if="item.change_type == 203"
                    style="color: #ff7c32"
                    >{{ item.type_desc }}</text
                  >
                  <text v-else="item.change_type == 203">{{
                    item.type_desc
                  }}</text>
                </view>
              </view>
            </view>
            <view class="price">
              {{
                current
                  ? item.expenditure == 0
                    ? "+" + item.income
                    : "-" + item.income
                  : item.change_amount_desc
              }}
            </view>
          </view>
        </view>

        <!-- <view class="card" v-for="(item, index) in billList" :key="index">
					<view class="top">
						<view class="blue">账单详情</view>
						<view>账单日期：{{current?item.month:item.create_time}}</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view>收益金额(元)</view>
							<view class="num">
								{{current?(item.expenditure==0?item.income:'-'+item.income):item.change_amount_desc}}
							</view>
						</view>
						<view class="right">
							<view>支出金额:{{item.expenditure>0?item.expenditure:'0.00'}}</view>
							<view>入账金额:{{item.income>0?item.income:'0.00'}}</view>
						</view>
					</view>
				</view>

				 -->
        <u-loadmore
          :status="loadConfig.status"
          :loading-text="loadConfig.loadingText"
          :loadmore-text="loadConfig.loadmoreText"
          :nomore-text="loadConfig.nomoreText"
        />
      </view>
      <!-- 月账单 -->
      <view class="bill_list" v-show="current == 1">
        <view class="card" v-for="(item, index) in billListMonth" :key="index">
          <view class="top">
            <view class="blue">账单详情</view>
            <view>账单日期：{{ item.month }}</view>
          </view>
          <view class="bottom">
            <view class="left">
              <view>个人收益金额(元)</view>
              <view class="num">{{ item.income }}</view>
            </view>
            <view class="right">
              <view
                >支出金额:{{
                  item.expenditure > 0 ? item.expenditure : "0.00"
                }}</view
              >
              <view>入账金额:{{ item.income > 0 ? item.income : "0.00" }}</view>
            </view>
          </view>
        </view>
        <u-loadmore status="nomore" nomore-text="仅展示一年数据" />
      </view>

      <!-- <button class="btn" @click="navTo('/subpkg/withdrawDeposit/withdrawDeposit')">提现余额</button> -->
    </view>
  </view>
</template>

<script>
// import {
//   accountLogLists,
//   accountLogListsMonth
// } from "@/api/pay.js"
// import {
//   userInfo
// } from "@/api/oaUser.js"

// import {
//   Toast
// } from '@/libs/uniApi.js'
	import {
		
		getUserInfo,
		
	} from '@/api/user.js';
export default {
  data () {
    return {
      user_id: 0,
      userInfo: {},
      otherUserInfo: {},
      billTypeList: ['日账单', '月账单'],
      current: 0,
      billList: [],
	  eyeType:true,
      billListMonth: [],
      loadConfig: {
        page: 1,
        limit: 25,
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '没有更多账单了~~',
        status: 'loadmore'
      },
    }
  },
  onLoad (e) {
    if (e.id > 0) {
      this.user_id = e.id

    }
    // this.loadBill()
  },
  onShow () {

    if (this.user_id == 0) {
      this.userInfo = this.$store.state.app.userInfo;
      getUserInfo().then((res) => {
        this.$store.commit('setUserInfo', res.data);
        this.userInfo = res.data;
      })
    } else {
      this.OtherUserInfo()
    }
  },
  computed: {
    // eyeType () {
    //   return this.$store.state.config.eyeType;
    // },
    all_money(){
      let str = 0.00;

      try{
        this.userInfo.user_money?str=str+parseFloat(this.userInfo.user_money):0.00;
        this.userInfo.deposit?str=str+parseFloat(this.userInfo.deposit):0.00;
        str = str.toFixed(2);
      }catch(e){
        str = 0.00;
      }
      return str;
    }
  },
  onBackPress () {
    this.loadBill()
  },
  methods: {
    navTo (url) {
      url ?
        uni.navigateTo({
          url: url
        }) : Toast('暂未开放')
    },
    async OtherUserInfo () {
      // let res = await userInfo({
      //   id: this.user_id
      // });
	  
	  getUserInfo().then(res => {
	  	// that.userInfo = res.data;
	  	// that.userInfo.svip_open = true;
	  	// that.userInfo.vip_status = 2;
	  	// that.is_promoter = res.data.is_promoter;
	  	// that.extension_status = res.data.extension_status;
	        // this.userInfo = res.data
			console.log(res.data)
	  });
      // this.userInfo = res.data
    },
    updateEye () {
       this.eyeType=!this.eyeType
    },
    // 选择日账单月账单
    changeBillType (type) {
      this.current = type;
      if (type == 1) this.loadBillMonth();
    },
    async loadBill () {
      if (this.loadConfig.status == "nomore") return;
      this.loadConfig.status = "loading"
      let res = await accountLogLists({
        type: 'um', //账户余额
        page_no: this.loadConfig.page,
        page_size: this.loadConfig.limit,
        user_id: this.user_id
      });
      this.loadConfig.status = "loadmore"
      if (res.data.lists.length < this.loadConfig.limit) {
        this.loadConfig.status = "nomore"
      } else {
        this.loadConfig.page++;
      }
      this.billList = [...this.billList, ...res.data.lists];
    },
    async loadBillMonth () {
      let res = await accountLogListsMonth();
      let list = [];
      for (let key in res.data) {
        list.push(res.data[key])
      }
      this.billListMonth = list;
    }
  },
  onPullDownRefresh () {
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss">
page {
  // background-color: #fff;
}

.finance_head {
  background-color: #f02828;
  height: 400rpx;
  position: relative;
  // box-shadow: 0 -10px 20px rgba(#fff, 0.9) inset;
  background-image: linear-gradient(to top, rgba(#fff, 1), transparent);
  // box-shadow: -10px -10px 40px rgba(#fff, 0.9);
  background-size: 100% 35%;
  background-repeat: no-repeat;
  background-position: center bottom;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    color: #fff;
    padding: 10rpx 28rpx;

    .accont {
      // background-color: red;
      display: flex;
      justify-content: space-between;
      width: auto;
      width: auto;
      line-height: 44px;

      .name {
        margin-left: 20rpx;
      }

      .name {
        margin-left: 20rpx;
      }
    }

    .left {
      display: flex;
      align-items: center;
      flex: 1;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;

      // .name {
      // 	margin: 0 17.5rpx;
      // }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .right {
      font-size: 24.53rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .center {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 25rpx;
      font-weight: 400;
      line-height: 39rpx;
    }

    .price {
      font-size: 60rpx;
      font-weight: bold;
      line-height: 39rpx;
      margin-top: 28rpx;
      margin-bottom: 14rpx;
    }

    .bubble {
      padding: 20rpx 28rpx 10rpx 28rpx;
      background-image: url("@/static/images/bubble.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .text {
      }
    }
  }

  .bottom {
    position: absolute;
    bottom: -78rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 694rpx;
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      text-align: center;
      font-size: 25rpx;
      font-weight: 400;
      color: #666666;
      line-height: 39rpx;

      .num {
        font-size: 39rpx;
        font-weight: 500;
        color: #f02828;
        line-height: 39rpx;
      }
    }
  }
}

.bill {
  // padding: 28rpx;
  // padding-top: 90rpx;
  padding-bottom: 32rpx;
  background-color: #f5f5f5;

  .type_box {
    background-color: #fff;
    padding: 32rpx 0;

    .type {
      height: 53rpx;
      width: 333rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;

      view {
        flex: 1;
        color: #f02828;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #3274f9;

        &:nth-child(1) {
          border-radius: 30rpx 0 0 30rpx;
        }

        &:nth-child(2) {
          border-radius: 0 30rpx 30rpx 0;
        }
      }

      .active {
        background-color: #f02828;
        color: #fff;
      }
    }
  }

  .bill_list {
    // background-color: #f5f5f5;
    padding-bottom: 100rpx;
    padding-top: 28rpx;

    .card {
      padding: 28rpx;
      background-color: #fff;
      margin-bottom: 21rpx;

      .top {
        display: flex;
        align-items: center;
        font-size: 25rpx;
        font-weight: 400;
        color: #333333ff;
        line-height: 39rpx;

        .blue {
          width: 137rpx;
          height: 49rpx;
          background: #3274f9;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          font-size: 25rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 39rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 28rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 160rpx;

        .left {
          flex: 1;
          text-align: center;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;

          .num {
            font-size: 39rpx;
            font-weight: 500;
            color: #f02828;
            line-height: 39rpx;
          }
        }

        .right {
          flex: 1;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
        }
      }
    }

    .item {
      margin: 0 auto;
      margin-bottom: 28rpx;
      width: 694rpx;
      // height: 238rpx;
      background: #ffffff;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 28rpx;

      .top {
        margin-bottom: 28rpx;
        font-size: 25rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;

        &:before {
          display: inline-block;
          content: "账单详情";
          width: 137rpx;
          height: 49rpx;
          line-height: 49rpx;
          text-align: center;
          background: #3274f9;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          color: #fff;
          margin-right: 28rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .text {
          font-size: 25rpx;
          font-weight: 400;
          color: #999999;
          line-height: 39rpx;

          .t_item {
            display: flex;

            .t_title {
              margin-bottom: 16rpx;
              flex-shrink: 0 !important;
            }

            .tips {
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }

        .price {
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #f02828;
        }
      }
    }
  }

  .btn {
    color: #fff;
    border-radius: 100px;
    text-align: center;
    line-height: 84.21rpx;
    margin: 0 auto;
    margin-top: 84.21rpx;
    width: 693.93rpx;
    height: 84.21rpx;
    background: #f02828;
    box-shadow: 0px 9px 26px 1px #e9eff5;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>