<template>
	<view class="content">

		<view class="top_">
			<view class="logo_imgs">
				<image src="/static/imgs/logo.png" mode=""></image>
			</view>
			<view class="t_box">
				<view class="d_s">
					<view class="picture_">
						<image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;"
							v-if="userInfo && userInfo.avatar === null" :src="defaultAvatar" mode="scaleToFill"
							@error="avatarErr"></image>
						<image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;" v-else
							:src="userInfo.avatar" mode="scaleToFill" @error="avatarErr"></image>
					</view>
					<view class="">
						<view class="name_">
							{{ userInfo.nickname }}
						</view>
						<view class="bqing_">{{ userInfo.roleNames }}</view>
					</view>
				</view>
				<view class="d_s">
					<view class="icon1" @click="goNotice()">
						<image src="/static/imgs/xiaoxi.png" mode=""></image>
						<view class="msg-num" v-if="noReadNum>0">{{ noReadNum }}</view>
					</view>
					<view class="icon1" @click="showUserDetail">
						<image src="/static/imgs/gengduo.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<view class="three_" @click="goordercount">
			<view class="three_box1">
				<view class="">当日订单</view>
				<view class="num_">{{ threenum.allNum }}</view>
			</view>
			<view class="three_box2">
				<view class="">已完成</view>
				<view class="num_">{{ threenum.ywcNum }}</view>
			</view>
			<view class="three_box3">
				<view class="">未完成</view>
				<view class="num_">{{ threenum.jxzNum }}</view>
			</view>

		</view>
		<view class="hang_"></view>
		<view class="jg_box">
			<view class="jg_top">{{ dateStr || '' }} {{ week || '' }} {{ time || '' }}</view>
			<view class="jg_ds">
				<view class="jg_ys">
					<image src="/static/imgs/jg1.png" mode="" @click="goordermanage"></image>
					<view class="">订单管理</view>
				</view>
				<view class="jg_ys">
					<image src="/static/imgs/jg2.png" mode="" @click="gobusiness"></image>
					<view class="">业务统计</view>
				</view>
				<view class="jg_ys">
					<image src="/static/imgs/jg3.png" mode="" @click="goNotice"></image>
					<view class="">通知公告</view>
				</view>
				<view class="jg_ys" @click="goInternalManagement">
					<image src="/static/imgs/jg4.png" mode=""></image>
					<view class="">内部管理</view>
				</view>
				<view class="jg_ys" @click="show =!show">
					<image src="/static/imgs/jg5.png" mode=""></image>
					<view class="">更多功能</view>
				</view>
			</view>
			<view class="jg_bt" v-if="show">
				<view class="jg_ys1" @click="gorelease()">
					<image src="/static/imgs/jg6.png" mode=""></image>
					<view class="">发布商品</view>
				</view>
				<view class="jg_ys1" @click="goorder()">
					<image src="/static/imgs/jg7.png" mode=""></image>
					<view class="">商品管理</view>
				</view>
				<view class="jg_ys1" @click="gocode">
					<image src="/static/imgs/jg8.png" mode=""></image>
					<view class="">订单核销</view>
				</view>
				<view class="jg_ys1" @click="coupon()">
					<image src="/static/imgs/jg9.png" mode=""></image>
					<view class="">优惠券</view>
				</view>
				<view class="jg_ys1" @click="goPresent">
					<image src="/static/imgs/jg10.png" mode=""></image>
					<view class="">使用说明</view>
				</view>
			</view>
			<view class="jg_bt" style="" v-if="show">
				<view class="jg_ys1" @click="goemployees()">
					<image src="/static/imgs/staffcounnt.png" mode=""></image>
					<view class="">员工统计</view>
				</view>
				<view class="jg_ys1" @click="goneworderStatistic()">
					<image src="/static/imgs/dayorder.png" mode=""></image>
					<view class="">当日订单统计</view>
				</view>
				<view class="jg_ys1" style="width: 180rpx;">
				</view>
				<view class="jg_ys1" style="width: 180rpx;">
				</view>
			</view>
		</view>
		<view class="hang_"></view>
		<view class="list_">
			<view class="title_">预约记录</view>
			<view style="margin-bottom: 30rpx;">
				<u-search placeholder="请输入车牌号或手机号" v-model="phoneNum" @search="pageNum=1;goodsList=[];getappointment()"
					@custom="pageNum=1;goodsList=[];getappointment()" @change="clearTime()"></u-search>
			</view>
			<view v-if="goodsList.length == 0" style="background-color: #F7F8FC;padding: 35rpx 0;">
				<u-empty mode="list" icon="http://www.nuoyunr.com/lananRsc/detection/qs.png">
				</u-empty>
			</view>
			<!-- 使用 scroll-view 包裹 SchoolInfo 组件 -->
			<scroll-view class="school-scroll-view" scroll-y @scrolltolower="onReachBottomCus"
				:style="{ height: scrollHeight + 'px' }" refresher-enabled @refresherrefresh="onRefresherrefresh"
				:refresher-triggered="isTriggered" v-else>
				<view class="box_" v-for="(item,index) in goodsList" :key="index">
					<view style="display: flex;justify-content: space-between;">
						<view class="box_ds">
							<view class="box_title">{{ item.goodsTitle }}</view>
							<u-tag :text="item.skuName" plain size="mini" style=" height: 44rpx; "></u-tag>
							<!--          <image src="/static/imgs/ns.png"  mode=""></image>-->
						</view>
						<view style="color:#3c9cff;" @click="goAddOrder(item)" v-if="!item.orderId">
							转订单
						</view>

					</view>

					<view class="box_bd">
						<view class="box_ds">
							<image src="/static/imgs/car.png" style="width: 36rpx; height: 36rpx; " mode=""></image>
							<view class="size_">车牌号：{{ item.carNo || '' }}</view>
						</view>
						<image src="/static/imgs/tel.png" style="width: 36rpx; height: 36rpx; " @click="gettel(item)"
							mode=""></image>
					</view>
					<view class="bd">
						<view class="left_">预约人</view>
						<view class="right_">{{ item.buyName }}</view>
					</view>
					<view class="bd">
						<view class="left_">电话</view>
						<view class="right_">{{ item.buyPhoneNum }}</view>
					</view>
					<view class="bd">
						<view class="left_">预约时间</view>
						<view class="right_">{{ formatDateChinese(item.appointmentDay) }}</view>
					</view>
					<view class="bd">
						<view class="left_">客户来源</view>
						<view class="right_">自来客户</view>
					</view>
					<view class="bd">
						<view class="" style="color:rgb(60, 156, 255);" @click="previewImage(item.driverLicenesImg)"
							v-if="item.driverLicenesImg">查看行驶证</view>
					</view>
				</view>
			</scroll-view>

		</view>
		<!-- 底部 -->
		<view style="width: 100%; height: 50px;"></view>
		<tabBar :msg="msg "></tabBar>
	</view>
