<template>
	<view>
		<view class="top">
			<view class="righttext">
				<image class="picture" src="../../static/mentoutu.png"></image>
				<view class="title">
					{{list.nurseStationName}}
				</view>
				<view class="address">{{list.address}} </view>
				<view class="title2" @tap="gophone()">
					<u-icon name="phone-fill" color="#ffffff" size="28"></u-icon>
					联系我们
				</view>
				<view class="title3">
					<image src="/static/daohang.png" mode="">导航</image>
				</view>
			</view>
			<view class="detail">
				<view class="detail2">机构简介</view>
				<view class="textIn14">
					{{list.agencyIntroduce}}
				</view>
			</view>
			<view class="Nursestationconfiguration">
				<view class="configuration">
					护理站配置
					<view class="config" v-for="(item,index) in nurseStationLabelList" :key="index">
						<view class="measure">
							<text>{{item.labelDescription}}</text>
						</view>

					</view>
				</view>
			</view>
			<view class="tive"
				style="width:99%;background-color:#ffffff;margin:0 auto;margin-top:5%;border-radius: 11px;height: 100%;">
				<view class="tab-box">
					<view class="tab-item" @tap="testTabClick(index)" :class="tabIndex == index?'active':''"
						v-for="(item,index) in tabList" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="item" v-for="(item,index) in servelist" :key="index" v-show='choicetab==false'>
					<view>
						<image class="picture2" src="../../static/fuwutu.png"></image>
					</view>
					<view class="huanyao">{{item.nurseItemName}}
					<view class="pingfen">	<u-rate  :count="5" value="2"></u-rate></view>
					
					</view>
					<view class="servicetime">服务时长:{{item.serveDurationUnit}}</view>
					<view class="appointment" @tap='goappointments()'>预约</view>
					<view class="price">￥{{item.price}}</view>
				</view>

				<view class="item" v-show='choicetab' v-for="(item,index) in productlist" :key="index">
					<view>
						<image class="pictures" src="../../static/fuwutu.png"></image>
					</view>
					<view class="product">{{item.goodsName}}
					</view>
					<!-- <view class="price">￥60</view> -->
					<view class="appointment">购买</view>
				</view>

			</view>


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

<script>
	import {
		introductionList,
		itemList,
		productInformation
	} from '@/api/nursestation/nursestation.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				choicetab: false, //切换
				list: [],
				servelist: [], //服务项目
				productlist: [], //产品
				nurseStationId: 2,
				nurseStationLabelList: [], //护理站配置
				nearbyNursingStationItemList: [],
				pageNum: 1,
				pageSize: 10,
				tabIndex: 0,
				tabList: [{
					name: "服务项目"
				}, {
					name: "产品"
				}, ]

			}
		},
		onLoad() {
			this.getInfo(),
				this.serveinfo(),
				this.productinfo()
		},
		methods: {
			goappointments() {
				uni.navigateTo({
					url: `/pages/appointmenttime/appointmenttime`,

				})
			},
			getInfo() {
				introductionList(this.nurseStationId).then(res => {
					this.list = res[0]
					this.nurseStationLabelList = res[0].nurseStationLabelList
					// this.nearbyNursingStationItemList = res[0].nearbyNursingStationItemList
					console.log(this.nurseStationLabelList);
				})
			},
			serveinfo() {
				itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
					this.servelist = res.rows
					console.log(this.servelist)

				})
			},
			productinfo() {
				productInformation(this.nurseStationId, this.pageNum, this.pageSize).then(res => {
					this.productlist = res.rows
					console.log(this.productlist)
				})
			},
			testTabClick(index) {
				console.log(index)
				this.tabIndex = index
				this.choicetab = !this.choicetab
				// if (this.index == 0) {
				// 	// this.servelist = res.rows
				// 	})
				// }

			}
		},

		gophone() {
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res)
					if (res.platform == 'ios') {
						uni.makePhoneCall({
							phoneNumber: that.list.phone //仅为示例
						});
					} else {
						uni.showActionSheet({
							itemList: [`呼叫`, ],
							success: function(res) {
								if (res.tapIndex + 1 == 1) {
									uni.makePhoneCall({
										phoneNumber: that.list.phone //仅为示例
									});
								}
								console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							},
							fail: function(res) {
								// console.log(res.errMsg);
							}
						});
					}
				}
			});

		},
	}
</script>

