<template>
	<view>
		<image src="../../../static/beijing.png" class="background" mode=""></image>
		<!-- 整个页面大小 -->
		<!-- <view class="whole"> -->
		<!-- tab选项卡 -->
		<view class="end-title">
			　　<view @tap="change(0)" :class="{btna:btnnum == 0}" class="a" style="border-left: 0;">
				{{reservationDetails}}
			</view>
			　<view @tap="change(1)" :class="{btna:btnnum == 1}" class="a">{{reserved}}</view>
			　　<view @tap="change(2)" :class="{btna:btnnum == 2}" class="a">{{completed}}</view>
			<view @tap="change(3)" :class="{btna:btnnum == 3}" class="a">{{cancelled}}</view>
		</view>
		<view class="end-cont one-0" :class="{dis:btnnum == 0}">
			<ul class="ul">
				<li class="li li-one">
					<text>头像</text>
					<text>微信名</text>
					<text>ID编号</text>
					<text>手机号码</text>
				</li>
				<li class="li li-two" v-for="(item,index) in list" :key="index">
					<!-- <text>{{item.UserPhone}}</text> -->
					<image :src="item.beijintupian" style="width: 30px;height: 30px;"></image>
					<text>{{item.username}}</text>
					<text>{{item.id}}</text>
					<text>{{item.phone}}</text>
				</li>
			</ul>

		</view>
		<view class="end-cont" :class="{dis:btnnum == 1}">
			　<ul class="ul">
				<li class="li li-one">
					<text>头像</text>
					<text>微信名</text>
					<text>电话</text>
					<text>预约时间</text>
				</li>
				<li class="li li-two" v-for="(item,index) in CustomerList" :key="index">
					<image :src="item.beijintupian" style="width: 30px;height: 30px;"></image>
					<text>{{item.RecordName}}</text>
					<text>{{item.RecordPhone}}</text>
					<text>{{item.RecordTime}}</text>
				</li>
			</ul>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 2}">
			　<ul class="ul">
				<li class="li li-one">
					<text>头像</text>
					<text>微信名</text>
					<text>电话</text>
					<text>预约时间</text>
				</li>
				<li class="li li-two" v-for="(item,index) in CustomerList" :key="index">
					<image :src="item.beijintupian" style="width: 30px;height: 30px;"></image>
					<text>{{item.RecordName}}</text>
					<text>{{item.RecordPhone}}</text>
					<text>{{item.RecordTime}}</text>
				</li>
			</ul>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 3}">
			<ul class="ul">
				<li class="li li-one">
					<text>头像</text>
					<text>微信名</text>
					<text>电话</text>
					<text>预约时间</text>
				</li>
				<li class="li li-two" v-for="(item,index) in CustomerList" :key="index">
					<image :src="item.beijintupian" style="width: 30px;height: 30px;"></image>
					<text>{{item.RecordName}}</text>
					<text>{{item.RecordPhone}}</text>
					<text>{{item.RecordTime}}</text>
				</li>
			</ul>
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
	import utils from '../../../service/utils.js'
	export default {
		data() {
			return {
				form: {
					"ParentUserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				list: [],
				// 获取客户预约明细
				PointList: [],
				// 根据状态展示预约列表
				modelCuStomer: {
					"UserId": 0,
					//  预约状态 = ['0', '1', '2'],
					"RecordState": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "id",
						"Type": 0
					}]
				},
				// 根据状态查询的预约列表数据
				CustomerList: [],
				btnnum: 0,
				one: 1,
				reservationDetails: "进入明细",
				reserved: "已预约",
				completed: "已完成",
				cancelled: "已取消"
			}
		},
		onLoad(data) {
			console.log('wwww',data)
			let datas = JSON.parse(decodeURIComponent(data.usermodel))
			console.log('刷啊啊',datas)
			this.form.ParentUserId=datas.id
			this.modelCuStomer.UserId = datas.id
			// 获取客户进入明细
			this.ShowUserList()
			// 根据状态展示预约列表
			// this.ShowGetRecordByCustomer()
		},
		methods: {
			ShowUserList() {
				// let jsonstorage = uni.getStorageSync('userinfo').data
				// this.form.ParentUserId = jsonstorage.id
				this.API.GetUserList(this.form).then(res => {
					console.log('数据', res)
					if (res.data.data.total == 0) {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					} else {
						res.data.data.rows.forEach((item, index) => {
							item.phone = item.phone.substr(0, 3) + '****' + item.phone.substr(7)
						})
						this.list = res.data.data.rows
					}
					console.log('数据', this.list)
				})
			},
			// 获取客户预约明细
			ShowPointMent() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				this.API.GetUserCustomerView({
					UserId: jsonstorage.id
				}).then(res => {
					console.log('预约列表数据', res)
					// this.PointList=res.data.data
					this.PointList = res.data
					// console.log('ww',this.poin)
					// res.data.data.rows.forEach((item,index)=>{
					// 	item.AddTime=utils.formatTime(item.AddTime,"yyyy-MM-dd HH:mm:ss")
					// 	item.UpdateTime=utils.formatTime(item.UpdateTime,"yyyy-MM-dd HH:mm:ss")
					// 	item.RecordTime=utils.formatTime(item.RecordTime,"yyyy-MM-dd HH:mm:ss")
					// })
					// this.PointList=res.data.data.rows
					// console.log('pointlist',this.PointList)

				})
			},
			// 根据状态展示预约列表
			ShowGetRecordByCustomer() {
				this.API.GetRecordByCustomer(this.modelCuStomer).then(res => {
					console.log('根据状态获取预约列表', res)
					res.data.data.rows.forEach((item, index) => {
						item.RecordTime=utils.formatTime(item.RecordTime,"yyyy-MM-dd HH:mm:ss")
						if(item.State!=1){
							item.RecordPhone = item.RecordPhone.substr(0, 3) + '****' + item.RecordPhone.substr(7)
							}
					})
					this.CustomerList = res.data.data.rows
					this.modelCuStomer.TotalCount = res.data.data.TotalCount
					console.log('customerlist', this.CustomerList)
				})
			},
			change(e) {
				this.btnnum = e
				let jsonstorage = uni.getStorageSync('userinfo')
				if(this.btnnum==0){
					this.ShowUserList()
					return
				}else if (this.btnnum == 1) {
					// 已预约
					this.modelCuStomer.RecordState = 0
				} else if (this.btnnum == 2) {
					// 已完成
					this.modelCuStomer.RecordState = 2
				} else if (this.btnnum == 3) {
					// 已取消
					this.modelCuStomer.RecordState = 1
				}
				this.ShowGetRecordByCustomer()
				console.log(this.btnnum)
			},


		}
	}
