<template>
	<view>
		<view class="app">
			<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="call">
					<view class="callme" @tap="gophone()">
						<u-icon name="phone-fill" color="#ffffff" size="28"></u-icon>
						联系我们
					</view>
					<view class="Navigation">
						<image src="/static/daohang.png" mode="">导航</image>
					</view>
				</view>

			</view>
			<view class="detail">
				<view class="Introduction">机构简介</view>
				<view class="textInfo">
					{{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">
				<view class="tab-box">
					<view class="tab-item" @tap="testTabClick(index)" v-for="(item,index) in tabList" :key="index"
						:class="tabIndex == index?'active':''">
						{{item.name}}
					</view>
				</view>
				<view class="item" v-for="item in servelist" :key="" v-show='choicetab==false'>
					<image src="../../static/fuwutu.png"></image>
					<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(item)'>预约</view>
					<view class="price">￥{{item.price}}</view>
				</view>

				<view class="item" v-show='choicetab' v-for="(item,index) in productlist" :key="index">
					<view>
						<image src="../../static/fuwutu.png"></image>
					</view>
					<view class="product">{{item.goodsName}}</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: [], //产品
				stationid: '', //护理站id
				nurseStationId: 2,
				nurseStationLabelList: [], //护理站配置
				nearbyNursingStationItemList: [],
				patientId: 46,
				pageNum: 1,
				stationId: 2,
				stationItemId: 2,
				stationItemPriceId: 3,
				pageSize: 10,
				tabIndex: 0,
				tabList: [{
					name: "服务项目"
				}, {
					name: "产品"
				}, ]

			}
		},
		onLoad() {
			this.getInfo(),
				this.serveinfo(),
				this.productinfo()
		},
		methods: {
			goappointments(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/appointmenttime/appointmenttime?stationId=${item.stationId}&stationItemId=${item.stationItemId}&stationItemPriceId=${item.stationItemPriceId}`,

				})
			},
			getInfo() {
				introductionList(this.nurseStationId).then(res => {
					this.list = res[0]
					console.log(this.list)
					if(res[0].nurseStationLabelList){
						this.nurseStationLabelList = res[0].nurseStationLabelList
					}
					// this.nearbyNursingStationItemList = res[0].nearbyNursingStationItemList
					// (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
			}
		},

		// 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>
	.app {
		font-size: 36rpx;
		padding-top: 10rpx;

		.tive {
			width: 94%;
			background-color: #ffffff;
			margin: 0 auto;
			margin-top: 3%;
			border-radius: 11px;

			.item {
				width: 99%;
				height: 184rpx;

				image {
					width: 170rpx;
					height: 170rpx;
					margin-left: 3%;
				}

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

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

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

				.product {
					margin-top: -26%;
					margin-left: 28%;
				}

				.huanyao {
					margin-left: 35%;
					margin-top: -24%;
					color: #000000;

					.pingfen {
						float: right;
					}
				}

			}

			.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;
						}
					}
				}
			}
		}

		.Nursestationconfiguration {
			width: 94%;
			height: 184rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto;

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

				.config {
					display: flex;

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

		.detail {
			position: relative;
			width: 94%;
			height: 443rpx;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 3%;
			font-size: 31rpx;
			padding: 3%;

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

			.Introduction {
				font-size: 31rpx;
				color: #333333;
				line-height: 12rpx;
				margin-left: -3%;
				padding: 3%;
			}
		}

		.righttext {
			position: relative;
			width: 94%;
			height: 252rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin: 10px auto;

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


			.title {
				margin-left: 35%;
				line-height: 49px;
				font-size: 33rpx;
			}

			.call {
				display: flex;

				.Navigation {
					width: 103rpx;
					height: 48rpx;
					background: #00C176;
					border-radius: 24px;
					font-size: 21rpx;
					color: #ffffff;
					line-height: 48rpx;
					margin-left: 5%;
					text-align: center;
					margin-top: 3%;

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

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

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

	}
</style>
