<template>
	<view class="container">
		<z-nav-bar :title="prescriptDetail.name" bgColor="#5188e5" fontColor="#fff"></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.name}}
					</view>
				</uni-section>
				<uni-section class="mb-10" titleFontSize="18px" title="城市" type="line"
					v-if="prescriptDetail.city_name && prescriptDetail.city_name != ''">
					<view class="item" v-html="prescriptDetail.city_name">
					</view>
				</uni-section>
				<uni-section class="mb-10" titleFontSize="18px" title="详细介绍" type="line"
					v-if="prescriptDetail.content && prescriptDetail.content != ''">
					<view class="item" v-html="prescriptDetail.content">
					</view>
				</uni-section>

			</view>
		</view>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
export default {
	data() {
		return {
			playData: {},
			prescriptDetail: {
				images: []
			},
			id: null,
			indicatorDots: true,
			autoplay: true,
			interval: 5000,
			duration: 500,
		}
	},
	onLoad(e) {
		this.id = 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/medicaldes/getInheritById?id=" + this.id,
				method: "POST",	
				data: {
					
				},
				header: {
					'Content-Type': 'application/json'
				},
			}).then(res => {
				console.log(res, '内容获取成功')
				if (res.code == 0) {
					this.prescriptDetail = res.result
					if (this.prescriptDetail.img) {
						this.prescriptDetail.images = this.prescriptDetail.img.split(';');
					}
				}
			}).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 {
		
		.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>