<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="prescriptDetail.name"></z-nav-bar>
		<view class="uni-margin-wrap" v-if="prescriptDetail && prescriptDetail.img && prescriptDetail.img.length > 0">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in prescriptDetail.img" :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" v-if="prescriptDetail.latinname && prescriptDetail.latinname != ''" >
					<view class="item">
						{{prescriptDetail.latinname}}
					</view>
				</uni-section>
				<uni-section class="mb-10" titleFontSize="18px" title="性味功效" type="line" v-if="prescriptDetail.property && prescriptDetail.property != ''" >
					<view class="item" v-html="prescriptDetail.property">
					</view>
					<view class="item" v-html="prescriptDetail.taste">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="来源产地" type="line" v-if="prescriptDetail.insuranceType && prescriptDetail.insuranceType != ''" >
					<view class="item" v-html="prescriptDetail.insuranceType">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="归经" type="line" v-if="prescriptDetail.tropism && prescriptDetail.tropism != ''" >
					<view class="item" v-html="prescriptDetail.tropism">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="别名" type="line" v-if="prescriptDetail.othername && prescriptDetail.othername != ''">
					<view class="item" v-html="prescriptDetail.othername">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="简述" type="line" v-if="prescriptDetail.description && prescriptDetail.description != ''">
					<view class="item" v-html="prescriptDetail.description">
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="说明" type="line" v-if="prescriptDetail.information && prescriptDetail.information != ''">
					<view class="item" v-html="prescriptDetail.information">
					</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: {
					img:[]
				},
				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/materials/getMaterials?id=" + this.id,
					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.result
						if(this.prescriptDetail.img){
							this.prescriptDetail.img = [this.prescriptDetail.img]
						}
					}
				}).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>