<template>
	<view class="customBundleDetail-wrap">
		<view class="header">
			 <view class="header-row">
				 <text style="font-weight: bold;">单据信息</text>
			 </view>
			 <view v-if="panelData">
				<view class="header-row">
					<view><text>购买日期：</text>{{panelData.orderDate||'--'}}</view>
				</view>
				<view class="header-row">
					<view><text>订单号：</text>{{panelData.orderBundle.number||'--'}}</view>
				</view>
				<view class="header-row">
					<view><text>客户名称：</text>{{panelData.orderBundle.custName||'--'}}</view>
				</view>
				<view class="header-row">
					<view><text>手机号：</text>{{panelData.orderBundle.custMobile||'--'}}</view>
				</view>
				<view class="header-row">
					<view><text>销售合作商：</text>{{panelData.dataSourceName||'--'}}</view>
				</view>
				<view class="header-row">
					<view><text>套餐名称：</text>{{panelData.orderBundle.bundleName||'--'}}</view>
				</view>
				<view class="header-row r2">
					<view><text>套餐价格：</text>￥{{panelData.orderBundle.totalAmount ? panelData.orderBundle.totalAmount + '元' : '--'}}</view>
					<view><text>销售人员：</text>{{panelData.sellerName||'--'}}</view>
				</view>
				<view class="header-row r2">
					<view><text>收款金额：</text>{{panelData.orderBundle.payedAmount ? panelData.orderBundle.payedAmount + '元' : '--'}}</view>
					<view><text>支付方式：</text>现金</view>
				</view>
			 </view>
		</view>
		<view class="tabs">
			<view class="need-treament" @click="cur = 0" :class="{ active: cur == 0 }">套餐内容</view>
			<view class="pay-close" @click="cur = 1" :class="{ active: cur == 1 }">使用记录</view>
		</view>
		<view class="cont-list" v-show="cur == 0">
			<view class="check-order-list" v-for="item in itemData" :key="item.id">
				<view class="check-row">
					 <view>{{item.name}}</view>
					 <view>
						 剩余：{{item.amount}}
					 </view>
				</view>
			</view>
			<view v-if="itemData.length==0">
				<view class="noDate">暂无数据</view>
			</view>
		</view>
		<view class="cont-list" v-show="cur == 1">
			<view class="check-order-list" v-for="item in useHistoryData" :key="item.id" >
				 <view class="check-row" >
					 <view>{{item.usedTime}}</view>
					 <view>
						{{item.usedStoreName}}
					 </view>
				 </view>
				 <view class="check-row" >
					 <view class="flex flex_column justify_center">
						<view >
							 服务内容：{{item.bundItemName}}
						</view>
					 </view>
				 </view>
				 <view class="check-row" >
					 <view class="flex flex_column justify_center">
						<view>
							 核销单号：{{item.bizNum}}
						</view>
					 </view>
				 </view>
				 
			 </view>
			<view v-if="useHistoryData.length==0">
				<view class="noDate">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import _ from 'lodash'
