<template>
	<view class="content safe-area-inset-bottom">
		<MessageNotification />
		<view class="head" @click="gologin">
			<!-- 门店 -->
			<view class="store">
				{{info.name || ''}}
				<text class="iconfont icon-mendian"></text>
			</view>

			<!-- 定位 -->
			<view class="area">
				<view class="place">
					<text class="iconfont icon-dizhi"></text>
					{{info.position || ''}}
				</view>

				<!-- <view class="place">
					<text class="iconfont icon-saoyisao" style="font-size: 30rpx;"></text>
					扫一扫
				</view> -->
			</view>
		</view>

		<!-- 图片展示 -->
		<view class="section" @click="gologin">
			<u-swiper :list="list" :img-mode="aspectFill" :height="300" :interval="4000"></u-swiper>
			<!-- <image class="banner" mode="aspectFill" src="/static/home/banner.png"></image> -->
		</view>

		<!-- 导航栏 -->
		<view class="nav" v-if="isShow_envVersion==false">
			<view class="nav_service" @click="gologin">
				<view class="nav_service_img">
					<image src="../../static/home/bg1.png" mode=""></image>
				</view>
				<view class="nav_service_title">
					到店挂号
				</view>
			</view>

			<view class="nav_service" @click="gologin">
				<view class="nav_service_img">
					<image src="../../static/home/bg2.png" mode=""></image>
				</view>
				<view class="nav_service_title">
					预约购药
				</view>
			</view>
		</view>

		<view class="doctor_list" v-if="isShow_envVersion==false" @click="gologin">
			医生列表
			<view class="info">
				更多 <text class="iconfont icon-jiantou1"></text>
			</view>
		</view>


<!--		<view class="doctor_list" v-if="isShow_envVersion" @click="gologin">-->
<!--			商品列表-->
<!--			<view class="info">-->
<!--				更多 <text class="iconfont icon-jiantou1"></text>-->
<!--			</view>-->
<!--		</view>-->

		<!-- 医生列表 -->
<!--		<view class="list" @click="gologin" v-if="isShow_envVersion">-->
<!--			&lt;!&ndash; 图片部分 &ndash;&gt;-->
<!--			<view class="list_info">-->
<!--				<view class="list_left">-->
<!--					<image src="https://p3.maiyaole.com/img/971/971752/org_org.jpg?v=1" mode=""></image>-->
<!--					<view class="it">-->
<!--						<view class="it_name">【日康】对乙酰氨基酚片0.3g*12片*2板/盒</view>-->
<!--						<view class="it_info">清热解毒,咽喉肿痛,牙痛</view>-->
<!--						<view class="it_price">-->
<!--							<text>￥34.00</text>-->
<!--							<text class="num">x1</text>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->

