<template>
	<view>
		<view class="white p-32" v-if="info&&!loading">
			<view class="flex-row flex-ali-center m-b-48" v-if="info">
				<u-image width="96rpx" height="96rpx" shape="circle" :src="getAvatar">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="flex-col flex-jus-sp m-l-32">
					<view class="flex-row flex-ali-center">
						<d-text :text="info.patient.name" className="content-c fs-32"></d-text>
						<d-text :text="info.patient.sex==1?'男':'女'" className="tips-c m-l-2"></d-text>
						<d-text :text="info.age+'岁'" className="tips-c m-l-2"></d-text>
					</view>
					<d-text :text="getMobile(info.patient.mobile)"></d-text>
				</view>
			</view>
			<view class="m-b-48 flex-row flex-jus-sp flex-ali-center">
				<d-text text="备注" width="85rpx"></d-text>
				<view class="flex-row flex-ali-center">
					<d-text width="558" :text="info.remark.remark" className="content-c m-r-16" :lines="1">
					</d-text>
					<u-icon name="arrow-right" color="#A7ABB0" size="32"></u-icon>
				</view>
			</view>
			<view class="m-b-48 flex-row flex-jus-sp flex-ali-center">
				<d-text text="分组" width="85rpx"></d-text>
				<view class="flex-row flex-ali-center flex-jus-end">
					<d-text :text="getGroup(info.group)" width="558" align="right" className="content-c m-r-16"
						:lines="1"></d-text>
					<u-icon name="arrow-right" color="#A7ABB0" size="32"></u-icon>
				</view>
			</view>
		</view>
		<view class="m-t-2 white" v-if="!loading">
			<u-tabs :list="tabs" :is-scroll="false" :current="current" @change="current=$event;loading2=true;getList()"
				bar-width="20" inactive-color="#6C7380"></u-tabs>
			<view class="p-32" v-if="list[current].length>0&&!loading2">
				<block v-if="current==0">
					<view class="flex-col" :class="{'m-b-32':(i+1)!=list[current].length}"
						v-for="(item,i) in list[current]" :key="i">
						<d-text text="2022-11-16"></d-text>
						<view class="flex-row flex-ali-center m-t-16">
							<d-text text="主诉："></d-text>
							<d-text :text="item.main_suit" className="content-c"></d-text>
						</view>
						<view class="flex-row flex-ali-center flex-jus-sp m-t08">
							<d-text width="85rpx" text="诊断：" className=""></d-text>
							<d-text :text="item.diagnose" className="flex-1 content-c" :lines="1">
							</d-text>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="flex-col" v-for="(item,i) in list[current]" :key="i">
						<view class="flex-row flex-jus-sp flex-ali-center">
							<d-text :text="$u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')" color="#6C7380">
							</d-text>
							<d-text :text="states[item.status].label" :color="states[item.status].color"></d-text>
						</view>
						<view class="m-t-32 flex-col">
							<view class="flex-row m-b-16">
								<d-text text="医生" align="justify" width="112"></d-text>
								<d-text :text="item.doctor_name" className="content-c m-l-48"></d-text>
							</view>
							<view class="flex-row m-b-16">
								<d-text text="诊断" width="112" align="justify"></d-text>
								<d-text :text="item.clinical_diagnose" className="content-c m-l-48 flex-1" :lines="1">
								</d-text>
							</view>
							<view class="flex-row m-b-16">
								<d-text text="药品" width="112" align="justify"></d-text>
								<d-text :text="getDrug(item.drug_name)" className="content-c m-l-48 flex-1" :lines="1"></d-text>
							</view>
							<!-- <view class="flex-row">
								<d-text text="问诊记录" width="112" align="justify"></d-text>
								<d-text text="点击查看" :color="states[0].color" className="m-l-48"></d-text>
							</view> -->
							<!-- <view class="m-t-16 flex-row flex-jus-end">
								<u-button :throttle-time="0" shape="circle" size="mini"
									:custom-style="{backgroundColor: 'transparent !important'}" plain :ripple="true">
									查看详情
								</u-button>
							</view> -->
						</view>
					</view>
				</block>
			</view>
			<view class="flex-row flex-jus-center">
				<d-empty text="无记录" v-if="!loading2&&list[current].length==0"></d-empty>
			</view>
			<d-loading-page :loading="loading2"></d-loading-page>
		</view>
		<d-loading-page :loading="loading"></d-loading-page>
	</view>
</template>

<script>
	import {
		patientInfo,
		recordList,
		prescripRecord
	} from '@/api/all.js'
	export default {
		data() {
			return {
				loading: false,
				loading2: true,
				info: {},
				tabs: [{
					name: '就诊记录'
				}, {
					name: '处方记录'
				}],
				list: {
					0: [],
					1: []
				},
				states: {
					3: {
						color: '#2979FF',
						label: '待使用'
					},
					6: {
						color: '#A7ABB0',
						label: '已失效'
					},
					4: {
						color: '#A7ABB0',
						label: '已使用'
					}
				},
				current: 0,
				id: -1
			}
		},
		computed: {
			getAvatar() {
				return require(`@/static/image/${this.info.patient.sex%2==0?'nv':'nan'}.png`)
			}
		},
		onLoad(op) {
			this.id = op['id'] || -1
			this.id > 0 && this.getList()
			this.id > 0 && this.patientInfo()
		},
		methods: {
			getDrug(obj={}) {
				let list = (obj.chinese.length>0?obj.chinese:obj.west)||[]
				let drugs =[]
				console.log(list);
				for (let i = 0; i < list.length; i++) {
					if (obj.chinese.length>0) {
						for (let j = 0; j < JSON.parse(list[i].content).length; j++) {
							drugs.push(JSON.parse(list[i].content)[j]['name'])
						}
					} else{
						drugs.push(JSON.parse(list[i].content)['drug_name'])
					}
				}
				return drugs.join()
			},
			getGroup(list) {
				let groups = []
				for (var i = 0; i < list.length; i++) {
					groups.push(list[i].name)
				}
				return groups
			},
			getMobile(v) {
				return v.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2")
			},
			patientInfo() {
				patientInfo({
					up_id: this.id
				}).then(res => {
					if (res.errcode == 0) {
						this.info = res.data
						this.$nextTick(() => {
							this.loading = false
						})
					} else {
						this.$toast(res.msg);
						this.loading = false
					}
				})
			},
			async getList() {
				let res = {}
				this.current == 0 && (res = await recordList({
					up_id: this.id
				}))
				this.current == 1 && (res = await prescripRecord({
					up_id: this.id
				}))
				if (res.errcode == 0) {
					this.list[this.current] = res.data && res.data.list ? res.data.list : res.data || []
					this.$nextTick(() => {
						this.loading2 = false
					})
				} else {
					this.$toast(res.msg);
					this.loading2 = false
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9FAFB;
	}
</style>
<style lang="scss" scoped>
	.text {
		width: 122rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #A7ABB0;
		text-align-last: justify;
	}

	.text:after {
		content: '';
		width: 100%;
		display: inline-block;
	}
</style>
