<template>
	<view class="safe-area-inset-bottom">
		<view class="top white flex-col">
			<view class="top_title flex-row flex-ali-center p-32 ">
				<image src="@/static/image/js.png" class="size-32"></image>
				<d-text text="临床诊断" className="light-c fs-32 m-l-16"></d-text>
			</view>
			<view class="flex flex-wrap p-row-32">
				<view class="m-r-2 m-b-16" v-for="(item,i) in getList" :key="i">
					<u-tag shape="circle" :text="item" bg-color="rgba(41,121,255,0.08)" mode="dark" color="#31353D"
						close-color="#A7ABB0" />
				</view>
			</view>
		</view>
		<!-- 西药 -->
		<view class="m-t-2 b-r-8 white p-32 flex-col" v-if="!loading&&type==1&&info">
			<view class="flex-row flex-jus-sp flex-ali-center">
				<d-text text="R：" className="main-c fs-4" :bold="true"></d-text>
			</view>
			<view class="bottom-border p-col-32" v-for="item in info" :key="item.id">
				<view class="flex-row flex-jus-sp flex-ali-center">
					<d-text :text="'1、'+JSON.parse(item.content).drug_name" className="fs-3 content-c"></d-text>
					<d-text :text="item.number+'盒'" className="content-c"></d-text>
				</view>
				<view class="flex-row flex-ali-center m-t-16">
					<d-text text="规格：" color="#6C7380"></d-text>
					<d-text :text="JSON.parse(item.content).specification" color="#6C7380"></d-text>
				</view>
				<view class="flex-row flex-ali-center">
					<d-text text="用法：" color="#6C7380"></d-text>
					<d-text :text="item.instruction" color="#6C7380"></d-text>
				</view>
				<!-- <view class="flex-row flex-ali-center">
					<d-text text="可用天数：" color="#6C7380"></d-text>
					<d-text text="5天" color="#6C7380"></d-text>
				</view> -->
			</view>
		</view>
		<!-- 中药 -->
		<block v-if="!loading&&type==2&&info">
			<view class="white b-r-8 p-32 m-t-2">
				<template v-for="(item,i) in info">
					<view class="flex-row flex-jus-sp flex-ali-center">
						<view class="flex-row flex-ali-end ">
							<d-text text="R" className="main-c fs-4" :bold="true"></d-text>
							<d-text :text="i+1" className="main-c" :bold="true"></d-text>
							<d-text text="：" className="main-c fs-4" :bold="true"></d-text>
						</view>
						<view class="flex-row" style="height: 50rpx;">
						</view>
					</view>
					<view class="p-col-32">
						<view class="grid-tem-col-2 rp">
							<view class="flex-row flex-jus-sp flex-ali-center m-t-12"
								v-for="it in JSON.parse(item.content)" :key="it.id">
								<d-text :text="it.name" className="fs-3 content-c"></d-text>
								<d-text :text="it.number+'g'" className="fs-3 tips-c"></d-text>
							</view>
						</view>
						<d-text :text="getUsage(item)" className="m-t-24 tips-c fs-24"></d-text>
					</view>
				</template>
			</view>
		</block>
		<view class="bottom flex-col flex-jus-sp flex-ali-center">
			<u-button :throttle-time="0" type="primary" shape="circle" :custom-style="{heigth:'86rpx',width:'686rpx'}"
				@click="use">
				使用该处方
			</u-button>
		</view>
		<d-loading-page :loading="loading"></d-loading-page>
	</view>
</template>

<script>
	import mixin from './mixin/mixin.js';
	import {
		commonWest,
		commonChinese
	} from '@/api/all.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				type: 0, // 1代表西药、2代表中药
				loading: true,
				info: '',
				id: -1,
				units: [],
				item: ''
			};
		},
		computed: {
			getList() {
				return this.item ? this.item.clinical_diagnose.split(',') : []
			}
		},
		onLoad(op) {
			this.type = op['type'] || 0
			this.item = op['item'] ? JSON.parse(op['item']) : ''
			this.info = op['info'] ? JSON.parse(op['info']) : '';
			this.loading = op['info'] ? false : true;
			console.log(op, 'cfxq');
		},
		methods: {
			async getInfo() {
				let res = {}
				this.type == 1 && (res = await commonWest({
					id: this.id,
					store_id: uni.getStorageSync('store_id') || 11001,
				}))
				this.type == 2 && (res = await commonChinese({
					id: this.id,
					store_id: uni.getStorageSync('store_id') || 11001,
				}))
				if (res.errcode == 0) {
					this.info = res.data
					this.$nextTick(() => {
						this.loading = false
					})
				} else {
					this.$toast(res.msg)
					this.loading = false;
				}
			}
		}
	};
</script>
<style>
	page {
		background-color: #F9FAFB;
	}
</style>
<style lang="scss" scoped>
	.top {
		position: relative;
		width: 100vw;
		min-height: 170rpx;
		z-index: 10075;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		padding: 12rpx 32rpx;
		width: 100vw;
		height: 110rpx;
		background: #FFF;
		border-top: 2rpx solid #F2F3F5;
		z-index: 1;

		::v-deep button {
			z-index: 999;
			background: #6ACDBB;
			color: #FFFFFF;
		}
	}

	.rp {
		grid-column-gap: 80rpx;
		grid-row-gap: 32rpx;
	}

	.add {
		border: 1px dotted #6ACDBB;
		height: 86rpx;
	}
</style>