</template>

<script>
	import {
		getStorageWithExpiry,
		setStorageWithExpiry
	} from "@/utils/auth";
	import request from "@/utils/request";
	import config from "@/config";
	import {
		formatDateChinese
	} from "@/utils/utils";

	export default {
		data() {
			return {
				titles: "首页",
				msg: "1",
				List: [],
				show: false,
				status: 'loading',
				warnMsg: [],
				chuan: '',
				titlemodeal: '通知',
				phoneNum: '',
				isWorking: false,
				user: {},
				baseUrl: '',
				animate: false,
				partnerId: '',
				threenum: {},
				showScroll: true,
				scrollDuration: 3000, // 滚动间隔时间，单位为毫秒
				items: [],
				ping: [],
				dateStr: '',
				week: '',
				time: '',
				is_mandatory: false,
				url: 'http://159.75.168.143:88/apk/lanan.apk',
				title: '版本升级',
				contents: '新版本上线了，根据您自己的选择是否升级',
				appAndPick: {
					appointNum: 0,
					pickNum: 0
				},
				baseImageUrl: this.$baseImageUrl,
				noReadNum: 1,
				userInfo: {},
				defaultAvatar: require('@/static/icons/avatar.png'),
				goodsList: [],
				pageNum: 1,
				pageSize: 10,
				totalPages: 0,
				timer: null,
				timer2: null,
				isTriggered: false,
				scrollHeight: 0,
			}
		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.partnerId = uni.getStorageSync('partnerId')
			this.getUserInfo()
			this.getindex()
			// this.getwarnMsglist()
			this.getbottom()
			this.getUserInfo()
			this.getWarnCount()
			this.getAppointAndPickNum()

			let that = this
			this.timer = setInterval(function() {
				that.getappointment()
			}, 10000);
			this.setTime = setInterval(() => {
				this.timeWeekFormat();
			}, 1000);

		},
		onHide() {
			clearInterval(this.timer);
			this.timer = null
			clearInterval(this.setTime);
			this.setTime = null
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
			clearInterval(this.setTime);
			this.setTime = null;
		},
		onLoad() {
			this.partnerId = uni.getStorageSync('partnerId')
			this.getUserInfo()
			this.getindex()
			// this.getwarnMsglist()
			this.getbottom()
			this.getUserInfo()
			this.getWarnCount()
			this.getAppointAndPickNum()
			setTimeout(() => {
				this.getappointment()
			}, 1000)
			// this.getappointment()

		},
		// onPullDownRefresh() {
		// 	console.log("刷新");
		// 	uni.stopPullDownRefresh()
		// },
		// onReachBottom() {
		// 	if (this.pageNum >= this.totalPages) {
		// 		uni.showToast({
		// 			title: '没有下一页数据',
		// 			icon: 'none'
		// 		})
		// 	} else {
		// 		this.pageNum++
		// 		this.getappointment()
		// 		clearInterval(this.timer);
		// 		this.timer = null;
		// 	}
		// },// onPullDownRefresh() {
		// 	console.log("刷新");
		// 	uni.stopPullDownRefresh()
		// },
		// onReachBottom() {
		// 	if (this.pageNum >= this.totalPages) {
		// 		uni.showToast({
		// 			title: '没有下一页数据',
		// 			icon: 'none'
		// 		})
		// 	} else {
		// 		this.pageNum++
		// 		this.getappointment()
		// 		clearInterval(this.timer);
		// 		this.timer = null;
		// 	}
		// },
		onReady() {
			// 动态计算滚动区域高度
			this.calculateScrollHeight();
		},

		methods: {
			formatDateChinese,
			calculateScrollHeight() {
				// 获取屏幕高度
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				// 获取顶部区域高度
				const topHeight = 360;
				// 计算滚动区域高度
				this.scrollHeight = screenHeight - topHeight;
			},
			clearTime() {
				console.log('只能够了');
				clearInterval(this.timer);
				this.timer = null;
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.pageNum >= this.totalPages) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.pageNum++
				//此处调用自己获取数据列表的方法
				this.getappointment()
				// 清理定时器
				this.clearTime()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.pageNum = 1
				this.total = 0
				this.schoolList = []
				this.getappointment()
			},
			goInternalManagement() {
				uni.navigateTo({
					url: '/pages/manage/internalManagement'
				})
				this.clearMyInterval()
			},
			previewImage(imgUrl) {
				uni.previewImage({
					urls: [this.baseImageUrl + '/' + imgUrl], // 图片数组，可以预览多张
					current: this.baseImageUrl + '/' + imgUrl, // 当前要显示的图片
					indicator: "default", // 显示指示点
					loop: true // 是否可循环预览
				});
			},
			goAddOrder(data) {
				uni.navigateTo({
					url: `/pages/index/Neworder?appointmentId=${data.id}`
				})
				this.clearMyInterval()
			},
			clearMyInterval() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			goordermanage() {
				uni.navigateTo({
					url: '/pages/index/ordermanage'
				})
				this.clearMyInterval()
			},
			goNotice() {
				uni.navigateTo({
					url: '/pages/xiaoxi/notice'
				})
				this.clearMyInterval()
			},
			goordercount() {
				uni.navigateTo({
					url: '/pages/index/neworderStatistic'
				})
				this.clearMyInterval()
			},
			goback() {
				uni.navigateBack()
			},
			goorder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
				this.clearMyInterval()
			},
			coupon() {
				uni.navigateTo({
					url: '/pages/coupon/coupon'
				})
				this.clearMyInterval()
			},
			gocode() {
				uni.navigateTo({
					url: "/pages/my/rwm",
				})
				this.clearMyInterval()
			},
			gohomecar() {
				uni.navigateTo({
					url: "/pages/index/homecar",
				})
				this.clearMyInterval()
			},
			goPresent() {
				if (!this.present?.filePath) {
					uni.showToast({
						title: '暂无使用说明',
						icon: 'none'
					})
					return
				}
				let old = this.present.filePath
				if (old[0] !== '/') {
					old = "/" + old
				}
				uni.downloadFile({
					url: this.$baseImageUrl + old,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {}
						});
					}
				});
			},
			gorelease() {
				uni.navigateTo({
					url: '/pages/Tollannouncement/Tollannouncement'
				})
				this.clearMyInterval()
			},
			goemployees() {
				uni.navigateTo({
					url: '/pages/index/countEmployees'
				})
				this.clearMyInterval()
			},
			goneworderStatistic() {
				uni.navigateTo({
					url: '/pages/index/orderStatistics'
				})
				this.clearMyInterval()
			},
			gobusiness() {
				uni.navigateTo({
					url: '/pages/statistics/business'
				})
				this.clearMyInterval()
			},
			gettel(num) {
				const value = num.buyPhoneNum
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			showUserDetail() {
				uni.navigateTo({
					url: '/pages/index/UserInfo'
				})
				this.clearMyInterval()
			},
			avatarErr(err) {
				console.log('err', err)
				this.userInfo.avatar = this.defaultAvatar
			},
			goWarn() {
				uni.navigateTo({
					url: '/pages/xiaoxi/xiaoxi?index=1'
				})
				this.clearMyInterval()
			},
			getUserInfo() {
				let roleNames = getStorageWithExpiry("roleNames")
				if (!roleNames) {
					request({
						url: '/inspection/util/getRoleName',
						method: 'get'
					}).then(res => {
						roleNames = res.data
						setStorageWithExpiry("roleNames", roleNames)
					})
				}
				const data = getStorageWithExpiry("userInfo")
				if (!data) {
					request({
						url: '/system/user/profile/get',
						method: 'get'
					}).then(res => {
						this.userInfo = res.data
						if (this.userInfo.avatar) {
							this.userInfo.avatar = config.baseImageUrl + this.userInfo.avatar
						}
						this.userInfo.roleNames = roleNames
						setStorageWithExpiry("userInfo", this.userInfo)
					})
				} else {
					this.userInfo = data
				}
			},
			getWarnCount() {
				request({
					url: '/warnMsg/warnMsg/getCount',
					method: 'get',
				}).then(res => {
					if (res.data) {
						this.noReadNum = res.data
					}
				})
			},
			async getAppointAndPickNum() {
				let res = await request({
					url: '/partnerOwn/partner/getAppointAndPickNum',
					method: 'get'
				})
				if (res.code == 200) {
					this.appAndPick = res.data
				}
			},
			// 底部消息
			async getbottom() {
				let data = {
					partnerId: uni.getStorageSync('partnerId')
				}
				let res = await request({
					url: '/appInspection/news/newMsgNum',
					method: 'get',
					params: data
				})
				if (res.code == 200) {
					this.chuan = res.data
				}
			},
			async getindex() {
				// 首页信息
				let res = await request({
					url: '/partnerOwn/partner/shopInfo',
					method: 'get',
				})
				this.user = res.data
				this.partnerId = res.data.partnerId
				uni.setStorageSync('partnerId', res.data.partnerId)
				if (res.data.isWorking == "0") {

					this.isWorking = false
				}
				if (res.data.isWorking == "1") {
					this.isWorking = true
				}
				// 中间统计
				let reszj = await request({
					url: '/partnerOwn/partner/staticsTable2',
					method: 'get',
					pamars: {
						startTime: new Date(),
						endTime: new Date()
					}
				})
				// let nums = {
				// 	orderAmount: reszj.data.orderAmount / 100,
				// 	orderNum: reszj.data.orderNum,
				// 	todayOrderAmount: reszj.data.todayOrderAmount / 100,
				// 	todayOrderNum: reszj.data.todayOrderNum,
				// 	workedNum: reszj.data.workedNum,
				// 	workingNum: reszj.data.workingNum,
				// 	srlNum: reszj.data.srlNum,
				// 	hgNum: reszj.data.hgNum,
				// 	uncompletedNum: reszj.data.uncompletedNum,

				// }
				this.threenum = reszj.data


				// 下方订单信息
				// let resxf = await request({
				// 	url:'/partnerOwn/partner/orderInfo?partnerId='+this.partnerId,
				// 	method: 'get',
				// })
				// this.items = resxf.data
				// 热销产品
				let resrx = await request({
					url: '/partnerOwn/partner/hotGoodsList?partnerId=' + this.partnerId,
					method: 'get',
				})
				this.ping = resrx.data
				// this.getswitch()
			},
			//预约记录
			async getappointment() {
				// 首页信息
				let data = {
					partnerId: this.partnerId,
					phoneNum: this.phoneNum,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				let res = await request({

					url: '/partnerOwn/partner/getAppointmentList',
					method: 'get',
					params: data
				})
				if (res.code == 200) {
					if (this.pageNum == 1) {
						this.goodsList = res.rows
					} else {
						this.goodsList = this.goodsList.concat(res.rows)
					}
					let total = res.total
					this.totalPages = Math.ceil(total / this.pageSize);
				}
				this.isTriggered = false
			},
			timeWeekFormat() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, "0");
				const day = String(now.getDate()).padStart(2, "0");
				const hours = String(now.getHours()).padStart(2, "0");
				const minutes = String(now.getMinutes()).padStart(2, "0");
				const seconds = String(now.getSeconds()).padStart(2, "0");
				const dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				const dayCycle = dayCycleArray[now.getDay()];

				const dateStr = `${year}-${month}-${day}`;
				const week = `星期${dayCycle}`;
				const time = `${hours}:${minutes}:${seconds}`;

				this.dateStr = dateStr;
				this.week = week;
				this.time = time;
			}

		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.content {}


	.top_ {
		width: 100%;
		height: 284rpx;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
		box-sizing: border-box;
		padding: 30rpx;
		padding-top: 80rpx;
	}

	.logo_imgs {
		width: 160rpx;
		height: 40rpx;
		margin: 20rpx 0rpx;

	}

	.t_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.picture_ {
		overflow: hidden;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.d_s {
		display: flex;

	}

	.name_ {
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}

	.bqing_ {
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;
		box-sizing: border-box;
		color: #FFFFFF;
		font-size: 22rpx;

		padding: 2px 5px;
	}

	.icon1 {
		position: relative;
		width: 56rpx;
		height: 56rpx;
		margin-left: 30rpx;

		.msg-num {
			position: absolute;
			right: -15rpx;
			color: white;
			background: #d74a43;
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			font-weight: 800;
			font-size: 11px;
			border-radius: 50%;
			top: -15rpx;
		}
	}

	.three_ {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jg_box {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.list_ {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.three_box1 {
		width: 216rpx;
		height: 116rpx;
		background-image: url('/static/imgs/t1.png');
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 14rpx 18rpx;
		font-size: 24rpx;
		color: #101A3E;

	}

	.three_box2 {
		width: 216rpx;
		height: 116rpx;
		background-image: url('/static/imgs/t2.png');
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 14rpx 18rpx;
		font-size: 24rpx;
		color: #101A3E;
	}

	.three_box3 {
		width: 216rpx;
		height: 116rpx;
		background-image: url('/static/imgs/t3.png');
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 14rpx 18rpx;
		font-size: 24rpx;
		color: #101A3E;
	}

	.num_ {
		font-size: 36rpx;
		color: #101A3E;
		margin-top: 20rpx;
	}

	.hang_ {
		width: 100%;
		height: 30rpx;
		background: #F7F8FC;
	}

	.jg_top {
		font-size: 32rpx;
		color: #000000;
		box-sizing: border-box;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #F5F5F5;
	}

	.jg_ds {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		border-bottom: 1px solid #F5F5F5;
	}

	.jg_bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
	}

	.jg_ys {
		font-size: 24rpx;
		color: #101A3E;
		text-align: center;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 5rpx;
		}
	}

	.jg_ys1 {
		font-size: 24rpx;
		color: #101A3E;
		text-align: center;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 5rpx;
		}
	}

	.title_ {
		font-size: 32rpx;
		color: #000000;
		margin-bottom: 30rpx;
	}

	.box_ {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background: #F7F8FC;
		border-radius: 8rpx;
		margin-bottom: 30rpx;

	}

	.box_ds {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.box_bd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E3ECFB;
	}

	.bd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		margin: 20rpx 0rpx;
	}

	.box_title {
		font-size: 32rpx;
		color: #101A3E;
		margin-right: 10rpx;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
	}

	.size_ {
		font-size: 24rpx;
		color: #366FFF;
		margin-left: 10rpx;

	}

	.left_ {
		font-size: 28rpx;
		color: #8D90A6;
	}

	.right_ {
		font-size: 28rpx;
		color: #101A3E;
	}
</style>