<template>
	<view class="content flex flex_column">
		<view class="b_head">
			<view class="head_list">
				<text>分享时间</text>
				<text>2022-11-29 10:02:54</text>
			</view>
			<view class="head_list">
				<text>客户名称</text>
				<text>东莞市寮步车正汽车服务中心</text>
			</view>
			<view class="head_list">
				<text>对账周期</text>
				<text>2022年11月29日~2022年12月31日</text>
			</view>
			<view class="head_list">
				<text>付款状态</text>
				<text>已付款（支付宝）</text>
			</view>
		</view>
		<view class="b_detail">
			<view class="detail_list u-flex">
				<view class="detail_box">
					<text>总单数：</text>
					<text>34</text>
				</view>
				<view class="detail_box">
					<text>待收金额合计：</text>
					<text>34.00</text>
				</view>
			</view>
			<view class="detail_list u-flex">
				<view class="detail_box">
					<text>折让金额：</text>
					<text>34</text>
				</view>
				<view class="detail_box">
					<text>折让待收金额：</text>
					<text>34.00</text>
				</view>
			</view>
		</view>
		<view class="detail_con">
			<billList></billList>
		</view>
		<view class="footer">
			<u-button type="primary" :custom-style="customStyle" shape="circle">再次发送对账单</u-button>
		</view>
	</view>
</template>

<script>
import billList from './billListComponent.vue'
import { findBySn,insert } from '@/api/verify.js';
export default {
	components: { billList },
	data() {
		return {
			customStyle:{
				backgroundColor: this.$config('primaryColor'),
				color: '#fff',
				verifySn:'',
				billInfo:{},
				billList:[]
			},
		};
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$config('primaryColor')
		});
	},
	onLoad(options) {
		if(options && options.billId){
			this.verifySn=options.billId
			this.loadData()
		}
	},
	methods:{
		loadData(){
			queryPage({verifySn:this.verifySn}).then(res => {
				if (res.status == 200) {
					this.billInfo=res.data;
					this.billList=res.data.list;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	width: 100%;
	.b_head {
		background-color: #fff;
		.head_list {
			padding:14rpx 20rpx;
			border-bottom: 1rpx solid #f8f8f8;
			text {
				&:first-child {
					color: $uni-text-color-grey;
					display: inline-block;
					width: 160rpx;
				}
			}
		}
	}
	.b_detail{
		margin:6rpx 0;
		background-color: #fff;
		padding:20rpx;
		box-sizing: border-box;
		.detail_list{
			margin-bottom: 10rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.detail_box::after{
				content:'；';
				color:$uni-text-color-grey;
			}
			.detail_box{
				text{
					&:first-child{
						color:$uni-text-color-grey;
					}
					&:last-child{
						color:$uni-color-warning;
						font-weight: 600;
					}
				}
				
			}
		}
	}
	.detail_con{
		flex-grow: 1;
		overflow: auto;
		background-color: #fff;
	}
	.footer{
		padding:10rpx 20rpx;
		background:#fff;
		margin-top:20rpx;
	}
}
</style>
