<template>
	<uni-collapse class='collapse' accordion ref="collapse" @change="collapseChange">
		<uni-collapse-item :key="key">
			<template v-slot:title>
				<view class="u-font-24 u-flex">
					<view class="" style="width: 124rpx;text-align: right;">
						<text>{{label+':'}}</text>
					</view>
					<text style="color: #606266;" class="u-m-l-28">展开数据</text>
				</view>
			</template>
			<view class="collapse-item" v-for="(item,d) in dataList" :key="d">
				<view v-if="d<allPageLen" class="item-cell-c">
					<view class="u-line-1 u-m-b-20 u-font-24" v-for="(cld,c) in children" :key="c">
						<view v-if="cld.__config__.jnpfKey === 'relationForm'"
							@click.stop="relationFormClick(item,cld)">
							<text class="listTit u-line-1">{{cld.childLabel}}:</text>
							<text class="listContent"
								style="color: blue;">{{item[cld.vModel] | dynamicTreeText(cld.option)}}</text>
						</view>
						<view v-else>
							<text class="listTit u-line-1">{{cld.childLabel}}:</text>
							<text class="listContent"
								v-if="cld.option">{{item[cld.vModel] | dynamicTreeText(cld.option)}}</text>
							<text class="listContent"
								v-else-if="['calculate','inputNumber'].includes(cld.__config__.jnpfKey)">{{toThousands(item[cld.vModel],cld) }}</text>
							<text class="listContent" v-else>{{item[cld.vModel]}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="loadMore" @click.stop="loadMore" v-if="!isAllData&&this.dataList.length>allPageLen">
				加载更多
			</view>
		</uni-collapse-item>
	</uni-collapse>
</template>
<script>
	export default {
		props: ['childList', 'label', 'children', 'pageLen', 'thousands', 'thousandsField'],
		data() {
			return {
				dataList: [],
				isAllData: false,
				key: +new Date(),
				allPageLen: 3
			}
		},

		watch: {
			childList: {
				immediate: true,
				handler(val) {
					this.dataList = val
					this.allPageLen = this.pageLen
					this.children.map(o => {
						if (o.childLabel.length > 4) {
							o.childLabel = o.childLabel.substring(0, 4)
						}
					})
				}
			}
		},
		methods: {
			toThousands(val, column) {
				if (val || val == 0) {
					let valList = val.toString().split('.')
					let num = Number(valList[0])
					let newVal = column.thousands ? num.toLocaleString() : num
					return valList[1] ? newVal + '.' + valList[1] : newVal
				}
			},
			relationFormClick(item, cld) {
				this.$emit('cRelationForm', item, cld)
			},
			loadMore() {
				this.allPageLen = this.childList.length
				this.isAllData = true
			},
			collapseChange(e) {
				if (!e) {
					this.isAllData = false
					setTimeout(() => {
						this.allPageLen = this.pageLen
					}, 500)
				}
			}
		}
	}
</script>

<style>
</style>