<template>
	<view class="content flex flex_column" v-if="billInfo">
		<view class="b_head">
			<view class="head_list">
				<text>分享时间</text>
				<text>{{ billInfo.createDate }}</text>
			</view>
			<view class="head_list" v-if="billInfo.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 ||billInfo.totalAmount == 0 ? toThousands(billInfo.totalAmount,2):'--' }}</text>
				</view>
			</view>
			<view class="detail_list u-flex">
				<view class="detail_box">
					<text>折让金额：</text>
					<text>￥{{ billInfo.discountAmount||billInfo.discountAmount==0? toThousands(billInfo.discountAmount,2):'--'}}</text>
				</view>
				<view class="detail_box">
					<text>折让后待收金额：</text>
					<text>￥{{ billInfo.settleAmount||billInfo.settleAmount ==0? toThousands(billInfo.settleAmount,2):'--' }}</text>
				</view>
			</view>
		</view>
		<view class="detail_con"><billList ref="billBox" :list="billArr"></billList></view>
		<view class="footer" v-if="billInfo.billStatus == 'UNSETTLE'">
			<u-button type="primary" :loading="btnLoading" @click="submitOrder" :custom-style="customStyle" shape="circle">再次发送对账单</u-button>
		</view>
		<!-- 分享询问弹窗 -->
		<u-modal v-model="shareShow" :show-cancel-button="true" :content="shareContent" @confirm="handleShare" @cancel="shareShow = false;btnLoading = false;"></u-modal>
	</view>
</template>

<script>
import billList from './billListComponent.vue';
import { findBySn, insert } from '@/api/verify.js';
import getDate from '@/libs/getDate.js';
import { toThousands } from '@/libs/tools.js'
export default {
	components: { billList },
	data() {
		return {
			customStyle: {
				backgroundColor: this.$config('primaryColor'),
				color: '#fff',
				verifySn: ''
			},
			billInfo: null,
			billArr: [],
			timeInfo: '',
			btnLoading: false,
			shareShow: false,
			shareContent: `是否同意发送对账单给微信好友？`,
			toThousands
		};
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$config('primaryColor')
		});
	},
	onLoad(options) {
		if (options && options.billId) {
			this.verifySn = options.billId;
			this.loadData({ verifySn: options.billId });
		}
	},
	computed: {
		//经销商信息
		userData() {
			return this.$store.state.vuex_userData;
		}
	},
	methods: {
		loadData(ajaxData) {
			let that = this;
			findBySn(ajaxData).then(res => {
				if (res.status == 200) {
					that.billInfo = res.data;
					that.billArr = res.data.detailList;
					let timeobj = getDate.editDay(res.data.bizBeginDate, res.data.bizEndDate);
					that.timeInfo = timeobj.starttime + '~' + timeobj.endtime;
					that.$nextTick(() => {
						that.$refs.billBox.setData(res.data.detailList);
					});
				}
			});
		},
		submitOrder() {
			//发送对账单
			this.shareShow = true;
		},
		// 分享图文
		handleShare() {
			let jumpUrl = getApp().globalData.baseUrl.replace('qpls-md/','')
			let url = jumpUrl+'dzd/index.html?' + this.userData.orgSn + '&' + this.verifySn;
			if (uni.getSystemInfoSync().platform == 'ios') {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: url,
					title: this.billInfo.customer.customerName + '的对账单',
					summary: '共' + this.billInfo.settleAmount + '元，请您查阅',
					imageUrl: '../../static/logo.png',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			} else {
				uni.shareWithSystem({
					summary: this.billInfo.customer.customerName + '您好，您有一个对账单共' + this.billInfo.settleAmount + '元，请您查阅',
					href: url,
					success() {
						console.log('调取微信列表成功，分享不一定成功');
					},
					fail() {
						console.log('分享失败');
					}
				});
			}
		}
	}
};
</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>
