<template>
	<view class="homepersonalCenter">
		<view class="title">
			<view class="swiperBox">
				<swiper class="swiper" indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.85)" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
					<swiper-item v-for="(item, index) in userData.thumbs" :key="index" @click="lookImg(userData.thumbs,index)">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="content">
			<view class="nameAndlogo">
				<image :src="userData.thumb" mode=""></image>
				<view  style="padding: 10upx 0;">
					<view class="f-32 f-w">
						{{userData.name}}<text class="iconfont icon-female nv" style="color:#FE83AF ;padding-left: 10upx;" v-if="userData.gender != 1"></text>
						<text class="iconfont iconfont icon-male" style="color:#0084FF ;padding-left: 10upx;" v-else></text>
					</view>
					<view class="tags">
						<view class="tags-item" v-for="(item,index) in userData.catearray">
							{{item}}
						</view>
					</view>
					<view class="location f-28" style="padding-top: 20upx;" @click="conloding">
						<text class="iconfont icon-location" style="font-size: 28upx;"></text>
						<text style="padding: 0 20upx;">{{userData.address}}</text>
						<text style="padding-right: 20upx;" v-if="false">210m</text>
						<text class="iconfont icon-right" style="font-size: 28upx;"></text>
					</view>
				</view>
			</view>
			<view class="yab">
				<v-tabs
					:lineScale="0.25"
					:lineRadius="'100rpx 100rpx 0 0'"
					:lineHeight="'8rpx'"
					:fontSize="'32rpx'"
					:activeFontSize="'32rpx'"
					:bold="true"
					:height="'100rpx'"
					:paddingItem="'0 22rpx 20rpx'"
					:activeColor="'#333333'"
					:lineColor="'#333333'"
					:color="'#999999'"
					v-model="sort"
					:scroll="false"
					@change="vtabschange"
					:tabs="['服务项目','案例图片']"
				></v-tabs>
			</view>
		</view>
		<view class="listmen" v-if="sort == 0">
			<view class="listItem" v-for="(item,index) in serverList" :key="index" >
				<serveItem :serItem="item"></serveItem>
			</view>
		</view>
		<view class="listmen" v-else style="column-count: 3;column-gap: 0;">
			<view class="imgitrm" v-for="(item,index) in userData.casethumbs" :key="index" @click="lookImg(userData.casethumbs,index)">
				<view class="imgbox">
					<image  style="width: 100%;height: 100%;" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bpttombox dis-flex">
			<view  style="flex: 0.2;" @click="navIndex">
				<view class="iconfont icon-home t-c" style="font-size: 44upx;">
					
				</view>
				<view class="t-c f-20">
					首页
				</view>
			</view>
			<view class="liaot" style="background-color: #FDAD28;" @click="chat">
				在线聊
			</view>
			<view class="liaot" style="background-color: #72AAFD;" @click="call">
				电话联系
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	//#ifdef H5
	import wxApi from "@/common/js/wxApi.js";
	//#endif
	import vTabs from '@/components/v-tabs/v-tabs.vue';
	import serveItem from '@/components/template/serveItem.vue';
	import Map from '@/common/js/ms-openMap/openMap.js'
	export default{
		data(){
			return{
				sort:0,
				userData:{},
				mid:'',
				id:'',
				page:1,
				total:1,
				serverList:[]
				
			}
		},
		onLoad(e) {
			this.mid = e.mid || '';
			this.id = e.id || ''
			this.getuserData();
		},
		methods:{
			lookImg(img,index){
				uni.previewImage({
					current:img[index],
					urls: img
				})
			},
			chat(){
				// debugger
				App.navigationTo({
					url: 'pages/subPages/homepage/chat/chat?other_party_id=' + this.mid + '&other_party_type=' +  1 + '&type=1' + '&id='
				})
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: this.userData.mobile
				})
			},
			navIndex(){
				App.navigationTo({
					url: "pages/mainPages/index/diypage?type=18"
				});
			},
			opendelit(item){
				App.navigationTo({
					url:`pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=${item.pid}`
				});
			},
			getseverList(){
				App._post_form(
					`&p=housekeep&do=getServicelist`,
					{
						status:0,
						page:this.page,
						mid:this.mid,
						type:2
					},
					res => {
						console.log(res);
						this.total = res.data.total;
						this.serverList = res.data.list;
						// this.userData = res.data;
						// debugger
					},
					false,
					() => {
						
					}
				);
			},
			conloding(){
				let storeInfo = {};
				storeInfo = {
					location:{
						lat:this.userData.lat,
						lng:this.userData.lng
					},
					address:this.userData.address
				}
				// #ifdef H5
				
				console.log(storeInfo);
				wxApi.WxopenLocation(
					storeInfo['location']['lat'],
					storeInfo['location']['lng'],
					storeInfo['address']
				)
				// #endif
				// #ifdef MP-WEIXIN
				App.openLocation(storeInfo)
				// #endif
				//#ifdef APP-PLUS
				    Map.openMap(Number(storeInfo['location']['lat']),Number(storeInfo['location']['lng']),storeInfo['address'],'gcj02')
				    //#endif
			},
			getuserData(){
				App._post_form(
					`&p=housekeep&do=personalHomepage`,
					{id:this.id},
					res => {
						console.log(res);
						this.userData = res.data;
						// debugger
						this.getseverList();
					},
					false,
					() => {
						
					}
				);
			},
			vtabschange(e){
				
			}
		},
		components:{
			vTabs,
			serveItem
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.homepersonalCenter{
		padding-bottom: 150upx;
		.title{
			.swiperBox{
				.swiper{
					width: 750upx;
					height: 430upx;
					image{
						width: 750upx;
						height: 430upx;
					}
				}
				
			}
		}
		.bpttombox{
			width: 750upx;
			padding: 30upx 0;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			.liaot{
				flex: 0.4;
				margin-right: 20upx;
				height: 82upx;
				line-height: 82upx;
				text-align: center;
				border-radius: 10upx;
				color: #FFFFFF;
				font-size: 28upx;
			}
		}
		.listmen{
			padding: 0upx 30upx 20upx;
			position: relative;
			top: -20upx;
			
			// padding-bottom: 150upx;
			.listItem{
				
			}
			.imgitrm{
				box-sizing: border-box;
				    break-inside: avoid;
				    padding: 10upx;
					.imgbox{
						    display: flex;
						    flex-direction: column;
						    justify-content: center;
						    align-items: center;
						    // padding: 10px;
						    height: auto;
						    font-size: 20px;
						    color: #686868;
							background-color: #ffffff;
						    box-sizing: border-box;
						    // border: 1px solid #ccc;
							border-radius: 20upx;
							image{
								border-radius: 20upx;
							}
					}
			}
		}
		.content{
			width: 690upx;
			padding: 30upx 30upx 0;
			background-color: #FFFFFF;
			border-radius: 30upx 30upx 0 0;
			position: relative;
			top: -40upx;
			.nameAndlogo{
				position: relative;
				padding-top: 50upx;
				image{
					width: 130upx;
					height: 130upx;
					margin-right: 30upx;
					border-radius: 50%;
					position: absolute;
					left: 0upx;
					top: -100upx;
					border: 6upx solid #FFFFFF;
				}
				.nv{
					transform: rotate(45deg);
				}
				.tags{
					padding-top: 10upx;
					height: 50upx;
					overflow: hidden;
					.tags-item{
						background-color: #EEEEEE;
						color: #999999;
						height: 30upx;
						line-height: 30upx;
						padding: 0 10upx;
						border-radius: 8upx;
						font-size: 24upx;
						text-align: center;
						display: inline-block;
						margin-right: 10upx;
						margin-bottom: 10upx;
					}
				}
			}
		}
	}
</style>
