<template>
	<view class="content flex flex_column">
		<view class="b_head">
			<view class="head_list">
				<text>分享时间</text>
				<text>{{billInfo.createDate}}</text>
			</view>
			<view class="head_list" v-if="billList.customer">
				<text>客户名称</text>
				<text>{{billInfo.customer.customerName}}</text>
			</view>
			<view class="head_list">
				<text>对账周期</text>
				<text>{{timeInfo || '--'}}</text>
			</view>
			<view class="head_list">
				<text>付款状态</text>
				<text>{{billInfo.billStatus != 'UNSETTLE'?'未付款':billInfo.settleStyleSnDictValue ? '已付款（'+billInfo.settleStyleSnDictValue+'）':'已付款'}}</text>
			</view>
		</view>
		<view class="b_detail">
			<view class="detail_list u-flex">
				<view class="detail_box">
					<text>总单数：</text>
					<text>{{billInfo.detailNum}}</text>
				</view>
				<view class="detail_box">
					<text>待收金额合计：</text>
					<text>{{billInfo.totalAmount}}</text>
				</view>
			</view>
			<view class="detail_list u-flex">
				<view class="detail_box">
					<text>折让金额：</text>
					<text>{{billInfo.discountAmount}}</text>
				</view>
				<view class="detail_box">
					<text>折让后待收金额：</text>
					<text>{{billInfo.settleAmount}}</text>
				</view>
			</view>
		</view>
		<view class="detail_con">
			<billList :list="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';
import getDate from '@/libs/getDate.js';
export default {
	components: { billList },
	data() {
		return {
			customStyle:{
				backgroundColor: this.$config('primaryColor'),
				color: '#fff',
				verifySn:'',
				billInfo:null,
				billList:[],
				timeInfo:''
			},
		};
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$config('primaryColor')
		});
	},
	onLoad(options) {
		if(options && options.billId){
			this.verifySn=options.billId
			this.loadData({verifySn:options.billId})
		}
	},
	methods:{
		loadData(ajaxData){
			findBySn(ajaxData).then(res => {
				if (res.status == 200) {
					this.billInfo=res.data;
					this.billList=res.data.detailList;
					let timeobj=getDate.editDay(res.data.bizBeginDate,res.data.bizEndDate);
					this.timeInfo= timeobj.starttime +'~'+timeobj.endtime
				}
			});
		},
		submitOrder(){//发送对账单
			let ajaxData={
				detailNum:this.billInfo.detailNum,
				totalAmount:this.billInfo.totalAmount,
				discountAmount:this.billInfo.discountAmount,
				settleAmount:this.billInfo.settleAmount,
				detailList:this.billList,
				targetSn: this.billInfo.customer.customerSn,
				bizBeginDate: this.billInfo.bizBeginDate,
				bizEndDate: this.billInfo.bizEndDate
			}
			insert(ajaxData).then(res => {
				if (res.status == 200) {
					//去分享
				}
			});
		},
	}
};
</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>
