<template>
	<view class="content">

		<view class="whiteBg" style="display: flex;flex-direction: column;margin-top: 20px;">

			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular indicator-dots class="swiper" :autoplay="true" :interval="2000" v-show="swipers.length>0">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="(item,index) in swipers">
					<image :src="item" @click="swiperClick(index)"></image>
				</swiper-item>
			</swiper>

			<view style="display: flex;flex-direction: row;">

				<view class="top_item" @click="topClick('1')">
					<view class="top_item_icon">
						<text class="top_item_icon_num" v-show="dbNum!=0">{{dbNum}}</text>
						<image class="top_item_icon_img" src="https://jianguan.yyundong.com/img/newApp/dbgz.png">
						</image>
					</view>
					<text class="top_item_text">待办工作</text>
				</view>
				<view class="top_item" @click="topClick('2')">
					<view class="top_item_icon">
						<text class="top_item_icon_num" v-show="ybNum!=0">{{ybNum}}</text>

						<image class="top_item_icon_img" src="https://jianguan.yyundong.com/img/newApp/ybgz.png">
						</image>
					</view>
					<text class="top_item_text">已办工作</text>
				</view>
				<view class="top_item" @click="topClick('3')">
					<view class="top_item_icon">
						<text class="top_item_icon_num" v-show="dyNum!=0">{{dyNum}}</text>

						<image class="top_item_icon_img" src="https://jianguan.yyundong.com/img/newApp/dygz.png">
						</image>
					</view>
					<text class="top_item_text">待阅工作</text>
				</view>
				<view class="top_item" @click="topClick('4')">
					<view class="top_item_icon">
						<text class="top_item_icon_num" v-show="yyNum!=0">{{yyNum}}</text>

						<image class="top_item_icon_img" src="https://jianguan.yyundong.com/img/newApp/yygz.png">
						</image>
					</view>
					<text class="top_item_text">已阅工作</text>
				</view>
			</view>

		</view>


		<view style="display: flex;flex-direction: row; align-items: center;" v-show="textArr.length>0">

			<image style="width: 20px;height: 20px;margin-left: 10px;"
				src="https://jianguan.yyundong.com/img/newApp/notices.png" mode="aspectFit"></image>
			<div class="textBox">

				<!-- <transition name="slide">
					<text class="text" :key="text.id" @click="textClick(text)">{{text.val}} </text>
				</transition>
				 -->
				<div class="marquee-wrap">
					<div class="marquee-list" :class="{'animate-up': animateUp}">
						<li v-for="(item, index) in textArr" @click="textClick(item)">{{item}}</li>
					</div>
				</div>

			</div>

		</view>

		<view class="whiteBg" style="display: flex;flex-direction: column;padding-top: 20px;">

			<view style="display: flex;flex-direction: row;margin-left: 20px;align-items: center;">

				<image style="width: 25px;height: 25px;" src="https://jianguan.yyundong.com/img/newApp/icon.png"
					mode="aspectFit"></image>
				<text style="margin-left: 5px;">更多</text>

			</view>

			<view style=" height: 1px;background: #eee;margin-left: 25px;margin-right: 25px;margin-top: 15px;"></view>

			<view style="margin-top: 20px;display: flex;flex-direction: row;width: 100%;margin-bottom: 20px;">

				<view class="centre" @click="businessClick('1')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/ywsp.png" mode="aspectFit">
					</image>
					<text class="centre_text">业务审批</text>
				</view>
				<view class="centre" @click="businessClick('2')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/gzdd.png" mode="aspectFit">
					</image>
					<text class="centre_text">工作调度</text>
				</view>
				<view class="centre" @click="businessClick('3')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/fkgl.png" mode="aspectFit">
					</image>
					<text class="centre_text">风控管理</text>
				</view>
				<view class="centre" @click="businessClick('4')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/sjbb.png" mode="aspectFit">
					</image>
					<text class="centre_text">数据报表</text>
				</view>

			</view>


			<view style="margin-top: 20px;display: flex;flex-direction: row;width: 100%;margin-bottom: 20px;">

				<view class="centre" @click="warehouseClick('1')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/ycgl.png" mode="aspectFit">
					</image>
					<text class="centre_text">云仓管理</text>
				</view>
				<view class="centre" @click="warehouseClick('2')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/kcfx.png" mode="aspectFit">
					</image>
					<text class="centre_text">库存分析</text>
				</view>
				<view class="centre" @click="warehouseClick('3')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/hjjk.png" mode="aspectFit">
					</image>
					<text class="centre_text">环境监控</text>
				</view>
				<view class="centre" @click="warehouseClick('4')">
					<image class="centre_img" src="https://jianguan.yyundong.com/img/newApp/jqrxk.png" mode="aspectFit">
					</image>
					<text class="centre_text">机器人巡库</text>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				dbNum: 0,
				ybNum: 0,
				dyNum: 0,
				yyNum: 0,
				animateUp: false,
				timer: null,
				textArr: [
					// '1 第一条公告',
					// '2 第二条公告第二条公告',
					// '3 第三条公告第三条公告第三条公告第三条公告第三条公告第三条公告第三条公告第三条公告第三条公告'
				],
				number: 0,
				swipers: [
					// 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
					// 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
					// 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
					// 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
					// 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
					// 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
				],

			};
		},
		computed: {
			text() {
				return {
					id: this.number,
					val: this.textArr[this.number]
				}
			}
		},
		mounted() {
			this.startMove()
			this.timer = setInterval(this.scrollAnimate, 1500);
		},
		// onLoad() {

		// },
		onShow() {
			setTimeout(() => {
				if (getApp().globalData.isLogin) {
					var userSid = getApp().globalData.sid
					console.log(">>>>>", userSid)
					this.getData(userSid)
					uni.setTabBarBadge({ //显示数字
						index: 0, //tabbar下标
						text: '100' //数字
					})
				}
			}, 1000)
			// uni.removeTabBarBadge({ //隐藏数字标
			//   index:2
			// })  
			// uni.showTabBarRedDot({ //显示红点
			//   index: 2
			// })
			// uni.hideTabBarRedDot({ //隐藏红点
			//   index:2
			// })
		},
		destroyed() {
			clearInterval(this.timer)
		},

		methods: {
			scrollAnimate() {
				this.animateUp = true
				setTimeout(() => {
					this.textArr.push(this.textArr[0])
					this.textArr.shift()
					this.animateUp = false
				}, 500)
			},

			getData(userSid) {

				// let data = await axios.get('/api/portal/v1/flow/task/'+userSid)
				// 	console.log('data', data)
				var _this = this
				console.log("getData>>>>>", userSid)
				this.$api.getWorkData(userSid).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					this.dbNum = resp.todoNumber
					this.dyNum = resp.pendingWork
					this.textArr = resp.notice
					this.swipers = resp.imageUrl

				}).catch(e => {
					console.log('eeeee', e)
				})
			},

			topClick(index) {
				switch (index) {
					case "1":
						// 待办
						uni.showToast({
							icon: "none",
							title: '待办',
							duration: 2000,
						});
						uni.navigateTo({
							url: '../index/WaitingProcessed'
						});
						break;
					case "2":
						// 已办
						uni.showToast({
							icon: "none",
							title: '已办',
							duration: 2000,
						});
						uni.navigateTo({
							url: '../index/AlreadyProcessed'
						});
						break;
					case "3":
						// 待阅
						uni.showToast({
							icon: "none",
							title: '待阅',
							duration: 2000,
						});
						break;
					case "4":
						// 已阅
						uni.showToast({
							icon: "none",
							title: '已阅',
							duration: 2000,
						});
						break;
					default:
						break;
				}
			},

			startMove() {
				// eslint-disable-next-line
				let timer = setTimeout(() => {
					if (this.number === 2) {
						this.number = 0;
					} else {
						this.number += 1;
					}
					this.startMove();
				}, 2000); // 滚动不需要停顿则将2000改成动画持续时间
			},
			textClick(item) {

				console.log("111", item)
				uni.showToast({
					icon: "none",
					title: '您点击了公告，内容为：' + item,
					duration: 2000,
				});
			},
			swiperClick(index) {

				uni.showToast({
					icon: "none",
					title: '您点击了第' + (index + 1) + "张",
					duration: 2000,
				});
			},

			businessClick(index) {
				switch (index) {
					case "1":
						// 业务审批
						uni.showToast({
							icon: "none",
							title: '业务审批',
							duration: 2000,
						});
						break;
					case "2":
						// 工作调度
						uni.showToast({
							icon: "none",
							title: '工作调度',
							duration: 2000,
						});
						break;
					case "3":
						// 风控管理
						uni.showToast({
							icon: "none",
							title: '风控管理',
							duration: 2000,
						});
						break;
					case "4":
						// 数据报表
						uni.showToast({
							icon: "none",
							title: '数据报表',
							duration: 2000,
						});
						break;
					default:
						break;
				}
			},

			warehouseClick(index) {
				switch (index) {
					case "1":
						// 云仓管理
						uni.showToast({
							icon: "none",
							title: '云仓管理',
							duration: 2000,
						});

						uni.navigateTo({
							url: '../index/WarehouseManagement'
						});

						break;
					case "2":
						// 库存分析
						uni.showToast({
							icon: "none",
							title: '库存分析',
							duration: 2000,
						});
						break;
					case "3":
						// 环境监控
						uni.showToast({
							icon: "none",
							title: '环境监控',
							duration: 2000,
						});
						break;
					case "4":
						// 机器人巡库
						uni.showToast({
							icon: "none",
							title: '机器人巡库',
							duration: 2000,
						});
						break;
					default:
						break;
				}
			},


		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-left: 12px;
		margin-right: 12px;
		padding-bottom: 50px;

		.whiteBg {
			display: flex;
			background-color: white;
			border-radius: 20px;

			.swiper {
				width: 100%;
				height: 200px;
				border-radius: 20rpx;
				overflow: hidden;
				/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
				transform: translateY(0);


				image {
					border-radius: 20rpx;
					width: 100%;
					height: 100%;
				}
			}

			.top_item {
				margin-top: 25px;
				margin-bottom: 20px;
				align-items: center;
				flex: 1;
				display: flex;
				flex-direction: column;

				.top_item_icon {
					// position: relative;
					// width: 50px;
					// height: 50px;
					// margin-bottom: 10px;
					// background-image: url('https://jianguan.yyundong.com/img/newApp/round.png');
					// background-size: 50px 50px;

					position: relative;
					width: 50px;
					height: 50px;

					.top_item_icon_num {
						// position: relative;
						// z-index: 1000;
						// width: 10px;
						// height: 10px;
						// font-size: 6px;
						// background-color: red;
						// border-radius: 50%;
						// padding: 5px;
						// text-align: center;
						// color: white;
						z-index: 1000;
						position: absolute;
						color: white;
						font-size: 12px;
						background-color: red;
						/*height: 24px;改前*/
						min-height: 18px;
						/*改后新增的代码*/
						min-width: 18px;
						/*改后新增的代码*/
						line-height: 18px;
						right: -16%;
						top: -8px;
						text-align: center;
						-webkit-border-radius: 24px;
						border-radius: 24px;
						padding: 2px;
					}

					.top_item_icon_img {
						width: 50px;
						height: 50px;
						// align-items: center;
						// justify-content: center;
						// width: 40px;
						// height: 40px;
					}
				}

				.top_item_text {
					margin-top: 5px;
					color: #101010;
					font-size: 15px;
				}
			}

		}


		.textBox {
			flex: 1;
			margin-right: 10px;

			// .textBox-swiper{
			// 		width: 100%;
			// 	.text {
			// 		font-size: 15px;
			// 		font-weight: 600;
			// 		font-family: sans-serif;
			// 		color: #101010;
			// 		overflow: hidden;
			// 		text-overflow: ellipsis;
			// 		display: -webkit-box;
			// 		-webkit-line-clamp: 1;
			// 		-webkit-box-orient: vertical;
			// 	}

			// }

			.marquee-wrap {
				width: 100%;
				height: 40px;
				overflow: hidden;

				.marquee-list {
					li {
						width: 100%;
						height: 100%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						list-style: none;
						line-height: 40px;
						color: #000;
						font-size: 18px;
						font-weight: 400;
					}
				}

				.animate-up {
					transition: all 0.8s ease-in-out;
					transform: translateY(-40px);
				}
			}
		}


		// .slide-enter-active,
		// .slide-leave-active {
		// 	transition: all 0.5s linear;
		// }

		// .slide-enter {
		// 	transform: translateY(20px) scale(1);
		// 	opacity: 1;
		// }

		// .slide-leave-to {
		// 	transform: translateY(-20px) scale(0.8);
		// 	opacity: 0;
		// }
	}




	.centre {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.centre_img {
			width: 50px;
			height: 50px;
		}

		.centre_text {
			font-size: 15px;
			color: #000;
			margin-top: 5px;
		}
	}
</style>