<template>
  <view class="list">
		<view class="head">
			<view class="head_conent">
				<view class="sum">
					<view class="text">已提现金额</view>
					<u-count-to class="num" style="color: #F84221;" :startVal="0" :endVal="sumTofixed" :decimals="2"></u-count-to>
				</view>
        <view class="line"></view>
				<view class="sum">
					<view class="text">已提现次数</view>
					<u-count-to class="num" :startVal="0" :endVal="count"></u-count-to>
				</view>
			</view>
      <u-line></u-line>
			<view class="tixian" @click="tixian">
				立即提现
			</view>
		</view>
		<!-- <view class="public-wrapper">
			<view class="title">
				提现详情
			</view>
			<view class="conter">
				<view class="data">编号</view>
				<view class="browse">银行</view>
				<view class="turnover">日期</view>
				<view class="money">金额(元)</view>
			</view>
			<view class="footer">

				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class=" footer_list" v-for="(item,index) in UserApplylist" :key="index">
						<view class="data">{{index+1}}</view>
						<view class="browse">{{item.financial_account.bank}}</view>
						<view class="turnover">{{item.create_time}}</view>
						<view class="money">{{item.extract_money}}</view>
					</view>
				</scroll-view>

			</view>
		</view> -->
    <view class="recoder">
      <block>
        <!-- <picker mode="date" fields="month" :end="endDate" @change="changeDate">
          <view class="time">
            <view>2023年-11月</view>
            <image src="@/static/images/arrow-right.png" class="icon"></image>
          </view>
        </picker> -->
        <view class="card" v-for="(item,index) in UserApplylist" :key="index">
          <image class="left" src="@/static/images/qianbao.png" style="width: 60rpx;height: 60rpx;"></image>
          <view class="right">
            <view class="item">
              <view class="item_title">佣金提现到银行卡</view>
              <view class="item_money">+{{item.extract_money}}</view>
            </view>
            <view class="item">
              <view class="item_brank">{{`${item.financial_account.bank} (${item.financial_account.bank_code}) `}}</view>
              <view class="item_time">{{item.create_time}}</view>
            </view>
          </view>
        </view>
      </block>
    </view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getAdminApplyListAPI
	} from '@/api/user.js'
	export default {
		data() {
			return {
				sum: 0,
				count:0,
				scrollTop: 0,
        endDate: '',
				merId: '',
				UserApplylist:[]
			}
		},
		computed: {
			sumTofixed(){
				return this.returnFloat(this.sum)
			}
		},
		watch: {

		},
		onLoad(option) {
			this.merId = option.mer_id
      let date = new Date();
      this.endDate = `${date.getFullYear()}-${date.getMonth()+1}-01`
      console.log(this.endDate);
			// console.log(this.merId);
			this.ApplyList()
			// this.UserApplylist.forEach((item)=>{
			// 	console.log(item.extract_money);
			// })
		},
		methods: {
      changeDate(e){
        console.log(e.detail.value);
      },
			/**数字强制转为两位小数*/
			 returnFloat(value){
				var value=Math.round(parseFloat(value)*100)/100;
				var xsd=value.toString().split(".");
				if(xsd.length==1){
				value=value.toString()+".00";
				return value;
				}
				if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			 }
			},
			tixian() {
				uni.navigateBack({
					delta: 1
				});
			},
			ApplyList(){
				getAdminApplyListAPI(this.merId).then(res=>{
					console.log(res);
					this.UserApplylist=res.data.list
					this.count=this.UserApplylist.length
					this.UserApplylist.forEach(item=>{
            item.financial_account.bank_code=item.financial_account.bank_code.substr(-4)
            console.log(item.financial_account.bank_code);
						// item.create_time=item.create_time.substr(0,10)
						// console.log(parseInt(item.extract_money));
					})
					for(let i =0; i<this.UserApplylist.length; i++){
						this.sum+=parseInt(this.UserApplylist[i].extract_money)
					}
				}).catch(err=>{	
					console.log(err);
				})
			}
		},

	}