<!--		<view class="list" @click="gologin" v-if="isShow_envVersion">
			&lt;!&ndash; 图片部分 &ndash;&gt;
			<view class="list_info">
				<view class="list_left">
					<image src="https://p2.maiyaole.com/img/item/202210/24/202210241042513.jpg" mode=""></image>
					<view class="it">
						<view class="it_name">同仁堂 六味地黄丸(浓缩丸) 200丸/瓶</view>
						<view class="it_info">滋阴补肾。用于阴肾亏损，头晕耳鸣，腰膝酸软，骨蒸潮热，盗汗遗精。</view>
						<view class="it_price">
							<text>￥22.00</text>
							<text class="num">x1</text>
						</view>
					</view>
				</view>
			</view>

		</view>-->

		<view class="" v-if="isShow_envVersion==false">
			<view class="lists" @click="gologin" v-for="(item,index) in doctorList" :key="item.id">
				<!-- 图片部分 -->
				<view class="list_infos">
					<view class="list_lefts">
						<image :src="item.avatar || '/static/mine/avatar_1.png'" mode="医生头像"></image>
						<!-- 医生 -->
						<view class="list_title">
							<view class="titles_name">
								<text class="doctor_name">{{item.name}}</text>
								<text class="doctors">{{item.title}}</text>
							</view>
							<!-- 职称 -->
							<view class="list_yard">
								{{item.store}} &nbsp; {{item.depart}}
							</view>
						</view>
					</view>
				</view>
				<!-- 文字部分 -->
				<view class="cards">
					<!-- 擅长 -->
					<view class="list_going">
						擅长：{{item.good_at}}
					</view>

					<!-- 接诊率 -->
					<view class="list_nums">
						<view class="txt">问诊量 <text>{{item.inquiry_num }}</text></view>
						<view class="txt">接诊率 <text>{{item.accept_percent}}</text></view>
						<view class="txt">综合评分 <text>{{item.overall_score}}</text></view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		doctorList,
		getBanner,
		getOpen
	} from '../../request/api/api'
	import { isGuestMode } from '@/common/utils/auth.js'
	export default {
		data() {
			return {
				show: true,
				doctorList: [],
				list: [
					// '/static/home/banner.png',
					// '/static/home/banner.png',
					// '/static/home/banner.png'
				],
				info:[],
				isShow_envVersion: true
			}
		},
		onLoad() {
			setInterval(() => {
				this.isShow_envVersion = uni.getStorageSync('isShow_envVersion')
			})
		},
		created() {
      // 如果有token存着，就跳转到home
      if (uni.getStorageSync('token')) {
        // 如果有token存着，就跳转到home

        uni.reLaunch({
          url: "/pages/home/home",
          success() {
            uni.hideLoading();
          }
        })
      }
		},
		methods: {
			gologin() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userinfo')
				uni.removeStorageSync('token_h5')
				uni.removeStorageSync('user_id')
				uni.navigateTo({
					url: '/pages/login/login?type=' + 2
				})
			},
			getShow() {
				getOpen({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'open');
					this.show = res.data.data.open_issue
				})
			},
			// 医生列表
			getList() {
				doctorList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'list');
					// 使用 guest_mode 判断 + code/errcode 双重保险
					const isGuest = isGuestMode();
					const isNewFormat = isGuest && (res.data.code === 0 || res.data.code === '0');
					const isOldFormat = !isGuest && (res.data.errcode === 0 || res.data.errcode === '0');
					
					if (isNewFormat || isOldFormat) {
						// 新接口格式：从 result 取值
						// 老接口格式：从 data 取值
						const responseData = isGuest && res.data.result ? res.data.result : res.data.data;
						this.doctorList = (responseData.list || []).slice(0, 3)
					}
				})
				this.getBannered()
			},
			// 门店详情--轮播图
			getBannered() {
				getBanner({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					if (res.data.errcode == 0) {
						this.info = res.data.data
						this.list = (res.data.data.nav).map((item) => {
							return item.pic
						})
					}
				})
			},
		},
		mounted() {
			this.getShow()
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		width: 750rpx;
		max-height: 100%;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);

		.lists {
			width: 710rpx;
			background: linear-gradient(180deg, #E2F1FF 0%, #FBFDFF 54%, #FFFFFF 100%);
			border-radius: 16rpx;
			padding: 12rpx 30rpx 22rpx;
			margin: 32rpx auto 52rpx;
			box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			.list_infos {
				display: flex;
				justify-content: space-between;

				.list_lefts {
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					image {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						margin: 0 16rpx 0 0;
						vertical-align: middle;
					}

					.list_title {
						display: flex;
						flex-direction: column;

						.titles_name {
							margin: 16rpx 0;

							.doctor_name {
								height: 40rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #232323;
								line-height: 40rpx;
								margin-right: 16rpx;
							}

							.doctors {
								height: 40rpx;
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #232323;
								line-height: 40rpx;
							}
						}

						.list_yard {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.list_rights {
					width: 88rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: #4175EE;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;

				}
			}

			.cards {

				.list_nums {
					height: 34rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;
					color: #666666;
					margin: 18rpx 0 24rpx;
					display: flex;
					align-items: center;

					.txt {
						margin-right: 30rpx;

						text {
							font-size: 28rpx;
							color: #FEA54C;
							margin: 0 10rpx;
						}
					}
				}

				.list_going {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
					line-height: 44rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 16rpx auto;
				}

				.list_prices {
					display: flex;
					align-items: center;

					.picture {
						width: 140rpx;
						height: 60rpx;
						line-height: 58rpx;
						text-align: center;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #4175EE;
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #4175EE;
						margin: 0 30rpx 0 0;
					}
				}
			}
		}

		.head {
			width: 750rpx;
			height: 390rpx;
			padding: 20rpx;
			background: linear-gradient(180deg, #298DFF 0%, #9ECBFF 70%, #FFFFFF 100%);

			.search {
				width: 710rpx;
				margin: 20rpx auto 0;
			}

			.store {
				width: 700rpx;
				height: 78rpx;
				line-height: 78rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin: 0rpx auto 0rpx;

				.iconfont {
					font-size: 30rpx;
					color: #fff;
					margin-left: 12rpx;
				}
			}

			.area {
				width: 700rpx;
				height: 64rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0rpx auto;

				.place {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;

					.iconfont {
						font-size: 25rpx;
						color: #FFFFFF;
						margin-right: 10rpx;
					}
				}
			}
		}

		.section {
			width: 710rpx;
			margin: -170rpx auto 30rpx;
			height: 300rpx;

			.banner {
				width: 100%;
				height: 100%;
			}
		}

		.nav {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx auto;

			.nav_service {
				width: 348rpx;
				height: 178rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				background: url('/static/home/bg01.png') no-repeat;
				background-size: 100% 100%;

				.nav_service_img {
					width: 116rpx;
					height: 116rpx;
					vertical-align: middle;

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

				.nav_service_title {
					font-size: 40rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #FFFFFF;
				}
			}

			.nav_service:last-child {
				background: url('/static/home/bg02.png') no-repeat;
				background-size: 100% 100%;
			}
		}

		.doctor_list {
			width: 710rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #232323;
			margin: 44rpx auto 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.list {
			width: 710rpx;
			background: linear-gradient(180deg, #E2F1FF 0%, #FBFDFF 54%, #FFFFFF 100%);
			border-radius: 16rpx;
			padding: 30rpx;
			margin: 32rpx auto 52rpx;
			box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			.list_left {
				display: flex;
				justify-content: space-around;
				margin-bottom: 22rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
				}

				.it {
					width: 450rpx;
					font-family: PingFang SC-Regular, PingFang SC;

					.it_name {
						height: 80rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #232323;
					}

					.it_info {
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;

						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin: 12rpx 0 34rpx 0;
					}

					.it_price {
						display: flex;
						justify-content: space-between;
						align-items: center;

						text {
							font-size: 28rpx;
							font-weight: bold;
							color: #232323;
						}

						.num {
							font-size: 28rpx;
							font-weight: 400;
							color: #232323;
						}
					}
				}
			}

			.card {

				.list_nums {
					height: 34rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;
					color: #666666;
					margin: 18rpx 0 24rpx;
					display: flex;
					align-items: center;

					.txt {
						margin-right: 30rpx;

						text {
							font-size: 28rpx;
							color: #FEA54C;
							margin: 0 10rpx;
						}
					}
				}

				.list_going {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
					line-height: 44rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 16rpx auto;
				}

				.list_price {
					display: flex;
					align-items: center;

					.picture {
						width: 140rpx;
						height: 60rpx;
						line-height: 58rpx;
						text-align: center;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #4175EE;
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #4175EE;
						margin: 0 30rpx 0 0;
					}
				}
			}
		}
	}
</style>