import { customerBundleDetail, customerBundleUseHistory, cancelBuy } from '@/api/customerBundle'
export default {
	data() {
		return {
			cur: 0,
			id: '', 
			panelData: {
			  orderBundle: {}
			},
			showCancelBuy: false,
			storeList: [],
			itemData: [],
			useHistoryData: []
		};
	},
	onLoad(opts) {
		this.id = opts.id
		this.getCustomerBundleDetail()
		this.getCustomerBundleHistory()
	},
	methods: {
		message(title){
			uni.showToast({
				icon:'none',
				title: title
			})
		},
		// 获取套餐信息
		getCustomerBundleDetail (){
			let _this = this
			customerBundleDetail({
			  id: this.id
			}).then(res => {
				if(res.status == 200){
					this.panelData = res.data
					let list = []
					_.forEach(res.data.customerBundleItemList, (item) => {
					  list.push({
					    name: item.itemName,
					    amount: item.times + '次'
					  })
					})
					this.itemData = list
				}else{
					this.panelData = []
					this.itemData = []
				}
			})
		},
		// 获取套餐使用记录
		getCustomerBundleHistory(){
			customerBundleUseHistory({ id: this.id }).then(res => {
				if(res.status == 200){
					this.useHistoryData = res.data
					this.showCancelBuy = res.data.length == 0
				}else{
					this.useHistoryData = []
					this.showCancelBuy = false
				}
			})
		},
		// 取消购买
		cancelBuy () {
			let _this = this
			clzConfirm({
				title: '提示',
				content: '取消购买套餐后，该套餐将无法再使用。确认取消购买吗？',
				success: function (res) {
					if (res.confirm||res.index==0) {
					   cancelBuy({
						 id: _this.id
					   }).then(res => {
						 console.log(res)
						 if (res.status == 200) {
						   uni.$emit('refreshBundle',{msg:'页面更新'})
						   _this.message('取消购买成功')
						   uni.navigateBack()
						 } else {
						   _this.message(res.message)
						 }
					   })
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}
	}
};
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.customBundleDetail-wrap {
		padding: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		.cont-list{
			flex: 1;
			overflow-y: scroll;
			> view{
				&:last-child{
					border: 0;
				}
			}
			.check-order-list{
				background: #ffffff;
				padding: 10upx 20upx;
				margin: 15upx 25upx;
				border-radius: 6upx;
				box-shadow: 1px 1px 3px #EEEEEE;
				.check-row{
					display: flex;
					align-items: center;
					padding: 15upx 10upx;
					font-size: 30upx;
					word-break: break-all;
					&:first-child{
						color: #666;
					}
					> view{
						&:first-child{
							flex-grow: 1;
							width: 60%;
						}
					}
					.action{
						margin: 0 6rpx;
						padding: 0 20rpx;
						color: #fff;
					}
					.edit{
						background-color: #f9ba09;
					}
					.view{
						background-color: #ff7801;
					}
					.del{
						background-color: #f72525;
					}
					.finish{
						background-color: #2d8cf0;
					}
					.pay{
						background-color: #10c71e;
					}
					.check-btns{
						width: '50%';
						display: flex;
						align-items: center;
						justify-content: flex-end;
						> view{
							margin-left: 35upx;
							font-size: 28upx;
						}
					}
					.u-tag{
						border-radius: 0;
					}
					.uni-icons{
						margin: 0 5upx;
					}
				}
			}
		}
		.footer{
			padding: 20upx;
		}
		.noDate {
			font-size: 32rpx;
			color: #999;
			text-align: center;
			padding: 60rpx 0;
		}
		.header {
			position: relative;
			background: #FFFFFF;
			padding: 10upx 20upx;
			font-size: 30upx;
		}
		.header-row{
			display: flex;
			align-items: center;
			padding: 10upx 0;
			color: #666666;
			.couponText{
				font-size: 28rpx;
				color: #666;
			}
			&:first-child{
				font-size: 32upx;
				color: #333333;
			}
			> view{
				&:first-child{
					margin-left: 20upx;
				}
				text{
					color: #333333;
				}
			}
		}
		.header-row.r3{
			> view{
				width: 33%;
			}
		}
		.header-row.r2{
			> view{
				width: 50%;
			}
		}
		.img-box > image {
			width: 25%;
			height: 160rpx;
			float: left;
			padding: 20rpx;
		}
		 
		
		.carImage {
			width: 104rpx;
			height: 104rpx;
			text-align: center;
			padding: 15rpx;
		}
		.little-img {
			width: 104rpx;
			height: 104rpx;
		}
		.text {
			font-size: 36rpx;
		}
		
		.text1 {
			color: rab(40, 40, 40);
			font-size: 30rpx;
		}
		 
		.tabs {
			width: 100%;
			background: #fff;
			margin: 20rpx auto 0 auto;
			border-radius: 10rpx;
		}
		
		.need-treament,
		.pay-close,
		.good-condition {
			font-size: 28rpx;
			color: rgb(74, 74, 74);
			display: inline-block;
			text-align: center;
			padding: 20rpx 0;
			width: 25%;
		}
		 
		.need-treament-tab1 {
			margin: 20rpx auto 0 auto;
			background: #fff;
			display: flex;
			border-bottom: 1rpx solid rgb(228, 228, 228);
			width: 100%;
			align-items: center;
		}
		.oil {
			flex-grow: 1;
			padding: 0 16rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
		}
		.jiyou {
			width: 44rpx;
			height: 44rpx;
			margin-right: 16rpx;
		}
		.zhang {
			width: 20%;
		}
		.zhang-logo {
			height: 72rpx;
			width: 110rpx;
			display: inline-block;
		}
		.intruce {
			font-size: 36rpx;
			display: inline-block;
			margin: 36rpx 0 0 -60rpx;
			width: 14%;
			text-align: center;
		}
		
		.list {
			width: 80%;
		}
		
		.matter {
			background: #fff;
			border-bottom: 1rpx dashed rgb(228, 228, 227);
			display: flex;
			padding: 30rpx;
		}
		.matter .red {
			background: #f2711c;
		}
		.matter .blue {
			background: #07cc04;
		}
		.matter .green {
			background: #239ff2;
		}
		.problem {
			font-size: 24rpx;
			background: #fefefe;
			width: 90rpx;
			text-align: center;
			border-radius: 10rpx;
			padding: 6rpx;
			color: #fff;
		}
		
		.num-left {
			width: 20%;
		}
		.num-right {
			width: 80%;
			color: rgb(74, 74, 74);
			padding-top: 6rpx;
		}
		.num-right > view {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}
		.num-right > view:last-child {
			margin-bottom: 0;
		}
		.num-right .uni-badge {
			margin: 0 10rpx;
		}
		.number {
			font-size: 26rpx;
			background: #ccc;
			border-radius: 50rpx;
			text-align: center;
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			margin: 0 8rpx 0 0;
		}
		
		.num-list {
			font-size: 30rpx;
			display: inline-block;
			color: rgb(74, 74, 74);
		}
		
		.cle {
			clear: both;
		}
		
		.instructions-box {
			width: 100%;
			background: #fff;
			margin: 0 auto;
		}
		
		.instructions {
			width: 16%;
			font-size: 24rpx;
			background: rgb(252, 232, 41);
			width: 90rpx;
			text-align: center;
			border-radius: 10rpx;
			color: rgb(74, 74, 74);
			padding: 6rpx;
		}
		
		.elaborate {
			width: 76%;
			font-size: 24rpx;
			color: rgb(74, 74, 74);
			float: right;
			margin: -50rpx 0 30rpx 0;
		}
		
		.int {
			padding: 30rpx 0 0 30rpx;
		}
		
		.del {
			clear: both;
		}
		
		.illustrations {
			width: 100%;
			margin: 0 auto;
		}
		
		.banner {
			width: 100%;
			height: 150rpx;
		}
		
		.horn {
			width: 96%;
			background: #ffffff;
			margin: 10rpx auto 0 auto;
			border-bottom: 1rpx solid rgb(228, 228, 227);
		}
		
		.laba {
			width: 44rpx;
			height: 44rpx;
			margin: 20rpx 0 10rpx 20rpx;
		}
		.uni-collapse-cell__title-text {
			font-size: 24rpx !important;
		}
		.right-text {
			font-size: 24rpx;
		}
		
		.video-box {
			padding: 20rpx;
			text-align: center;
		}
		.horn-text {
			font-size: 36rpx;
			float: right;
			margin: -64rpx 550rpx 0 0;
		}
		
		.instructions-box4 {
			width: 96%;
			background: #fff;
			margin: 30rpx auto 0 auto;
			border-bottom: 1rpx dashed rgb(228, 228, 227);
		}
		
		.condition {
			background: #fff;
			margin: 30rpx auto 0 auto;
		}
		
		.dianchi-img {
			width: 60rpx;
			height: 60rpx;
			background: #aaff7f;
			border-radius: 100%;
			padding: 20rpx;
		}
		
		.battery-box {
			width: 100%;
			padding-bottom: 20rpx;
		}
		
		.bateery {
			font-size: 26rpx;
			padding: 10rpx 0;
		}
		
		.condit-title {
			font-size: 30rpx;
			color: rgb(40, 40, 40);
			border-bottom: 1rpx solid rgb(228, 228, 227);
			padding: 20rpx 0 20rpx 20rpx;
		}
		
		.lis-img {
			display: inline-block;
			width: 25%;
			text-align: center;
			margin: 30rpx 0 0 0;
			color: rgb(74, 74, 74);
		}
		.note {
			padding: 30rpx;
			font-size: 26rpx;
			color: rgb(74, 74, 74);
		}
		
		.note-text {
			padding: 20rpx 0 0 0;
			line-height: 45rpx;
			color: #666;
		}
		.disclaimer {
			padding: 30rpx;
			font-size: 26rpx;
			color: rgb(74, 74, 74);
		}
		.disclaimer > view {
			margin-bottom: 20rpx;
			line-height: 45rpx;
		}
		
		.active {
			border-bottom: 6rpx solid #ff4546;
			color: #ff4546;
		}
		.uni-badge {
			margin: 8rpx 16rpx 0 16rpx;
		}
	}
</style>
