<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="数据字典 列表" @clickLeft="back" />
		<view>
			<uni-title title="字典列表" align="center"></uni-title>
			<uni-card>
				<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}"
					:collection="collectionList"
					field="dictName,dictCode,description,delFlag,createBy,updateBy,updateTime,createTime">
					<view v-if="error">{{error.message}}</view>
					<view v-else-if="data">
						<!-- <scroll-view :scroll-y="true" style="height: 30vh;"> -->
						<zb-table :show-header="true" :columns="column" :stripe="true" :fit="false"
							:isShowLoadMore="true" :border="true" @detail="buttonDetail" :data="data"></zb-table>
						<!-- </scroll-view> -->
						<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pagination.size"
								:total="pagination.count" @change="onpagination" /></view>
					</view>
					<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
				</unicloud-db>
			</uni-card>
			<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		components: {

		},
		data() {
			return {
				collectionList: "ngTools_Dict",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},

				tableData: [],
				// 每页数据量
				pageSize: 2,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				column: [{
						type: 'selection',
						fixed: true,
						width: 40,

					},
					{
						name: 'key',
						label: '序号',
						fixed: false,
						width: 60,
						emptyString: '--'
					},
					{
						name: 'dictName',
						label: '字典名称',
						fixed: false,
						width: 100,
						emptyString: '--'
					},

					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
							name: '详情',
							func: 'detail' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
						}]
					},
				]

			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {

			onpagination(e) {
				console.log(e)
				this.pageCurrent = e.current
			},

			buttonDetail(e) {
				uni.navigateTo({
					url: './detail?id=' + e._id
				})
			},

			dele(e) {
				this.$refs.udb.remove(e._id, {
					success: (res) => {
						// // 删除数据成功后跳转到list页面
						// uni.navigateTo({
						//   url: './list'
						// })
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.uni-button {
		/* width: 60px; */
	}
</style>