<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="prescriptDetail.title"></z-nav-bar>
		<view class="uni-margin-wrap" v-if="prescriptDetail && prescriptDetail.images && prescriptDetail.images.length > 0">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in prescriptDetail.images" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFit" @click="previewImage(item)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="contentBox">			
			<view class="content">
				<uni-section class="mb-10" titleFontSize="18px" title="方剂名称" type="line">
					<view class="item">
						{{prescriptDetail.title}}
					</view>
				</uni-section>
				<uni-section class="mb-10" titleFontSize="18px" title="出处" type="line" v-if="prescriptDetail.source && prescriptDetail.source != ''" >
					<view class="item" v-html="prescriptDetail.source">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="古代计量" type="line" v-if="prescriptDetail.doseOld && prescriptDetail.doseOld != ''" >
					<view class="item" v-html="prescriptDetail.doseOld">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="现代计量（仅供参考）" type="line" v-if="prescriptDetail.doseNow && prescriptDetail.doseNow != ''" >
					<view class="item" v-html="prescriptDetail.doseNow">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="煎服法" type="line" v-if="prescriptDetail.preUsage && prescriptDetail.preUsage != ''">
					<view class="item" v-html="prescriptDetail.preUsage">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="方歌" type="line" v-if="prescriptDetail.preSong && prescriptDetail.preSong != ''">
					<view class="item" v-html="prescriptDetail.preSong">
					</view>
				</uni-section>

				<uni-section class="mb-10" titleFontSize="18px" title="主治" type="line" v-if="prescriptDetail.indications && prescriptDetail.indications != ''">
					<view class="item" v-html="prescriptDetail.indications">
					</view>
				</uni-section>
				
				<!-- <uni-section class="mb-10" titleFontSize="18px" title="配伍" type="line">
					<view class="item" v-if="prescriptDetail.compatibility && prescriptDetail.compatibility != ''" v-html="prescriptDetail.compatibility">
					</view>
					<view class="item" v-else>
						暂无
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="文献" type="line">
					<view class="item" v-if="prescriptDetail.literature && prescriptDetail.literature != ''" v-html="prescriptDetail.literature">
						
					</view>
					<view class="item" v-else>
						暂无
					</view>
				</uni-section> -->
				
			</view>
		</view>
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	export default {
		data() {
			return {
				playData: {},
				prescriptDetail: {
					images:[]
				},
				prescriptId: null,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500
			}
		},
		onLoad(e) {
			this.prescriptId = e.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			// 放大图片
			previewImage(url) {
				console.log(url)
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['很抱歉，暂不支持保存图片到本地'],
						success: function(res) {
							// console.log(res,'+++++')
						}
					}
				});
			},
			// 方剂详情
			getDetail() {
				$http.request({
					url: "book/prescript/prescriptDetail",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						// loadAnimate: 'none', // 请求加载动画
						'prescriptId': this.prescriptId
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '内容获取成功')
					if (res.code == 0) {
						this.prescriptDetail = res.prescript
						if(this.prescriptDetail.images){
							this.prescriptDetail.images = JSON.parse(this.prescriptDetail.images)
						}
					}
				}).catch(e => {
					// this.titleList = []		
					console.log(e)
				})
			}
		},
		components: {
			musicPlay
		},
	}
</script>

<style lang="scss" scoped>
	.contentBox{padding-bottom: 20rpx;}
	.mb-10{ margin-bottom: 10px;}
	.content{font-size: 28rpx;}
	.swiper-item{
		image{margin: 0 auto; height:250rpx;}
		
	}
	.uni-margin-wrap{ margin-bottom: 20rpx; padding-top: 20rpx;
		background-color: #fff;
	}
	.container {
		padding: 10rpx;
		// background-color: #fff;
		.item{color: #666; padding:10rpx 20rpx; padding-bottom: 20rpx; line-height: 46rpx;}
	}

	.flexbox {
		display: flex;
	}
	
	/deep/ .uni-section-header__decoration.line{background-color: #18bc37;}
</style>