<template>
	<view class="container">
		<!-- <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="字典子项 列表" @clickLeft="back" /> -->
		 
			<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}"
				:collection="collectionList"
				field="dictID,itemValue,itemText,itemColor,description,sortOrder,status,createBy,updateBy,createTime,updateTime"
				:where="wherecondition">
				<view v-if="error">{{error.message}}</view>
				<view v-else-if="data">
					<zb-table :show-header="true" :columns="column" :stripe="true" :fit="false" :border="true"
						@itemEdit="buttonEdit" :data="data"></zb-table>

					<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-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
		 
	</view>

</template>

<script>
	const db = uniCloud.database()
	export default {
		props: {
			dictID: {
				type: String,
				default: "cyzf"
			},
		},
		watch: {

			dictID: {
				immediate: true,
				deep: true,
				handler(val) {
					this.wherecondition = "'dictID'=='" + val + "'";
				}
			},
		},
		data() {
			return {
				collectionList: "ngTools_DictItem",
				wherecondition: "",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				column: [
					// {
					// 	type: 'selection',
					// 	fixed: true,
					// 	width: 40
					// },
					{
						name: 'key',
						label: '序号',
						fixed: false,
						width: 40,
						emptyString: '--'
					},

					{
						name: 'itemText',
						label: '字典文本',
						width: 80,
						align: 'center',
					}, {
						name: 'itemValue',
						label: '字典项值',
						fixed: false,
						// width: 100,
						emptyString: '--'
					},

					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						width: 80,
						renders: [{
								name: '编辑',
								func: 'itemEdit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							},
							// {
							// 	name: '删除',
							// 	type: 'warn',
							// 	func: "dele"
							// },
						]
					},
				]
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			onpagination(e) {
				console.log(e)
				this.pageCurrent = e.current
			},
			buttonEdit(e) {
				uni.navigateTo({
					url: '/pages/ngTools_DictItem/edit?id=' + e._id
				})
			},

			dele() {

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: '/pages/ngTools_DictItem/add?dictID=' + this.dictID,
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.uTd {
		// background-color: #f1dada;
		width: 180rpx;
		padding: 10rpx 0rpx 0rpx;
		// letter-spacing: 1rpx;
		// line-height: 40rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		// display: inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
		height: auto;
	}
</style>