<!-- 问诊医生主页 -->
<template>
	<div class="doctor-detail"
			 style="height: calc(100vh - 40px);">
		<van-list v-model:loading="listLoading"
							loading-text="正在加载..."
							:finished="listFinished"
							v-model:error="listError"
							error-text="/(ㄒoㄒ)/~~ 请求失败，点击重新加载"
							finished-text=">_< 到底啦，别拉了~"
							@load="getDoctByCode">

			<HeaderDoctorInfo :doctor="doctor"
												style="position: relative;">
				<template v-slot:attention>
					<div style="font-size: 13px;width: 60px; position: absolute;top: 5px;right: 10px;margin: 6px 2px 0 0;text-align: right;">
						<section v-if="doctor.isConcern"
										 style="color: var(--color-danger);"
										 @click="unConcern">
							<van-icon name="like"
												size="13"
												color="var(--color-danger)" />
							已关注
						</section>
						<section v-else
										 style="color: #fff;"
										 @click="addConcern">
							<van-icon name="like-o"
												size="13" />
							关 注
						</section>
					</div>
				</template>
			</HeaderDoctorInfo>

			<van-grid v-if="false"
								direction="horizontal"
								:column-num="4"
								style="margin: 10px 0">
				<van-grid-item>
					<div class="flex__column">
						<span class="stat__label text__center">咨询</span>
						<span class="stat__num text__center">{{ !doctor.consultNum ? 0 : doctor.consultNum }}</span>
					</div>
				</van-grid-item>
				<van-grid-item>
					<div class="flex__column text__center">
						<span class="stat__label text__center">粉丝</span>
						<span class="stat__num text__center">{{ !doctor.concernNum ? 0 : doctor.concernNum }}</span>
					</div>
				</van-grid-item>
				<van-grid-item>
					<div class="flex__column">
						<span class="stat__label text__center">访问</span>
						<span class="stat__num text__center">{{ doctor.visitNum }}</span>
					</div>
				</van-grid-item>
				<van-grid-item>
					<div class="flex__column">
						<span class="stat__label text__center">接诊率</span>
						<span class="stat__num text__center">100%</span>
					</div>
				</van-grid-item>
			</van-grid>
			<div @click="handleToPay(2)">
				<van-cell class="reset__flex"
									is-link
									:value="`￥${(doctor.consultMoney === undefined || doctor.consultMoney === null) ? ' - ' : doctor.consultMoney}元/次`"
									style="margin: 10px 0;">
					<template #title>
						<div class="flex__row flex__row__start">
							<svg version="1.1"
									 id="Layer_1"
									 xmlns="http://www.w3.org/2000/svg"
									 xmlns:xlink="http://www.w3.org/1999/xlink"
									 x="0px"
									 y="0px"
									 width="55px"
									 height="55px"
									 viewBox="0 0 200 200"
									 enable-background="new 0 0 200 200"
									 xml:space="preserve">
								<image id="image0"
											 width="200"
											 height="200"
											 x="0"
											 y="0"
											 href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAIMUlEQVR4nO2da2wU1xXHf3d3ZzHG9to8nBhs764BG3vcgiMeAuzGJtAQ2qLSUCW00IKgTUsroqI8+qFIfURtk6KoEkLtBwgViQIqktu0UiCUAOYlCOYRJQbHNH6x4IIbsPGa4H14+qGOAzb27tqzs9fh/j7t7H2dO3/NOWfuru4FhUKhUCgUXwhEog0YEuXlDnfz9acwxApgFjAW+ASoRvBmU+6Ev3L4cCixRg6NESeI1/vlgm7Cu4EZg1Q7Zxfhp+vra+usssssRpQgPWIcATJdGWOZOa8Cz9RCxoxJobPTT2PdBapPHKa97QbAtbDoLvPVX7yUYLNjYgQJ8m2723uhGpjhnlLA15avwqmN6lcrGOjin3t20lxfB0KcbaovnA17wtbbOzTsiTYgWtx5fAfEelf6WJav+jFOZ38xAOx2B5MLi6n94ByBO59mZaS3Xmxra/3QYnOHzIgRJD0987dAfuljS8jKdgPQ0X6T/W+9ycG9lVzzNZKV42VUUhJ2uwOHw0HDpYsIgbOtrXV3Yq2PHluiDRiIHG9RWa5X3+326lfcXj0EfB3AM3lab53D+yr51tKvcq76GN/8xiKq3qnsLfNMLgDAgKVurx5y5+k+d56+KzdPL7V2JrEhnyDl5Y7cvKI/2RBHBDwFTKTnSR6TkkZKmqu36pXmRlavXkly8mjWrP4uvqbG3rJUVwbJKamfXdoxmITB08LgqNurb6W83GHdpKJHOqNym69vEYb4kUPTmDV/AQXFJaSmubjV3kZS0miE+DwPyc71smPHG6xZs5LXdrxBttvTWyaEYNUPN3Kn6w5prnQ6brVT+8FZqo8fJBQKrXc3tdIEP0nEHAdDqiwrx1tUZkMccWgay1c+w8M9sWIgOtpvUvXO3/A1NpDtyePRx5eR6koftM1VXxOVr/+ZUCiEYaO0+eOa42bOYbjEXZCcyYXFdsO2zuhmIQIPMCZSm7nljzOnbGHcbDp55F+crNofbfVODBqFjQNh0b3t8scX45qxxS2G6LrudHv1rbZu2/uGwbMIdKIQA6CguCReZgEw7Usx9T8GgW4YPGvrtp13e/Utuq4742VbXGKIrutOfyd7ESzQ7DaenJPN4hlZ5D2UwmjnwJn2/E3vEgiFSYvgdoZLmisDAKfDzvHfPDZo3U8DYeqv+Xn7XAuV7/nsoXD3T/23KdR1fUlNTU3AbNvi4rLcXn0rsD7TNYo/fv8RpmalRmwDsOwPx/DduB0Pk+5LzrhkKp+LPguuu9rBz3ae5Xp7FyC2NDV8uMFsm0x3WTmTC4uBZzS7LSYxACqKM7EJa/IMmxBUFGfG1CZ/Yiqvfq8Eh90GGOtzpxTpZttlusuyG7Z1BtifnJMdkxgAG57IZ8MT+WabZCoFE9NYNmsSe05etouQWAtsNLN/058QAxYBLJ6RZXbX0rCkpGduQiwyu2/zsyyDXADvQymmdy0LeQ9/9uQbg78oDYF4ZFkpAMkDZFNHa1t57cgVPrr8CcGQnKvimsNO/kQX6xZ4KC0Y36/8rrnF5pOjwNKlk6O1rWze18wrmzcxe+Z0NE2zcvioCQaDnDpZzQvP/QrgvqLEC0sXF7dX+Xhl8ybmz50prRgAmqZRWjaX37/8C7YdbLB0bEsFqfPdYPbM6VYOOSzmzp/DpZYOS8e0VJBgKCz1k9EXTdMIBK3984p8v4c84ChBJEMJIhlKEMmQ7idcgJKSxbR1+HuvM9JSOHt236BtKhauoLHx8oDlHk8Ohw7sGrDu3eWJREpB2jr8vD+vovd6+olDEdvEcjNluPEDoVyWZChBJEMKl9U3ZqQn3fs30fSkUXinfP7LXjQxZaQihSB9Y0Zfqh6Zd891NDFlpCKFIGYQKcuKhMqyTEaGm2kGUgiSkZZyjxtKTxp1j5v6ypkTtHd13VP/i4oUgvQN0HcHcID2ri4a/n3MSpMShkp7JUMJIhlSuKy+9I0p0cSMSOtTsax1JRIpBRnKS1+kmynDzY4G5bIkQwkiGUoQyVCCSIYUQX24GdJw2tyvbSKRQpB4ZEgy3NyhoFyWZChBJEMJIhlKkAh4PDmWjidFULcii4ql77s5dGAX/93za9PGiYQUgjxIWVQklMuKQMXCFZaOpwSJgJluMRqUIJKhBJEMKYL6QBnTULOq4a6D9f3eSqQQJJqMaahZ1XCzMavTXuWyJEMJEgGV9kqGSnsl44EM6vHOoGLt927UWpYF7WRGuawIqKAuGSqoP+AoQSTDUkE0h51gMGjlkMMiEAjg1KzNeywVJD97LKdOn7dyyGFx8sR7MW91O1wsFWTto9m8+PxLHD1+WuonJRgMcrTqBC++8BI/WOCJ3MBE4vE8dgCptwPhfjuTlk2bgBCCV375O/l3JZ2Uzs+XTmV+wYR+5Z1dvbvM3TJ7bPMFEVzGoKjhmh89x9WvuLRgvKW7fMaD+v909nwSzWb3HY+drfcD7D3fYnbX0vD2+as9n4yoDyGJFvNjiM3YBoQrT/mou2rtjp5WUHvlFn8/7QMIG2G2m92/6cfmtd9obU3PyJzQbRizj33Uyqy8cYxLvf+ZgyON2iu32LjzPP47IYRgS1NjzetmjxGXcwyzJ2W+Gwgyr7MrnPePM1e56Q+QlqSRmqyh2UfWu+jtQJhaXwd/qWrg5bcu4r8TAsSB8WOTVre0tHSbPV7cDuvQdd3pvy02g7GeEXSAZQRCQrB1XEbS82fOnIlL3h7301NypxTpIiTW/v9oB8NDz2b9Iwg/iEYw9hthtjc311xItEEKhUKhUCgUCoVCoVAoFAqFQqFQKGLif81hq5lJENnbAAAAAElFTkSuQmCC" />
							</svg>
							<div class="flex__column">
								<span class="stat__num text__left">图文咨询</span>
								<span class="stat__label text__left"
											style="font-size: 12px">专业医生一对一解答疑惑</span>
							</div>
						</div>
					</template>
				</van-cell>
			</div>
			<van-cell class="reset__flex"
								is-link
								:value="`￥${!doctor.consultMoney ? 0 : doctor.consultMoney}元/次`"
								style="margin: 10px 0;color:var(--color-danger);"
								@click="handleToPay(1)">
				<template #title>
					<div class="flex__row flex__row__start">
						<div style="width: 55px;height: 55px;">
							<svg t="1681796973454"
									 class="icon"
									 viewBox="0 0 1024 1024"
									 version="1.1"
									 xmlns="http://www.w3.org/2000/svg"
									 p-id="10182"
									 width="42px"
									 height="50px"
									 style="margin-left: 9px;">
								<path d="M830.44920889 532.74055111c-106.67804445 0-193.96494222 87.28120889-193.96494222 193.96494222 0 106.67804445 87.28689778 193.95925333 193.96494222 193.95925334 106.68373333 0 193.97063111-87.28120889 193.97063111-193.95925334-0.00113778-106.68373333-87.28689778-193.96494222-193.97063111-193.96494222z m126.07488 145.47171556L820.75079111 813.98670222c-9.69841778 9.70410667-9.69841778 9.70410667-19.39228444 9.70410667-9.70410667 0-9.70410667 0-19.40252445-9.70410667l-67.88437333-77.58279111c-9.70410667-9.69841778-9.70410667-29.09525333 0-38.79367111 9.69841778-9.69841778 29.09070222-9.69841778 38.78912 0l58.19164444 58.19050667 116.37646222-116.38215112c9.70410667-9.69272889 29.09525333-9.69272889 38.79367112 0 0.00568889 9.69841778 0.00568889 29.09525333-9.69841778 38.79367112zM152.48497778 105.95328h69.66044444v-62.10673778c0-17.74478222-17.74023111-35.48956445-35.48501333-35.48956444s-35.48956445 17.74478222-35.48956444 35.48956444v62.10218667h1.31413333v0.00455111z"
											fill="#25CCBE"
											p-id="10183"
											data-spm-anchor-id="a313x.7781069.0.i3"
											class=""></path>
								<path d="M587.23100445 735.88280889c0-133.08700445 106.46528-239.55114667 239.54659555-239.55114667V176.92785778c0-35.48956445-26.61262222-62.10218667-62.10218667-62.10218667H649.33319111v62.10218667c0 17.74478222-17.74478222 35.48956445-35.48956444 35.48956444s-35.48501333-17.74478222-35.48501334-35.48956444v-70.97457778h70.97457778v-62.10673778c0-17.74478222-17.74478222-35.48956445-35.48501333-35.48956444-17.74933333 0-35.48956445 17.74478222-35.48956445 35.48956444v62.10218667H223.46524445v62.10673778c0 17.74478222-17.74478222 35.48956445-35.48956445 35.48956444s-35.48956445-17.74478222-35.48956445-35.48956444v-62.10218667h-1.31413333v-0.00455111h-87.40522667c-35.48956445 0-62.10673778 26.61717333-62.10673777 62.10673778v700.90979555c0 35.48956445 26.61717333 62.10673778 62.10673777 62.10673778h647.67089778c-70.97685333-26.61717333-124.20664889-106.46414222-124.20664888-195.18919111z m-22.74417778-451.87185778h46.02197333l-6.02680889 8.49237334c20.08746667 29.95086222 46.56924445 53.41752889 79.44192 70.40227555-6.02680889 9.13180445-12.78520889 20.45496889-20.27178666 33.96835555-35.4304-21.73041778-62.55047111-47.29969778-81.36021334-76.7021511-16.98474667 23.19473778-45.47356445 49.30901333-85.46872889 78.34624-5.29635555-10.77361778-11.59736889-22.00462222-18.90190222-33.69415112 39.81198222-24.83768889 68.66716445-51.77457778 86.56554667-80.81294222z m56.15729778 112.31459556l24.92757333 24.65450666c-33.23790222 28.85518222-74.42090667 54.97173333-123.5456 78.34624-5.4784-10.04316445-12.14464-20.45383111-19.99758223-31.22858666 49.12469333-21.18314667 88.66474667-45.10833778 118.6156089-71.77216z m-125.46389334 16.43633778c35.97653333-15.70474667 66.84103111-34.78983111 92.59121778-57.25297778l25.74904889 23.01041778c-26.29745778 22.82837333-58.80604445 44.10368-97.52120889 63.82705777-5.29635555-8.58112-12.2368-18.44224-20.81905778-29.58449777z m-41.08970666-130.11968a1745.63328 1745.63328 0 0 1 36.70698666 50.67889777c-22.82837333 14.06293333-34.51562667 21.18542222-35.06403556 21.36746667-11.50520889-20.27178667-22.55530667-38.07687111-33.14688-53.41752889l31.5039289-18.62883555z m-292.29169778 153.9527111v-69.71733333a322.59868445 322.59868445 0 0 1-22.73735112 23.42115556c-2.55772445-11.50520889-5.93692445-24.47018667-10.13532444-38.89948445 21.54951111-21.18314667 37.5296-44.19356445 47.93912889-69.03239111h38.35107555a450.46215111 450.46215111 0 0 1-7.66976 16.43633778H395.74186667v27.39427555H192.20593778a370.45248 370.45248 0 0 1-9.31384889 13.97077334h193.39946666v96.42666666H228.77639111a186.75484445 186.75484445 0 0 1-9.17731556 12.6008889h156.69248v23.01041777c-18.90190222 11.77941333-39.58328889 22.64746667-62.04643555 32.59847111 25.56586667 5.29749333 54.55758222 9.31384889 86.97514667 12.05361778-8.94976 12.05361778-16.07338667 23.37450667-21.36746667 33.96835556-41.73027555-6.48419555-78.84913778-15.79804445-111.35544889-27.94154667-33.69415111 11.86929778-70.72312889 22.09678222-111.08238222 30.68131555-5.66272-9.13180445-12.51100445-18.99292445-20.54485334-29.58449777 32.68949333-5.29749333 62.86904889-11.64288 90.5375289-19.03843556-13.69770667-7.12248889-26.29859555-14.88327111-37.80380445-23.28462222-11.96373333 10.86805333-25.06524445 20.68252445-39.31022222 29.44796445-6.39203555-8.03384889-13.78872889-16.43633778-22.18894223-25.20177778 24.83655111-14.70122667 45.06282667-31.13642667 60.6776889-49.30901334h-26.98353778z m239.57276444 401.66513778H139.48131555c-14.47139555 0-26.31111111-11.83971555-26.3111111-26.31111111s11.83971555-26.31111111 26.3111111-26.31111111h261.89027556c14.47139555 0 26.31111111 11.83971555 26.31111111 26.31111111 0.00113778 14.47139555-11.83971555 26.31111111-26.31111111 26.31111111z m0-121.15512888H139.48131555c-14.47139555 0-26.31111111-11.83971555-26.3111111-26.31111112s11.83971555-26.31111111 26.3111111-26.31111111h261.89027556c14.47139555 0 26.31111111 11.83971555 26.31111111 26.31111111s-11.83971555 26.31111111-26.31111111 26.31111112z m26.14613334-199.42513778c4.01749333-4.93112889 6.02680889-12.41656889 6.02680888-22.46314667V409.47484445h-24.10723555v-37.25539556h61.08842667v105.74051556c6.93816889-5.66044445 15.06645333-12.14350222 24.38030222-19.44917334 1.82613333 17.16792889 3.92533333 30.86563555 6.30101333 41.09084444-23.01041778 16.80042667-41.18300445 31.86688-54.51320889 45.19936l-19.17610666-27.12120888z m64.10126222 7.94510222c63.91808-16.80042667 115.69152-44.92629333 155.32259555-84.37304889l26.29859556 26.02439111c-40.9088 39.44675555-95.05678222 69.12227555-162.44508445 89.02997334-5.66272-10.41066667-12.05361778-20.63815111-19.17610666-30.68131556z"
											fill="#25CCBE"
											p-id="10184"
											data-spm-anchor-id="a313x.7781069.0.i1"
											class=""></path>
								<path d="M198.23160889 398.24384h141.62602666v14.79224889H198.23160889zM319.31278222 471.93315555h-96.69973333c12.78293333 7.76192 27.94154667 14.61020445 45.47356444 20.54485334 18.35349333-6.20885333 35.42812445-13.05713778 51.22616889-20.54485334zM198.23160889 363.72707555h141.62602666v14.7922489H198.23160889z"
											fill="#25CCBE"
											p-id="10185"
											data-spm-anchor-id="a313x.7781069.0.i6"
											class=""></path>
							</svg>
						</div>
						<div class="flex__column">
							<span class="stat__num text__left">线上复诊</span>
							<span class="stat__label text__left"
										style="font-size: 12px">线上对症开处方</span>
						</div>
					</div>
				</template>
			</van-cell>
			<van-cell v-if="false"
								class="reset__flex"
								is-link
								value="立即预约"
								style="margin: 10px 0">
				<template #title>
					<div class="flex__row flex__row__start">
						<div style="width: 55px; height: 55px">
							<svg version="1.1"
									 id="Layer_1"
									 xmlns="http://www.w3.org/2000/svg"
									 xmlns:xlink="http://www.w3.org/1999/xlink"
									 x="0px"
									 y="0px"
									 width="43px"
									 height="43px"
									 viewBox="0 0 200 200"
									 enable-background="new 0 0 200 200"
									 xml:space="preserve"
									 style="margin: 2px 6px">
								<image id="image0"
											 width="200"
											 height="200"
											 x="0"
											 y="0"
											 href="data:image/png;base64,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" />
							</svg>
						</div>
						<div class="flex__column">
							<span class="stat__num text__left">预约挂号</span>
							<span class="stat__label text__left"
										style="font-size: 12px">分时段预约，精准便捷就医</span>
						</div>
					</div>
				</template>
			</van-cell>
			<van-cell v-if="false"
								class="flex__column"
								style="margin: 10px 0">
				<div class="chara__header flex__row flex__row__between">
					<span class="chara__header__title">特色诊疗</span>
					<router-link to="/doctor-info">
						<span class="chara__header__more">更多
							<van-icon name="arrow" />
						</span>
					</router-link>
				</div>
				<div class="chara__content flex__column">
					<div v-for="(item, index) in 5"
							 :key="item">
						<div class="grop__backg">
							<div class="grop__num"
									 :style="{ background: prog_color[index].color, width: `${(index + 2) * 10}%`, }">
								月经不调
							</div>
						</div>
					</div>
				</div>
			</van-cell>
			<van-cell class="flex__column comment_top"
								style="border-bottom: 1px solid #ebeaea">
				<div class="flex__column">
					<span class="comment__title">用户评论</span>
					<div class="flex__row flex__row__warp"
							 style="margin: 10px 0">
						<div v-for="item in commentTags"
								 :key="item.id"
								 class="comment__filter"
								 :class="{ comment__filter__not: item.id !== commentIndex, comment__filter__is_active: item.id === commentIndex }"
								 @click="commentFilter(item.id)">
							{{ item.text }}
						</div>
					</div>
				</div>
			</van-cell>
			<van-cell id="moreMerchant">
				<div v-for="item in getComments(comments)"
						 :key="item.id"
						 class="comment__item">
					<div class="flex__row flex__row__between">
						<span>{{ item.tel }}</span>
						<van-rate v-model="item.halfScore"
											readonly
											:count="5"
											allow-half
											color="#FCD01E" />
					</div>
					<div>{{ !item.content ? '暂无评价' : item.content }}</div>
					<div class="flex__row flex__row__between comment__type">
						<span>{{ item.createTime }}</span>
						<span>图文咨询</span>
					</div>
				</div>
			</van-cell>
			<div class="loading"></div>
		</van-list>
	</div>
