<template>
	<view class="content">
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<view class="my-header">
				<view class="my-icons" @click="goback">
					<uni-icons type="arrow-left" color="#000000" size="22px"></uni-icons>
				</view>
				<view class="my-text">{{titles}}</view>
				<view class="my-icons"></view>
			</view>
			<!-- #endif -->
			<view class="gs-box">
				<u-empty mode="list" v-if="schoolList&&schoolList.length <1 "></u-empty>


				<!-- <view @click="goScheduleTraining(item.jxId)" class="box-goods" v-for="(item,index) in schoolList" :key="index"> -->
				<view @click="goDetailsPage(item.id)" class="box-goods" v-for="(item,index) in schoolList" :key="index">
					<view class="img-url">
						<!-- <image src="../../static/imgs/ban1.png" mode=""></image> -->
						<image :src=" baseUrl + item.photo " mode=""></image>
					</view>
					<view class="pr-a">
						<image src="../../static/imgs/ttel.png" mode=""></image>
					</view>
					<view style="width: 75%;">
						<view class="title_">{{item.schoolName}}</view>
						<view class="time_">营业中 {{item.businessStartTime}}-{{item.businessEndTime}}</view>
						<view class="wrap-box">
							<view class="icon-w">{{item.announcement}}</view>
							<!-- <view class="icon-x">规模大 </view> -->
						</view>
						<view style="width: 75%;" v-if="item.address" class="time_">{{item.address}}</view>
					</view>
				</view>

			</view>
			<u-loadmore :status="status" v-if="show == true" />
		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				titles: "驾校列表",
				msg: "1",
				List: [],
				show: false,
				status: 'loading',
				baseUrl: this.$baseUrl,
				schoolList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 100,
				},
			}
		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.findSelfSchoolList()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers

		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			async findSelfSchoolList() {
				let res = await request({
					url: `/drivingSchool/system/schoolInfo/list`,
					method: `get`,
					params: this.queryParams
				})
				this.schoolList = res.data.records,
					console.log("列表数据为 =============>>>", this.schoolList)
			},
			goScheduleTraining(id) {
				uni.navigateTo({
					url: '/pages/index/ScheduleTraining?jxId=' + id
				})
			},
			goDetailsPage(id) {
				uni.navigateTo({
					url: '/pages/index/Details?id=' + id,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;

		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.gs-box {
		background: #fff;
		box-sizing: border-box;
		padding: 15px;
	}

	.box-goods {
		display: flex;
		align-items: center;
		margin: 10px auto;
		position: relative;
	}

	.img-url {
		width: 100px;
		height: 75px;
		border-radius: 8px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;

		}
	}

	.time_ {
		font-weight: 400;
		font-size: 12px;
		color: #666666;
		overflow: hidden; //超出盒子宽度内容，便溢出隐藏
		text-overflow: ellipsis; //用...省略号显示
		display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
		-webkit-box-orient: vertical; //从上到下垂直排列子元素
		-webkit-line-clamp: 2;
	}

	.pr-a {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		right: 15px;
		top: 15px;

		image {
			width: 100%;
			height: 100%;

		}
	}

	.input-box {
		width: 95%;
		height: 36px;
		border-radius: 50px;
		margin: 10px auto;
		background: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 15px;
		text-align: left;
	}

	.swiper {
		width: 95%;
		margin: 0 auto;
	}

	.swiper-box {
		width: 100%;
		height: 150px;
		border-radius: 6px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

		// background: #47a5f6;
	}

	.top-box {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 10px auto;

	}

	.jgbox {
		width: 20%;
		text-align: center;
		font-size: 12px;
		color: #333333;
	}

	.jg-img {
		width: 35px;
		height: 35px;
		border-radius: 4px;
		overflow: hidden;
		margin: 5px auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jb-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 15px;
	}

	.lift-box {
		width: 40px;
		height: 40px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hang- {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.qiu {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #333333;
	}

	.bai-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;



	}

	.icon-gd {
		width: 48px;
		height: 20px;
		background: #4AA76F;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50px;

	}

	.hang-hui {
		width: 100%;
		height: 15px;
		background: #f4f5f6;
		margin-top: 10px;
	}

	.d-box {
		display: flex;
		align-items: center;
		width: 95%;
		margin: 0px auto;
	}

	.img-left {
		width: 106px;
		height: 66px;
		border-radius: 4px;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title_ {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.price- {
		font-weight: bold;
		font-size: 14px;
		color: #FB423B;
	}

	.hui- {
		font-weight: 400;
		font-size: 10px;
		color: #AAAAAA;
		text-decoration: line-through;
		margin-left: 10px;
	}

	.wrap-box {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		margin: 5px auto;
	}

	.icon-w {
		background: #E6F5F0;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4AA76F;
		margin-right: 5px;
		font-size: 10px;
		box-sizing: border-box;
		padding: 4px 5px;
	}

	.icon-x {
		background: #FFEDD4;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #EDA23A;
		margin-right: 5px;
		font-size: 10px;
		box-sizing: border-box;
		padding: 4px 5px;
	}

	.top-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.s-s-box {
		width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4AA76F;
	}

	.my-header {
		width: 100%;
		height: 88px;
		// background: linear-gradient(180deg, #B2D2FC 0%, rgba(255, 255, 255, 0.84) 100%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;
		z-index: 99999;
		background: #fff;
		position: fixed;
		top: 0px;

		.my-icons {
			width: 20px;

		}

		.my-text {
			font-weight: bold;
		}


	}
</style>
