<template>
	<div class="throm-interfere-surgical">
		<div class="opera-list">
			<!-- <a-table :columns="columns" :data-source="dataList" :pagination="false" bordered key="table" rowKey="id"
				size="small" class="throm-before-table">
				<template slot="testResult" slot-scope="text, data">
					<div>
						<a-icon style="color: #f88152" type="arrow-up" v-if="data.testResultType == 's'" />
						<a-icon type="arrow-down" style="color: #f88152" v-if="data.testResultType == 'x'" />
						<span :style="{ paddingLeft: !data.testResultType ? '26px' : '4px', }">{{ text }}</span>
					</div>
				</template>
			</a-table> -->
			<div class="Record-container">
				<div class="record-content" v-html="dataInfo"></div>
				<a-result class="common-result" v-if="!dataInfo" title="暂无记录"></a-result>
			</div>
		</div>
		<div class="btns">
			<a-button class="common-button" block type="primary" size="large" @click="onSubmit">下一步</a-button>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		operationLog
	} from 'api';
	export default {
		name: "throm-interfere-surgical",
		data() {
			return {
				dataInfo: '',
				columns: [{
						title: '类型名', //表头
						dataIndex: 'testItemTypeName', //展示字段
						key: '0',
						// width: 180,
						align: 'center',
					},
					{
						title: '项目名', //表头
						dataIndex: 'testItemName', //展示字段
						key: '1',
						ellipsis: true,
						align: 'center',
					},
					{
						title: '明细名', //表头
						dataIndex: 'testDetailitemName', //展示字段
						key: '2',
						ellipsis: true,
						align: 'center',
					},
					{
						title: '结果', //表头
						dataIndex: 'testResult', //展示字段
						key: '3',
						// width: 150,
						align: 'center',
						scopedSlots: {
							customRender: 'testResult'
						},
					},
					{
						title: '单位', //表头
						dataIndex: 'testResultValueUnit', //展示字段
						key: '4',
						// width: 150,
						align: 'center',
					},
					{
						title: '参考值', //表头
						dataIndex: 'referenceValue', //展示字段
						key: '5',
						// width: 180,
						align: 'center',
					},
					{
						title: '校验时间', //表头
						dataIndex: 'testDate', //展示字段
						key: '6',
						// width: 220,
						align: 'center',
					},
				]
			}
		},
		computed: {
			...mapState('patient', ['patientData']),
		},
		created() {
			this.queryData()
		},
		methods: {
			async queryData() {
				const res = await operationLog({
					firstAidId: this.patientData.firstAidId
				})
				this.dataInfo = res.data
				console.log(res)
			},
			onSubmit() {
				this.$emit('next')
			}
		}
	}
</script>

<style lang="less" scoped>
	.throm-interfere-surgical {
		.opera-list {
			min-height: 500px;
		}

		.Record-container {

			height: 50vh;
			color: #000;
			background-color: #eee;
			padding: 1rem;

			.record-content {
				font-size: 1.2rem;
				text-indent: 2em;
				line-height: 2rem;
				text-align: justify;
			}
		}


		.btns {
			margin-top: 2rem;
		}
	}
</style>
<style lang="less">
	.throm-interfere-surgical {}
</style>