<style lang="scss" scoped>
	.pingfen{
		float: right;
	}
	.product {
		font-size: 38rpx;

		margin-top: -26%;
		margin-left: 28%;
	}

	.tab-box {
		display: flex;

		.tab-item {
			flex-shrink: 0;
			padding: 3%;
			position: relative;
			transition: all 0.2s linear;
			font-size: 31rpx;


			&::after {
				transition: all 0.2s linear;
				transform: translateX(-50%) scaleX(0);
				content: '';
				width: 50%;
				position: absolute;
				left: 50%;
				bottom: 20rpx;
				border-bottom: 6rpx solid #D43953;
				border-radius: 4rpx;
			}

			&.active {
				&::after {
					content: '';
					width: 50%;
					position: absolute;
					left: 50%;
					transform: translateX(-50%) scaleX(1);
					bottom: 20rpx;
					border-bottom: 6rpx solid red;
				}
			}
		}
	}

	.config {
		display: flex;
		// flex-wrap: wrap;
		// justify-content: space-around;
	}

	//产品的图片
	.pictures {
		// position: absolute;
		width: 170rpx;
		height: 170rpx;
		margin-left: 3%;

	}

	//全局
	.top {
		background-color: #F4F5F7;
		width: 100%;
		height: 100vh;
		padding: 3%;
	}

	.detail {
		position: relative;
		width: 99%;
		height: 443rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
		font-size: 31rpx;
		padding: 1px 20px 0 20px;
		box-sizing: border-box;
	}

	.title3 image {
		width: 24rpx;
		height: 24rpx;
		color: #ffffff;

	}

	.righttext {
		position: relative;
		background-color: #ffffff;
		width: 99%;
		height: 252rpx;
		/* box-shadow: 0px 9px 31px 9px rgba(0,0,0,0.03); */
		border-radius: 20rpx;
		margin: 0 auto;

	}

	.detail2 {
		font-size: 31rpx;
		color: #333333;
		line-height: 12rpx;
		margin-left: -3%;
		margin-top: 3%;
		padding: 3%;
		font-weight: 500;
		/* margin-bottom: 20px; */
	}

	.address {
		width: 396rpx;
		height: 62rpx;
		font-size: 25rpx;
		margin-left: 35%;
		margin-top: -2%;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #999999;
		line-height: 37rpx;
	}

	.picture {
		position: absolute;
		width: 170rpx;
		height: 170rpx;
		margin-left: 5%;
		margin-top: 5%;
	}

	.picture2 {
		width: 170rpx;
		height: 170rpx;
		margin-left: 3%;
		// mar
	}

	.title {
		margin-left: 35%;
		line-height: 49px;
		font-size: 33rpx;
		font-weight: normal;
		letter-spacing: 1px;

	}

	.title2 {
		width: 149rpx;
		height: 48rpx;
		background: #D43953;
		border-radius: 24px;
		font-size: 21rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #ffffff;
		line-height: 48rpx;
		margin-left: 35%;
		margin-top: 3%;
		text-align: center;
	}

	.title3 {
		width: 103rpx;
		height: 48rpx;
		background: #00C176;
		border-radius: 24px;
		font-size: 21rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #ffffff;
		line-height: 48rpx;
		margin-left: 60%;
		margin-top: -7%;
		text-align: center;
	}

	.textIn14 {
		font-size: 29rpx;
		text-indent: 2rem;
		line-height: 42rpx;
		color: #666666;
	}

	.Nursestationconfiguration {
		width: 700rpx;
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.configuration {
		font-size: 31rpx;
		color: #333333;
		line-height: 12rpx;
		padding: 6%;
		margin-left: -3%;
		margin-top: 3%;
		font-weight: 500;

	}

	.measure {
		// width: 60%;
		// height: 67rpx;
		background: #F6F6F6;
		border-radius: 33rpx;
		text-align: center;
		line-height: 67rpx;
		display: inline-block;
		margin-left: 5%;
		// margin-top: 5%;
	}



	.huanyao {
		// line-height: 10%;
		// margin-top: -19%;
		font-size: 38rpx;
		margin-left: 35%;

		margin-top: -24%;
		color: #000000;
		// line-height: 37rpx;
		// margin: -160px -34px 42px 189px;

	}

	.picture3 {
		width: 137rpx;
		height: 23rpx;
		float: right;
	}

	.servicetime {
		font-size: 34rpx;
		color: #999999;
		line-height: 37rpx;
		margin-left: 35%;
	}

	.appointment {
		width: 125rpx;
		height: 71rpx;
		background: #4C7BC9;
		border-radius: 26rpx;
		float: right;
		margin-top: -5%;
		// margin-right: -5%;
		color: #ffffff;
		text-align: center;
		line-height: 71rpx;
	}

	.price {
		width: 60rpx;
		height: 26rpx;
		color: red;
		font-size: 32rpx;
		margin-top: 3%;
		margin-left: 35%;
	}

	.item {
		width: 99%;
		height: 184rpx;
		position: relative;
		// background-color: ;
		margin-bottom: 3%;
	}

	.item2 {
		width: 99%;
		height: 555rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 31rpx;
		color: #333333;
		padding: 4%;
		margin-left: -3%;
		font-weight: 500;
		margin: 0 auto;
		margin-top: -17%;
	}

	.picture4 {
		width: 170rpx;
		height: 170rpx;
		margin-top: 5%;
	}

	.chanpin {
		line-height: 37rpx;
		font-size: 31rpx;
		color: #333333;
		padding: 4%;
		margin-left: 26%;
		margin-top: -10%;
		font-weight: 500;
	}

	.pay {
		width: 125rpx;
		height: 71rpx;
		background: #4C7BC9;
		border-radius: 26rpx;
		margin-left: 78%;
		margin-top: -7%;
		color: white;
		line-height: 71rpx;
		text-align: center;
	}
</style>
