<template>
	<div class="body" :style="{background: 'url('+ this.url +')'}">
		<div class="sweiper">
			<swiper 
			class="swipera" 
			previous-margin="40rpx" 
			next-margin="40rpx" 
			:indicator-dots="true" 
			:autoplay="true"
			:interval="3000" 
			:duration="1000">
				<swiper-item v-for="(item,index)  in Conditions" :key="item.advertId">
					<div class="swiper-item">
						<image @click="navToo(item)" :src="item.advertImg==null||''?imga:baseUrl+item.advertImg"
							@error="imageErrora($event, index)" mode=""></image>
					</div>
				</swiper-item>
			</swiper>
		</div>
		<div class="notice" v-if="noticeshow">
			<image src="../../static/xx_icon_bell.png" mode=""></image>
			<div style="width: 600rpx;">
				<text class="animate">{{msgCotent}}</text>
			</div>
		</div>
		<div class="content">
			<div class="content-item" v-for="(item,index) in images" :key="item.id" @click="navTo(item)">
				<image :src="item.moduleIcon==null||''?img:baseUrl+item.moduleIcon" @error="imageError($event, index)"
					mode=""></image>
				<text>{{item.moduleName}}</text>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				noticeshow: true,
				imga: "../../static/nav_bn@3x.png",
				img: "../../static/function_icon_blank.png",
				form: {},
				msgCotent: "",
				modulesInfo: {
					"platFormModuleBOList": [{
							"modelKey": "2",
							"menuAlias": "订单模块2",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						}, {
							"modelKey": "4",
							"menuAlias": "用户模块4",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStr"
						},
						{
							"modelKey": "5",
							"menuAlias": "订单模块5",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "6",
							"menuAlias": "支付模块6",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						}, {
							"modelKey": "7",
							"menuAlias": "用户模块7",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStr"
						},
						{
							"modelKey": "8",
							"menuAlias": "订单模块8",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "9",
							"menuAlias": "支付模块9",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						}, {
							"modelKey": "10",
							"menuAlias": "用户模块10",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStr"
						},
						{
							"modelKey": "11",
							"menuAlias": "订单模块11",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "12",
							"menuAlias": "支付模块12",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						}, {
							"modelKey": "13",
							"menuAlias": "订单模块13",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "14",
							"menuAlias": "支付模块14",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "15",
							"menuAlias": "支付模块15",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						}, {
							"modelKey": "16",
							"menuAlias": "订单模块16",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "17",
							"menuAlias": "支付模块17",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "18",
							"menuAlias": "订单模块18",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "19",
							"menuAlias": "支付模块19",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "20",
							"menuAlias": "支付模块20",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "21",
							"menuAlias": "支付模块21",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "22",
							"menuAlias": "支付模块22",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "23",
							"menuAlias": "支付模块23",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "22",
							"menuAlias": "支付模块22",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "24",
							"menuAlias": "支付模块23",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						},
						{
							"modelKey": "25",
							"menuAlias": "支付模块23",
							"modelBaseUrl": "127.0.0.1",
							"modelMenuLaunchUrl": "/getStrorder"
						}
					],
					"appId": "11",
					"appName": "32",
					"versionName": ""
				},
				baseUrl: "http://192.168.60.38:8090",
				Conditions: [],
				images: [],
				listall: [],
				url: "../../static/promo1.png",
				ziyUrl: "",
				num: 15,
			}
		},
		onLoad() {
			this.baseUrl = getServerUrl();
			this.modulesInfo.platFormModuleBOList = getAllModelData();
			this.form = getAPPVersionInfo();
			// this.form = {
			// 	"versionName": "1.0.0",
			// 	"versionCode": "1",
			// 	"appId": "11111",
			// 	"appName": "测试项目1111",
			// 	"versionName": "1.0.0"
			// }
			this.modulesInfo.appId = this.form.appId;
			this.modulesInfo.versionName = this.form.versionName;
			this.modulesInfo.appName = this.form.appName;
			this.getlistByCondition();
			this.addModuleInfoaa();
			this.getHeadCondition();
			this.getNotifyByAccount();
		},
		onShow() {
			this.getlistByCondition();
			this.addModuleInfoaa();
			this.getHeadCondition();
			this.getNotifyByAccount();

		},
		methods: {

			//通知
			async getNotifyByAccount() {
				const res = await this.$myRequest({
					url: '/cdhomeNotice/listByCondition?appId=' + this.modulesInfo.appId
				})
				if (res.data.data[0]) {
					this.msgCotent = res.data.data[0].noticeContent
				} else {
					this.noticeshow = false
				}

			},

			imageErrora(e, index) {
				this.Conditions[index]['advertImg'] = null;
			},
			imageError(e, index) {
				this.images[index]['moduleIcon'] = null;
			},
			navToo(item) {
				if (item.advertToType != 3) {
					let allUrl = item.advertToInfo
					uni.navigateTo({
						url: "../web-div/web-diva?severUrl=" + allUrl
					})
				} else if (item.advertToType == 3) {
					console.log(2222)
				}
			},
			navTo(item) {
				if (item.moduleUrl) {
					let allUrl = this.baseUrl + item.moduleUrl
					// uni.navigateTo({
					// 	url: "../web-div/web-div?severUrl=" + allUrl
					// })
					startNewUi(allUrl)
				} else {
					uni.showToast({
						title: " 该模块在开发中!",
						icon: 'none'
					})
				}

			},
			//轮播图
			async getlistByCondition() {
				const res = await this.$myRequest({
					url: '/cdhomeAdvert/listByCondition?advertClientType=' + this.modulesInfo.appId,
				})
				this.Conditions = res.data.data;
			},
			//背景图
			async getHeadCondition() {
				const res = await this.$myRequest({
					url: '/cdhomeHead/listByCondition?appId=' + this.modulesInfo.appId,
				})
				//this.url =this.baseUrl + res.data.data[0].headImg
				if (res.data.data[0]) {
					this.url = res.data.data[0].headImg
				}
			},
			async cdhomeSet() {
				const res = await this.$myRequest({
					url: '/cdhomeSet/listByCondition?appId=' + this.modulesInfo.appId,
				})
				if (res.data.data) {
					this.ziyUrl = this.baseUrl + res.data.data[0].appModuleUrl
					if (res.data.data[0].appModuleNum) {
						this.num = res.data.data[0].appModuleNum
					}

				}
			},

			async addModuleInfoaa() {
				const res = await this.$myRequest({
					url: '/cdhomeModule/addModuleInfo',
					method: "post",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					data: this.modulesInfo
				})
				this.listall = res.data.data;
				this.images = res.data.data;
				// this.images = res.data.data.filter(item => {
				// 	return item.homeIsShow == 1
				// })
			},
			morelist() {
				uni.navigateTo({
					url: "./addinfo"
				})
			},
			addinfo() {
				uni.navigateTo({
					url: "./addinfo"
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	.body {
		background-repeat: no-repeat !important;
		background-size: 100% 400rpx !important;
		
		
		

		.sweiper {
			width: 100%;
			height: 320rpx;
			margin: 0rpx auto;
			padding-top: 200rpx;

			.swipera {
				indicator-color: #F7CBC8;
				indicator-active-color: #F07C9A;

				.swiper-item {
					image {
						padding: 0 2%;
						width: 96%;
					}
				}

			}
		}

		.notice {
			display: flex;
			width: 92%;
			margin: 10rpx auto;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}


			.animate {
				padding-right: 32rpx;
				font-size: 36rpx;
				color: #000;
				text-align: center;
				display: inline-block;
				white-space: nowrap;
				animation: 10s wordsLoop linear infinite normal;
				// width: 600rpx;
			}

			@keyframes wordsLoop {
				0% {
					transform: translateX(600rpx);
					-webkit-transform: translateX(600rpx);
				}

				100% {
					transform: translateX(calc(-100%+400rpx));
					-webkit-transform: translateX(calc(-100%+400rpx));
				}
			}

			@-webkit-keyframes wordsLoop {
				0% {
					transform: translateX(600rpx);
					-webkit-transform: translateX(600rpx);
				}

				100% {
					transform: translateX(calc(-100%+400rpx));
					-webkit-transform: translateX(calc(-100%+400rpx));
				}
			}
		}

		.tianqi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 94%;
			margin: 10rpx auto;
			font-size: 30rpx;
			font-weight: 600;
			color: #203354;

			.tianqib {
				display: flex;
			}
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			margin: 20rpx auto;

			.content-item {
				width: 20%;
				display: flex;
				flex-direction: column;
				font-size: 20rpx;
				margin: 16rpx;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					width: 120rpx;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}
		}

		.tatle {
			display: flex;
			width: 96%;
			align-items: center;
			margin: 10rpx auto;
			justify-content: space-between;

			.title {
				font-size: 40rpx;
				font-weight: 700;
			}

			.titleb {
				border: 1rpx solid #EC8BA8;
				color: #EC8BA8;
				padding: 0rpx 20rpx;
				border-radius: 30rpx;
				font-size: 30rpx;

				picker {
					.uni-input {
						display: flex;
						justify-content: space-between;

						.image {
							margin-top: 5rpx;

							image {
								width: 30rpx;
								height: 30rpx;
							}

						}
					}
				}

			}

		}

		.contentC {
			margin: 10rpx 60rpx;
			font-size: 30rpx;
			font-weight: 600;
		}

		.contentA {
			width: 92%;
			margin: 30rpx auto;
			background-color: #F4F5F7;
			border-radius: 40rpx;
			display: flex;
			flex-direction: column;

			.contentB {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 30rpx;

				.A {
					margin-left: 30rpx;
					padding-top: 20rpx;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.B {
					width: 260rpx;
					font-size: 26rpx;

					.a {
						font-size: 30rpx;
					}

					.b {
						color: #CFD4DB;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.C {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					font-size: 26rpx;
					margin-left: 120rpx;

					.a {
						font-size: 30rpx;
					}

					.b {
						color: #CFD4DB;
					}
				}
			}

		}

		.sweipert {
			width: 100%;
			height: 800rpx;
			margin: 0rpx auto;

			.swipera {
				indicator-color: #F7CBC8;
				indicator-active-color: #F07C9A;

				.swiper-item {
					image {
						padding: 0 2%;
						width: 96%;
					}
				}

			}
		}

	}
</style>
