<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options"
			:collection="collectionList"
			field="infoName,infomation,infoSouce,infoType,createTime,createBy,updateTime,updateBy" :where="queryWhere"
			:getone="true" :manual="true">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">
				<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
			</view>
			<view v-else-if="data">
				
				
				
				
				<view>
					<text>资料名称</text>
					<text>{{data.infoName}}</text>
				</view>
				<view>
					<text>资料内容</text>
					<text>{{data.infomation}}</text>
				</view>
				<view>
					<text>资料来源</text>
					<text>{{data.infoSouce}}</text>
				</view>
				<view>
					<text>资料类型</text>
					<text>{{data.infoType}}</text>
				</view>
				<view>
					<text>创建时间</text>
					<text>{{data.createTime}}</text>
				</view>
				<view>
					<text>创建人</text>
					<text>{{data.createBy}}</text>
				</view>
				<view>
					<text>更新时间</text>
					<text>{{data.updateTime}}</text>
				</view>
				<view>
					<text>更新人</text>
					<text>{{data.updateBy}}</text>
				</view>
			</view>
		</unicloud-db>
		<view class="btns">
			<button type="primary" @click="handleUpdate">修改</button>
			<button type="warn" class="btn-delete" @click="handleDelete">删除</button>
		</view>

		<view class="table">

			<!-- {{jsonData}} -->
			<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据">
				<!-- <uni-tr v-for="key,index in jsonKeys"> -->
					<uni-tr  >
					<uni-th width="50" align="center" :key="index">{{key}}</uni-th>
					<uni-th width="50" align="center" :key="index">{{key}}</uni-th>
				</uni-tr>
				<uni-tr v-for="key in jsonKeys">
					<td v-for="item in jsonData">{{ item[key] }}</td>
				</uni-tr>
			</uni-table>

		</view>

	 

	</view>
</template>

<script>
	// 由schema2code生成，包含校验规则和enum静态数据
	import {
		enumConverter
	} from '../../js_sdk/validator/ngtools_information.js'
	const db = uniCloud.database()

	export default {
		data() {
			return {
				queryWhere: '',
				collectionList: "ngtools_information",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				},
				jsonKeys: [],
				jsonData: [{
					"序号": 1,
					"组分": "甲烷",
					"摩尔质量Mkg·kmol-I": 16.04246,
					"原子个数a": 1,
					"原子个数b": 4,
					"原子个数C": 0,
					"原子个数d": 0,
					"原子个数e": 0
				}, {
					"序号": 2,
					"组分": "乙烷",
					"摩尔质量Mkg·kmol-I": 30.06904,
					"原子个数a": 2,
					"原子个数b": 6,
					"原子个数C": 0,
					"原子个数d": 0,
					"原子个数e": 0
				}],
				tableData: [{
					"date": "2020-09-01",
					"name": "Dcloud1",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud2",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud3",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud4",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud5",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-06",
					"name": "Dcloud6",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-07",
					"name": "Dcloud7",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-08",
					"name": "Dcloud8",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-09",
					"name": "Dcloud9",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-10",
					"name": "Dcloud10",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-11",
					"name": "Dcloud11",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-12",
					"name": "Dcloud12",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-13",
					"name": "Dcloud13",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-14",
					"name": "Dcloud14",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-15",
					"name": "Dcloud15",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-16",
					"name": "Dcloud16",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-01",
					"name": "Dcloud17",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud18",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud19",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud20",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud21",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-06",
					"name": "Dcloud22",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-07",
					"name": "Dcloud23",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-08",
					"name": "Dcloud24",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-09",
					"name": "Dcloud25",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-10",
					"name": "Dcloud26",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-11",
					"name": "Dcloud27",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-12",
					"name": "Dcloud28",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-13",
					"name": "Dcloud29",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-14",
					"name": "Dcloud30",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-15",
					"name": "Dcloud31",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-16",
					"name": "Dcloud32",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-01",
					"name": "Dcloud33",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud34",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud35",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud36",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud37",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-06",
					"name": "Dcloud38",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-07",
					"name": "Dcloud39",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-08",
					"name": "Dcloud40",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-09",
					"name": "Dcloud41",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-10",
					"name": "Dcloud42",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-11",
					"name": "Dcloud43",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-12",
					"name": "Dcloud44",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-13",
					"name": "Dcloud45",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-14",
					"name": "Dcloud46",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-15",
					"name": "Dcloud47",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-16",
					"name": "Dcloud48",
					"address": "上海市普陀区金沙江路 1516 弄"
				}]
			}
		},
		onLoad(e) {
			this._id = e.id

		},
		onReady() {
			if (this._id) {
				this.queryWhere = '_id=="' + this._id + '"'
			}
			this.getKeys(this.jsonData)
		},

		methods: {
			getKeys(jsonData) {
				this.jsonKeys = Object.keys(jsonData[0]);
				console.log(this.jsonKeys)
			},
			handleUpdate() {
				// 打开修改页面
				uni.navigateTo({
					url: './edit?id=' + this._id,
					events: {
						// 监听修改页面成功修改数据后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			},
			handleDelete() {
				this.$refs.udb.remove(this._id, {
					success: (res) => {
						// 删除数据成功后跳转到list页面
						uni.navigateTo({
							url: './list'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	.table {
		padding: 10px;
		display: flex;
		flex-wrap: nowrap;
	}

	.btns {
		margin-top: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.btns button {
		flex: 1;
	}

	.btn-delete {
		margin-left: 10px;
	}
</style>