</script>

<style lang="scss">
	.list {
		.head {
			// width: 100%;
			// height: 150px;
			// display: flex;
			// background-image: linear-gradient(90deg, #FA6514 0%, #E93323 100%);
			// position: relative;
      // padding-top: 28rpx;
			width: 694rpx;
      margin: 28rpx auto;
      padding: 28rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.head_conent {
				// width: 694rpx;
    //     margin: 28rpx auto;
				// height: 150px;
				// margin: 50px auto;
				// border-radius: 15px;
				// box-shadow: 0px 0px 5px rgba(#FA6514, 0.5);

				display: flex;
				justify-content: space-around;
				align-items: center;
        
        .line{
          width: 1rpx;
          height: 70rpx;
          background-color: #dfdfdf;
        }
				
				.sum {
					flex: 1;
          text-align: center;
          color: #737373;
          font-size: 30rpx;
          .num{
            font-size: 42.06rpx;
            margin-bottom: 15rpx;
          }
          .text{
            margin-bottom: 15rpx;
          }
				}
			}

			.tixian {
        width: 326rpx;
        height: 53rpx;
        line-height: 53rpx;
        text-align: center;
        background: #FFFFFF;
        border-radius: 25rpx 25rpx 25rpx 25rpx;
        opacity: 1;
        border: 2rpx solid #F84221;
        margin: 0 auto;
        margin-top: 20rpx;
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #F84221;
				// position: absolute;
				// background-image: linear-gradient(90deg, #FA6514 0%, #E93323 100%);
				// box-shadow: 0px 0px 5px rgba(#FA6514, 0.5);
				// width: 100px;
				// height: 40px;
				// line-height: 40px;
				// border-radius: 30px;
				// text-align: center;
				// font-size: 18px;
				// color: #fff;
				// font-weight: 700;
				// left: 37%;
				// top: 150px;
			}
		}

		.public-wrapper {
			width: 90%;
			margin: 70px auto;
			box-shadow: 0px 0px 5px rgba(#FA6514, 0.7);
			border-radius: 10px;

			.title {
				font-size: 18px;
				font-weight: 700;
				padding: 10px 0 0 10px;
			}

			.conter {
				display: flex;
				align-items: center;
				padding: 10px 0 0 10px;
				text-align: center;

				.data {
					width: 40px;
				}

				.browse {
					width: 110px;
				}

				.turnover {
					width: 110px;
				}

				.money {
					width: 60px;
				}
			}

			.footer {
				.scroll-Y {
					max-height: 60vh;

					.footer_list {
						display: flex;
						align-items: center;
						padding: 10px 0 0 10px;
						text-align: center;

						.data {
							width: 40px;
						}

						.browse {
							width: 110px;
						}

						.turnover {
							width: 110px;
						}

						.money {
							width: 60px;
						}
					}
				}

			}

		}
    .recoder{
      padding: 0 28rpx 28rpx 28rpx;
      .time{
        height: 42rpx;
        font-size: 30rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 45rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        .icon{
          width: 30rpx;
          height: 30rpx;
          transform: rotate(90deg);
          margin-left: 10rpx;
        }
      }
      .card{
        width: 694rpx;
        background: #FFFFFF;
        border-radius: 21rpx 21rpx 21rpx 21rpx;
        opacity: 1;
        padding: 28rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        .left{
          flex-shrink: 0;
          margin-right: 20rpx;
        }
        .right{
          flex: 1;
          .item{
            width: 100%;
            display: flex;
            justify-content: space-between;
            &_title{
              font-size: 30rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 45rpx;
            }
            &_money{
              font-size: 33rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F84221;
              line-height: 50rpx;
            }
            &_brank{
              font-size: 26rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #737373;
              line-height: 39rpx;
            }
            &_time{
              font-size: 23rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #B3B3B3;
              line-height: 34rpx;
            }
          }
        }
      }
    }
	}
</style>