<template>
	<view class="content">
		<view class="topBox">
			<view class="status" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="topNav" :style="{top: iStatusBarHeight + 'px'}">
				<view class="topCity">
					<view class="location" v-if="!cityName" @click="showCity">定位失败</view>
					<view class="location" v-else @click="showCity">{{cityName}}</view>
					<image src="../../static/img/xiala.png" mode="widthFix" class="xiala"></image>
				</view>
				<view class="topTitle">车蓝图</view>
				<view style="width: 30%;"></view>
			</view>

			<view :style="{height: (iStatusBarHeight+50) + 'px'}"></view>
			<!-- 车辆信息 -->
			<view class="topCar">
				<view class="car" v-if="!memberCar" @click="addCar()">
					<view>
						<image src="../../static/img/addcar.png" mode="" class="addCar"></image>
					</view>
					<view>
						<view class="addcarTis">添加我的爱车</view>
						<view class="addcarMs">按照车型推荐保养套餐</view>
					</view>
				</view>

				<view class="car" v-else @click="goCarList()">
					<view>
						<image :src="memberCar.brandLogo" mode="" class="addCar"></image>
					</view>
					<view class="carRight">
						<view class="carMes">
							<view class="plateNum">
								<view class="addcarTis">{{memberCar.plateNumber}}</view>
								<view class="mileage">{{mileage}}km</view>
							</view>
							<view class="carMod">{{memberCar.carModel}}</view>
						</view>

						<view class="qhcar">
							<image src="../../static/img/icon_change_gray.png" mode="" class="qhcarImg"></image>
							<span>换车</span>
						</view>
					</view>
				</view>

			</view>

		</view>

		<!-- 功能区 -->
		<view class="btnBox">
			<view class="btnItem" @click="go4S">
				<image src="../../static/img/homeBtn1.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				<view class="btnName">4S店养车</view>
			</view>

			<view class="btnItem" @click="goNo">
				<image src="../../static/img/homeBtn2.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				<view class="btnName">绿色出行</view>
			</view>

			<view class="btnItem" @click="goNo">
				<image src="../../static/img/homeBtn3.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				<view class="btnName">车身修复</view>
			</view>

			<view class="btnItem" @click="goNo">
				<image src="../../static/img/homeBtn4.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				<view class="btnName">洗车用品</view>
			</view>

			<view class="btnItem" @click="goNo">
				<image src="../../static/img/homeBtn5.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				<view class="btnName">二手车</view>
			</view>

			<view class="btnItem" @click="goNo">
				<image src="../../static/img/homeBtn6.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				<view class="btnName">特价车</view>
			</view>
		</view>

		<!-- 优惠券中心 -->
		<image src="../../static/img/banner_hongb@2x.png" mode="aspectFit" class="quanImg" @click="goquan"></image>

		<!-- 车主评价 -->
		<view class="pingjia" v-if="itemData.length != 0">
			<view class="pingjiaTitle">车主评价</view>

			<view class="itemContent">
				<view v-for="(item,index) in itemData" :key="index">
					<view class="item">

						<view class="topMes">
							<view class="leftView">
								<image :src='item.HeadUrl' v-if="item.HeadUrl" class="storeImg"></image>
								<image src="../../static/img/pic_def_ava.png" mode="" class="storeImg" v-else></image>
							</view>
							<view class="rightView">
								<!-- 第一行 -->
								<view class="firstView">
									<view class="nickName">{{item.Evaluator}}</view>
									<view class="time">{{item.CreateTime.slice(0,item.CreateTime.length-8)}}</view>

								</view>

								<!-- 第2行 -->
								<view class="secondView" v-if="item.scoreState==1">
									<!-- 星星 -->
									<uni-rate :value="item.Overallevaluation" :max="5" color="#EEEEEE"
										active-color="#FF4F00" :size="16" :margin="4" :readonly="true" />

								</view>

							</view>
						</view>



						<view class="thirdView" v-if="item.scoreState==1">
							<view class="count">服务态度：{{item.Serviceevaluation}}</view>
							<view class="count">施工质量：{{item.Constructionevaluation}}</view>
							<view class="count">店面环境：{{item.Storeevaluation}}</view>
						</view>
						<view class="contentMes" v-if="item.EContent">{{item.EContent}}</view>

						<!-- 照片 -->
						<view class="imgBg">
							<view v-for="(itemImg,indexImg) in item.imgs" :key="indexImg" class="pjimgBox">

								<image :src="itemImg.imageUrl" class="img"
									@click="previewImage(itemImg.imageUrl,item.imgs)"></image>
							</view>
						</view>
						
						<view style="height: 20rpx;" v-if="!item.EContent && (item.imgs.length == 0)"></view>
						

						<view class="shopMes">
							<image src="../../static/img/icon_storeName.png" mode=""
								style="width: 33rpx; height: 30rpx;"></image>
							<view class="shopName">{{item.ShopName}}</view>
						</view>

						<!-- 商家回复 -->
						<view class="writeBack" v-if="item.ReplyContent">商家回复：{{item.ReplyContent}}</view>




					</view>
					<view class="line" v-if="index != itemData.length-1"></view>
				</view>
			</view>


		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight: '',
				page: 1,
				itemData: [],

				uid: '',
				cityName: '',
				cityCode: '',
				memberCar: '',
				locationCity: {
					cityName: '',
					cityCode: '',
					lng: '',
					lat: '',
				},


				mileage: '',

				brand: '',
				cityRole: '',
			}
		},
		onShow() {

			var that = this;


			that.uid = uni.getStorageSync("logodata").uid;


			var selectCity = uni.getStorageSync("selectCity");

			if (selectCity) {
				//有选择的城市
				that.cityName = selectCity.city
				that.cityCode = selectCity.code
			} else {
				//定位到的城市
				var nowCity = uni.getStorageSync("locationCity");
				if (nowCity) {
					that.cityName = nowCity.cityName
					that.cityCode = nowCity.cityCode

					if (that.uid) {
						that.queryHomeDetail();
					}
				} else {
					// 重新去定位城市
					that.getLocation()
				}
			}


			if (that.uid) {
				that.queryHomeDetail();
			}

			
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.page = 1
			this.getItemData()
		},
		methods: {
			goCarList() {
				if (this.uid) {
					uni.navigateTo({

						url: '../index/cailist?type=1'
					})
				}
			},
			addCar() {
				if (!this.uid) {
					this.goLonIn();
				}
				uni.navigateTo({
					url: '../index/addCar'

				})
			},
			goLonIn() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			getLocation() {

				const that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('定位', res)
						that.locationCity.lng = res.longitude
						that.locationCity.lat = res.latitude


						that.getAdress();

					},
					fail(err) {
						console.log(err)

					}
				});
			},
			getAdress() {
				// 根据经纬度 逆城市地理编码 获取城市信息
				var location = this.locationCity.lng + ',' + this.locationCity.lat
				uni.request({
					url: 'https://restapi.amap.com/v3/place/around',
					data: {
						key: '064b6a4a8ade55656edcde2f528876de',
						location: location,
						types: "190000",
						extensions: "all",
						radius: 100
					},
					dataType: "json",
					success: (res) => {
						console.log('定位城市', res);
						let cityname = res.data.pois[0].cityname;
						var cityCode = res.data.pois[0].adcode
						cityCode = cityCode.slice(0, -2)
						cityCode = cityCode + '00'
						this.locationCity.cityName = cityname
						this.locationCity.cityCode = cityCode

						uni.setStorage({
							key: 'locationCity',
							data: this.locationCity,
							success: function() {
								console.log('定位城市,保存成功');
							}
						})

						this.cityName = this.locationCity.cityName
						this.cityCode = this.locationCity.cityCode


					}
				});
			},
			queryHomeDetail() {
				uni.showLoading({
					title: '加载中'
				})

				this.$http('worldKeepCar/worldHome/queryHomeDetail', {
					cityCode: this.cityCode
				}, 'GET').then(res => {
					uni.hideLoading();
					this.cityRole = res.data.cityRole
					this.imgData = res.data.banners
					this.memberCar = res.data.memberCar
					if (res.data.memberCar) {
						this.mileage = res.data.memberCar.milage
					} else {
						this.mileage = ''
					}

					this.brand = res.data.memberCar.brand

					var cardata = uni.getStorageSync("maintainCarData")

					if (cardata) {
						this.memberCar = cardata
						if (cardata) {
							this.mileage = this.memberCar.milage
						} else {
							this.mileage = ''
						}

						this.brand = this.memberCar.brand
					} else {
						uni.setStorage({
							key: 'maintainCarData',
							data: this.memberCar,
							success: function() {}
						});
					}

				})
			},
			showCity() {
				uni.navigateTo({
					url: '../chooseCity/chooseCity'
				})
			},
			getItemData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'worldKeepCar/worldHome/listShopAllTMEvaluatePage',
					params = {
						page: this.page,
						limit: 5,

					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var list = res.data.Items

					// 处理 undefined和null转为空白字符串
					list.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})


					if (this.page == 1) {
						this.itemData = list
					} else if (list.length) {

						this.itemData = this.itemData.concat(list)
					}




				})
			},
			go4S() {
				if (!this.uid) {
					this.goLonIn();
				}

				if (!this.cityCode) {
					uni.showToast({
						title: '请选择城市',
						icon: 'none',
						duration: 3000,
					})
					return
				}
				if (!this.memberCar) {
					uni.showToast({
						title: '请选择车辆',
						icon: 'none',
						duration: 3000,
					})
					return
				}
				if (this.cityRole == 0) {
					uni.showToast({
						title: '所选城市暂时不支持保养，我们正在努力开通哦~',
						icon: 'none',
						duration: 3000,
					})
					return
				}

				uni.navigateTo({
					url: '../module/maintain?brand=' + this.brand
				})
			},
			goNo() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none',
					duration: 2000,
				});
			},
			goquan() {

				uni.navigateTo({
					url: 'allDiscountCard'
				})
			},
			previewImage(img, arrDic) {
				var arr = [];

				arrDic.forEach(item => {
					arr.push(item.imageUrl)
				})

				// 预览图片
				uni.previewImage({
					urls: arr,
					current: img,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},



		},
		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			this.page = 1
			this.getItemData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++;
			this.getItemData()
		},
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background: #F4F5F7;
		padding-bottom: 20rpx;
	}

	.topBox {
		background-image: url("data:image/png;base64,[encoded data, 63120 characters]");
		background-size: 100% 100%;
		
	}

	.status {
		background-image: url("data:image/png;base64,[encoded data, 63120 characters]");
		position: fixed;
		left: 0;
		top: 0;
		z-index: 111;
		width: 100%;
	}

	.topNav {
		width: 100%;
		height: 44px;

		background-image: url("data:image/png;base64,[encoded data, 63120 characters]");

		position: fixed;
		left: 0;


		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
	}

	.topCity {
		display: flex;
		
		align-items: center;
		width: 30%;
	}

	.location {
		color: #FFFFFF;
		font-size: 26rpx;
		padding-left: 24rpx;
	}

	.xiala {
		width: 18rpx;
		margin-left: 5rpx;
	}

	.topTitle {

		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		width: 30%;
	}

	.topCar {
		height: 147rpx;
		margin: 0 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.car {
		display: flex;
		padding: 32rpx 24rpx;
	}

	.addCar {
		width: 72rpx;
		height: 72rpx;
	}

	.addcarTis {
		font-size: 30rpx;
		color: #3C3C3C;
		font-weight: 500;
		padding-left: 24rpx;
	}

	.addcarMs {
		font-size: 26rpx;
		color: #666666;
		padding-left: 24rpx;
		padding-top: 4rpx;
	}

	.carRight {
		width: 90%;
		display: flex;
		justify-content: space-between;
	}

	.carMes {
		width: 80%;
	}

	.plateNum {
		display: flex;
		align-items: center;
	}

	.mileage {
		color: #FF4F00;
		font-size: 22rpx;
		height: 30rpx;
		line-height: 30rpx;
		background: rgba(255, 79, 0, 0.06);
		border-radius: 4rpx;
		text-align: center;
		padding: 0 10rpx;
		margin-left: 15rpx;
	}

	.carMod {
		font-size: 26rpx;
		color: #666666;
		padding-left: 24rpx;
		padding-top: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.qhcar {
		display: flex;
		color: #666666;
		font-size: 26rpx;
		padding-top: 20rpx;
	}

	.qhcarImg {
		width: 29rpx;
		height: 30rpx;
		margin-right: 10rpx;
		margin-top: 5rpx;
	}

	.btnBox {

		margin: 20rpx 24rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-bottom: 30rpx;
		display: flex;
		align-content: flex-start;
		flex-wrap: wrap;
	}

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

		margin-top: 30rpx;
		flex: 0 0 25%;
	}

	.btnName {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #3C3C3C;
		text-align: center;
	}

	.quanImg {
		width: 100%;
		height: 216rpx;
		margin-top: 10rpx;
	}

	.pingjia {
		margin: 0 24rpx;
		
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.pingjiaTitle {
		padding: 24rpx 27rpx;
		color: #3C3C3C;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.item {

		padding: 24rpx;
		background-color: #FFFFFF;

	}

	.topMes {
		display: flex;
	}

	.leftView {
		width: 72rpx;
		margin-right: 10rpx;
		align-items: center;
	}

	.storeImg {
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
		/* margin-top: 30rpx; */
	}

	.rightView {

		width: 100vw;
	}

	.firstView,
	.secondView {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}



	.secondView {
		padding-top: 10rpx;

	}

	.nickName {
		/* padding-top: 30rpx;
		padding-bottom: 10rpx; */
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
	}

	.time {
		font-size: 26rpx;
		color: #999999;

	}



	.thirdView {
		display: flex;
		justify-content: flex-start;
		padding-top: 10rpx;
		
	}

	.count {
		font-size: 24rpx;
		color: #999999;
		margin-right: 20rpx;
	}

	.contentMes {
		font-size: 26rpx;
		color: #666666;
		line-height: 37rpx;
		padding: 20rpx 0;

	}

	.imgBg {
		display: flex;
		justify-content: flex-start;
		
		flex-wrap: wrap;
	}

	.img {
		width: 140rpx;
		height: 140rpx;
		
		margin-bottom: 18rpx;
		border-radius: 8rpx;
	}
	.pjimgBox{
	   margin-right: 31rpx;
	}

	.pjimgBox:nth-child(4n){
		margin-right: 0 !important;
	} 
	.writeBack {
		font-size: 26rpx;
		color: #666666;
		line-height: 37rpx;
		padding: 20rpx;
		background-color: #F4F5F7;

		margin-top: 20rpx;
	}

	.shopMes {
		display: flex;
		
	}

	.shopName {
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.line {
		background-color: #EEEEEE;
		height: 2rpx;
		margin-left: 24rpx;
	}
</style>