</script>

<style>
	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		/* border-radius:50% 50% 0 0 ; */
		background-size: 100% 100%;
		z-index: -1;
	}

	/* tab选项卡 */
	.end-title {
		display: flex;
		/* flex-direction: row; */
		justify-content: space-around;
		align-items: center;
		background-color: #1f1f1f;
		color: #a59e7a;
		font-size: 21rpx;
		width: 780rpx;
		height: 84rpx;
	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
	}

	.end-cont {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #f9f9f9;
		font-size: 26rpx;
		display: none;
	}

	.btna {
		color: #f5eab3;
		font-size: 26rpx;
		/* border-bottom: 4rpx solid #ebc68d; */
		/* padding-bottom: 8rpx; */
		width: 80rpx;
	}

	.btna::after {
		display: block;
		content: '';
		width: 80rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: #F7F7F7;
		position: absolute;
		top: 68rpx;

	}

	.dis {
		display: block;
	}

	/* 样式1*/
	.a {
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: #f5eab3 2rpx solid;
		text-align: center;
		width: 25%;
		height: 35rpx;
		/* border-bottom: 2rpx solid #f5eab3; */

		/* line-height: 84rpx; */
	}

	/* 内容整体布局 */
	.ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* border-right: #007AFF solid 40rpx; */
	}

	.li {
		width: 100%;
		height: 63rpx;
		align-items: center;
		display: flex;
		justify-content: space-around;
		color: #f5eab3;
	}

	.li-one {
		width: 780rpx;
		height: 76rpx;
		background-color: #1f1f1f;
		display: flex;
		align-items: center;
	}
</style>