</template>

<script>
import { reactive, toRefs, nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { store } from 'vue-helper'
import { axios, UPLOAD_URL } from 'axios'
import HeaderDoctorInfo from './components/header-doctor-info.vue'
import { format } from '@/utils/date-util.mjs'
export default {
	name: 'doctor-detail',
	components: {
		HeaderDoctorInfo
	},
	setup(props, context) {
		const route = useRoute();
		const router = useRouter();
		const state = reactive({
			prog_color: [{
				index: 0,
				color: '#97C576'
			}, {
				index: 1,
				color: '#77C6F0'
			}, {
				index: 2,
				color: '#E79784'
			}, {
				index: 3,
				color: '#929AEF'
			}, {
				index: 4,
				color: '#F0B466'
			}],
			comments: [], // 评价列表
			commentIndex: -1, // 评论筛选标记
			commentTags: [], // 评论标签列表
			listLoading: false, // 评论加载
			listFinished: false,
			listError: false,
			pageNum: 1,
			pageSize: 20,
			doctor: {},
			ske_loading: true
		})

		state.doctor.doctCode = route.query.doctCode

		/**
		 * 关注医生
		 */
		function addConcern() {
			const openid = store.getters.getOpenid
			const patient = store.getters.getPatient
			if (!openid || !patient || (patient && !patient.patientId)) return vant.Toast.fail('参数缺失，关注失败')
			axios.post('/micro/doctor/addConcern', {
				doctCode: route.query.doctCode,
				patientId: patient.patientId,
				openid: openid
			}).then(response => {
				if (response.code === 200) {
					state.doctor.isConcern = true
					vant.Toast.success('关注成功')
				}
			})
		}

		/**
		 * 取消关注医生
		 */
		function unConcern() {
			const openid = store.getters.getOpenid
			const patient = store.getters.getPatient
			if (!openid || !patient || (patient && !patient.patientId)) return vant.Toast.fail('参数缺失，取消关注失败')
			axios.post('/micro/doctor/unConcern', {
				doctCode: route.query.doctCode,
				patientId: patient.patientId,
				openid: openid
			}).then(response => {
				if (response.code === 200) {
					state.doctor.isConcern = false
					vant.Toast.success('已取消关注')
				}
			})
		}

		/**
		 * 通过评价标签筛选评价
		 * @param {number} id 评价标签id
		 */
		function commentFilter(id) {
			if (state.commentIndex === id) {
				state.commentIndex = -1
				return
			}
			state.commentIndex = id
		}

		/**
		 * 通过医生code查询评价
		 */
		function getDoctByCode() {
			axios.get(`/micro/order_eval/getByDoctCode?doctCode=${route.query.doctCode}&pageNum=${state.pageNum}&pageSize=${state.pageSize}`).then(response => {
				if (response.code === 200) {
					if (response.data.list && response.data.total) {
						response.data.list.forEach(i => {
							i.halfScore = i.score / 2
						})
						state.comments = [...state.comments, ...response.data.list]
						if (state.comments.length === response.data.total) state.listFinished = true
						if (state.comments.length < response.data.total) state.pageNum += 1
						state.listLoading = false
					} else {
						state.listFinished = true
						state.listLoading = false
					}
					if (eval(route.query.isComment)) {
						nextTick(() => {
							document.getElementsByClassName('doctor-detail')[0].scrollTop = document.getElementById("moreMerchant").offsetTop - 25
						})
					}
				} else {
					state.listLoading = false
					state.listError = true
				}
			})
		}

		/**
		 * 获取评论标签
		 */
		function getCommTags() {
			axios.get('/micro/order_tag/getOpenList').then(response => {
				if (response.code === 200) {
					state.commentTags = response.data
				}
			})
		}
		getCommTags()

		/**
		 * 新增访问人
		 */
		function addVisit() {
			const visit = JSON.parse(localStorage.getItem('ynxbd-micro-web-visit'))
			if (!visit || (visit.date && visit.date !== format(new Date(), 'yyyy-MM-dd'))) {
				const visitData = {
					date: format(new Date(), 'yyyy-MM-dd'),
					list: [route.query.doctCode]
				}
				localStorage.setItem('ynxbd-micro-web-visit', JSON.stringify(visitData))
			} else {
				if (visit.date === format(new Date(), 'yyyy-MM-dd') && visit.list.includes(route.query.doctCode)) {
					return
				} else {
					visit.list.push(route.query.doctCode)
					localStorage.setItem('ynxbd-micro-web-visit', JSON.stringify(visit))
				}
			}
			const openid = store.getters.getOpenid
			const patient = store.getters.getPatient
			if (!openid || !patient || (patient && !patient.patientId)) return

			axios.post('/micro/online_doctor/addVisit', {
				doctCode: route.query.doctCode,
				patientId: patient.patientId,
				openid: openid
			})
		}

		/**
		 * 前往咨询
		 */
		async function handleToPay(flag) {
			const openid = store.getters.getOpenid
			const resp = await axios.get(`/micro/online_doctor/getDocInfo?doctCode=${route.query.doctCode}&openid=${openid}`)
			if (resp.code === 200) {
				state.doctor = resp.data
			}

			if (!state.doctor.onlineState) return vant.Toast.fail({ message: '【提示】医生暂未接诊，请选择其他医生咨询！' })
			router.push({
				path: '/consultation-payment',
				query: { doctCode: state.doctor.doctCode, visitType: flag }
			})
		}

		/**
		 * 获取医生信息
		 */
		function getDoctInfo() {
			const openid = store.getters.getOpenid
			axios.get(`/micro/online_doctor/getDocInfo?doctCode=${route.query.doctCode}&openid=${openid}`).then(resp => {
				if (resp.code === 200) {
					state.ske_loading = false
					state.doctor = resp.data
					addVisit()
				}
			})
		}
		getDoctInfo()

		/**
		 * 评价筛选
		 */
		function getComments(comments) {
			if (state.commentIndex === -1) return comments
			const list = []
			comments.forEach(item => {
				if (item.tags.map(o => o.id).includes(state.commentIndex)) {
					list.push(item)
				}
			})
			return list
		}

		function getScore(score) {
			return score / 2
		}

		return {
			...toRefs(state),
			UPLOAD_URL,
			commentFilter,
			handleToPay,
			getComments,
			getDoctByCode,
			getScore,
			addConcern,
			unConcern
		}
	},
}
</script>
<style scoped>
.doctor-detail {
	overflow-x: hidden;
	overflow-y: auto;
}

.stat__num {
	color: #707070;
	font-size: 14px;
	font-weight: 550;
}

.text__center {
	text-align: center;
}

.text__left {
	text-align: left;
}

.stat__label {
	color: #b3b2b2;
	font-size: 12px;
}

.reset__flex >>> .van-cell__title {
	flex: 2;
}

.reset__flex >>> .van-cell__value,
.reset__flex >>> .van-cell__right-icon {
	line-height: 50px;
	color: var(--color-danger);
}

.chara__header__title {
	margin-left: 10px;
	color: #707070;
	font-size: 14px;
	font-weight: 550;
}

.comment__title::before,
.chara__header__title::before {
	position: absolute;
	content: '';
	top: 2px;
	left: 0;
	width: 3px;
	height: 20px;
	background: #4ecaa3;
}

.chara__header__more {
	color: #b3b2b2;
}

.grop__backg {
	width: calc(100% - 15px);
	height: 24px;
	background: #f3f3f3;
	margin: 6px 0;
	border-radius: 12px;
}

.grop__num {
	height: 24px;
	border-radius: 12px;
	white-space: nowrap;
	color: #ffffff;
	padding-left: 15px;
}

.comment__title {
	margin-left: 10px;
	color: #5c5c5c;
	font-size: 14px;
}

.comment__filter {
	margin-right: 10px;
	padding: 0px 8px;
	margin-bottom: 8px;
	border-radius: 6px;
	font-size: 12px;
}

.comment__filter__not {
	color: #5c5c5c;
	border: 1px solid #e6e4e4;
}

.comment__filter__is_active {
	color: #4ecaa3;
	background: #e9fff5;
	border: 1px solid #4ecaa3;
}

.comment__item {
	padding: 8px 0;
	border-bottom: 1px solid #ebeaea;
}

.comment__type {
	font-size: 13px;
	color: #b3b2b2;
}

.comment__item div:nth-child(1) span,
.comment__item div:nth-child(2) {
	font-size: 14px;
	color: #2e2e2e;
}
</style>
