<template>
	<view :class="{'item-card':item.__config__.jnpfKey==='card'}"
		v-if="!item.__config__.noShow && (!item.__config__.visibility || (Array.isArray(item.__config__.visibility) && item.__config__.visibility.includes('app')))">
		<template v-if="item.__config__.layout==='colFormItem'">
			<template v-if="item.__config__.jnpfKey==='divider'">
				<u-divider half-width="200" height="80">{{item.content}}</u-divider>
			</template>
			<template v-else-if="item.__config__.jnpfKey==='text'">
				<view class="u-p-l-20 u-p-r-20 form-item-box">
					<u-form-item>
						<jnpf-text :content="item.content" :textStyle="item.textStyle"></jnpf-text>
					</u-form-item>
				</view>
			</template>
			<template v-else-if="item.__config__.jnpfKey==='link'">
				<view class="u-p-l-20 u-p-r-20 form-item-box">
					<u-form-item>
						<jnpf-link :content="item.content" :href="item.href" :target='item.target'
							:textStyle="item.textStyle" />
					</u-form-item>
				</view>
			</template>
			<template v-else-if="item.__config__.jnpfKey==='alert'">
				<view class="u-p-l-20 u-p-r-20 form-item-box">
					<u-form-item>
						<jnpf-alert-tips :type="item.type" :title="item.title" :tagIcon='item.tagIcon'
							:showIcon="item.showIcon" :closable="item.closable" :description="item.description"
							:closeText="item.closeText" />
					</u-form-item>
				</view>
			</template>
			<template v-else-if="item.__config__.jnpfKey==='groupTitle'">
				<jnpf-group :content="item.content" :contentPosition="item.contentPosition"
					:helpMessage="item.helpMessage" @groupIcon="clickIcon(item)" />
			</template>
			<template v-else-if="item.__config__.jnpfKey==='button'">
				<view class="u-p-l-20 u-p-r-20 form-item-box">
					<u-form-item class="">
						<jnpf-button :buttonText="item.buttonText" :align="item.align" :type="item.type"
							:disabled="item.disabled" />
					</u-form-item>
				</view>
			</template>
			<template v-else>
				<view class="u-p-l-20 u-p-r-20 form-item-box">
					<u-form-item :prop="item.__vModel__"
						:label="item.__config__.showLabel ? item.__config__.label : '' " @clickIcon="clickIcon(item)"
						:left-icon='item.__config__.showLabel && item.__config__.tipLabel && item.__config__.label? "question-circle-fill":""'
						:left-icon-style="{'color':'#a0acb7'}">
						<template v-if="item.__config__.jnpfKey==='uploadFile'">
							<jnpf-file v-model="item.__config__.defaultValue" disabled :detailed="true" />
						</template>
						<template v-else-if="item.__config__.jnpfKey==='uploadImg'">
							<view class="preview-image-box">
								<image v-for="(cItem,ci) in item.__config__.defaultValue" :key="ci"
									class="u-preview-image" :src="define.baseURL+cItem.url" mode="aspectFill"
									@tap.stop="doPreviewImage(define.baseURL+cItem.url)"></image>
							</view>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='colorPicker'">
							<jnpf-colorPicker v-model="item.__config__.defaultValue" :colorFormat="item.colorFormat"
								disabled />
						</template>
						<template v-else-if="item.__config__.jnpfKey==='rate'">
							<jnpf-rate v-model="item.__config__.defaultValue" :max="item.count"
								:allowHalf="item['allow-half']" disabled />
						</template>
						<template v-else-if="item.__config__.jnpfKey==='slider'">
							<jnpf-slider v-model="item.__config__.defaultValue" :step="item.step" :min="item.min||0"
								:max="item.max||100" style="width: 100%;" disabled />
						</template>
						<template v-else-if="item.__config__.jnpfKey==='editor'">
							<u-parse class="editor-box" :html="item.__config__.defaultValue"></u-parse>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='relationForm'">
							<view class="jnpf-detail-text" style="color:rgb(41, 121, 255)"
								@click.native="toDetail(item)">
								{{item.name}}
							</view>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='popupSelect'">
							<view class="jnpf-detail-text">{{ item.name }}</view>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='barcode'">
							<jnpf-barcode :staticText="item.staticText" :width="item.width" :height="item.height"
								:format="item.format" :dataType="item.dataType" :lineColor="item.lineColor"
								:background="item.background" :relationField="item.relationField" :formData="formValue">
							</jnpf-barcode>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='qrcode'">
							<jnpf-qrcode :format="item.format" :colorLight="item.colorLight" :colorDark="item.colorDark"
								:width="item.width" :staticText="item.staticText" :dataType="item.dataType"
								:relationField="item.relationField+'_id'" :formData="formValue"></jnpf-qrcode>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='inputNumber'">
							<jnpf-number-box v-model="item.__config__.defaultValue" :step='item.step' :max='item.max'
								:min='item.min' :disabled="item.disabled" :isAmountChinese="item.isAmountChinese"
								:thousands="item.thousands" :addonAfter="item.addonAfter"
								:addonBefore="item.addonBefore" :controls="item.controls"
								:precision="item.precision" :detailed="true">
							</jnpf-number-box>
						</template>
						<template v-else-if="item.__config__.jnpfKey==='calculate'&&item.isStorage==0">
							<jnpf-calculation :expression='item.expression' :vModel='item.__vModel__'
								:config='item.__config__' :formData='formValue' v-model="item.__config__.defaultValue"
								:precision="item.precision" :isAmountChinese="item.isAmountChinese"
								:thousands="item.thousands" />
						</template>
						<template v-else>
							<view class="jnpf-detail-text" v-if="item.__config__.jnpfKey==='calculate'">
								<view class="">{{ toThousands(item.__config__.defaultValue, item) }}</view>
								<view class="" v-if="item.isAmountChinese" style="color: #999;">
									{{jnpf.getAmountChinese(getValue(item))}}
								</view>
							</view>
							<view class="jnpf-detail-text" v-else>{{ getValue(item) }}</view>
						</template>
					</u-form-item>
				</view>
			</template>
		</template>
		<template v-else>
			<template v-if="item.__config__.jnpfKey==='card'||item.__config__.jnpfKey==='row'">
				<view class="jnpf-card-cap u-line-1" v-if="item.header" :style="{'padding':'20rpx'}"
					@click="clickIcon(item)">
					{{item.header}}
					<u-icon :name="item.__config__.tipLabel && item.__config__.label? 'question-circle-fill':''"
						class="u-m-l-10" color="#a0acb7"></u-icon>
				</view>
				<Item v-for="(child, index) in item.__config__.children" :key="child.__config__.renderKey" :item="child"
					:formConf="formConf" :formValue="formValue" @toDetail="toDetail" @clickIcon='clickIcon' />
			</template>
			<template v-if="item.__config__.jnpfKey==='table'">
				<view class="jnpf-table">
					<view v-for="(column,columnIndex) in item.__config__.defaultValue" :key="columnIndex">
						<view class="jnpf-table-item-title u-row-between u-line-1 u-p-l-20 u-p-r-20"
							@click="clickIcon(item)">
							{{item.__config__.label}}({{columnIndex+1}})
							<u-icon :name="item.__config__.tipLabel && item.__config__.label? 'question-circle-fill':''"
								class="u-m-l-10" color="#a0acb7"></u-icon>
						</view>
						<view class="u-p-l-20 u-p-r-20 form-item-box">
							<u-form-item :label="childItem.__config__.showLabel ? childItem.__config__.label : '' "
								:label-width="childItem.__config__.labelWidth ? childItem.__config__.labelWidth * 1.5 : 100*1.5"
								v-for="(childItem,cIndex) in item.__config__.children" :key="cIndex"
								@clickIcon="clickIcon(childItem)"
								:left-icon='childItem.__config__.showLabel && childItem.__config__.tipLabel && childItem.__config__.label? "question-circle-fill":""'
								:left-icon-style="{'color':'#a0acb7'}"
								v-if="!childItem.__config__.noShow&&(!childItem.__config__.visibility|| (Array.isArray(childItem.__config__.visibility) && childItem.__config__.visibility.includes('pc')))">
								<template>
									<template
										v-if="['relationFormAttr','popupAttr'].includes(childItem.__config__.jnpfKey)">
										<view class="jnpf-detail-text" v-if="!childItem.__vModel__">
											{{ column[childItem.relationField.split('_jnpfTable_')[0]+'_'+childItem.showField] }}
										</view>
										<view class="jnpf-detail-text" v-else>
											{{column[childItem.__vModel__]}}
										</view>
									</template>
									<template v-else-if="childItem.__config__.jnpfKey==='relationForm'">
										<view class="jnpf-detail-text" style="color:rgb(41, 121, 255)"
											@click.native="toTableDetail(childItem,column[childItem.__vModel__+'_id'])">
											{{column[childItem.__vModel__]}}
										</view>
									</template>
									<template v-else-if="childItem.__config__.jnpfKey==='uploadFile'">
										<jnpf-file v-model="column[childItem.__vModel__]" disabled :detailed="true" />
									</template>
									<template v-else-if="childItem.__config__.jnpfKey==='uploadImg'">
										<view class="preview-image-box">
											<image v-for="(cItem,ci) in column[childItem.__vModel__]" :key="ci"
												class="u-preview-image" :src="define.baseURL+cItem.url"
												mode="aspectFill" @tap.stop="doPreviewImage(define.baseURL+cItem.url)">
											</image>
										</view>
									</template>
									<template v-else-if="childItem.__config__.jnpfKey==='inputNumber'">
										<jnpf-number-box v-model="column[childItem.__vModel__]" :step='childItem.step'
											:max='childItem.max' :min='childItem.min' :disabled="childItem.disabled"
											:isAmountChinese="childItem.isAmountChinese"
											:thousands="childItem.thousands" :addonAfter="childItem.addonAfter"
											:addonBefore="childItem.addonBefore"
											:controls="childItem.controls"
											:precision="childItem.precision" :detailed="true">
										</jnpf-number-box>
									</template>
									<template
										v-else-if="childItem.__config__.jnpfKey==='calculate'&&childItem.isStorage==0">
										<jnpf-calculation :expression='childItem.expression'
											:vModel='childItem.__vModel__' :config='childItem.__config__'
											:formData='formValue' v-model="column[childItem.__vModel__]"
											:precision="childItem.precision"
											:isAmountChinese="childItem.isAmountChinese"
											:thousands="childItem.thousands" :rowIndex="columnIndex" />
									</template>
									<template v-else>
										<view class="jnpf-detail-text"
											v-if="childItem.__config__.jnpfKey==='calculate'">
											<view class="">{{toThousands(column[childItem.__vModel__],childItem)}}
											</view>
											<view class="" v-if="childItem.isAmountChinese" style="color: #999;">
												{{jnpf.getAmountChinese(column[childItem.__vModel__])}}
											</view>
										</view>
										<view class="jnpf-detail-text" v-else>{{column[childItem.__vModel__]}}</view>
									</template>
								</template>
							</u-form-item>
						</view>
					</view>
					<view class="jnpf-table-item" v-if="item.showSummary && summaryField.length">
						<view class="jnpf-table-item-title u-flex u-row-between">
							<text class="jnpf-table-item-title-num">{{item.__config__.label}}合计</text>
						</view>
						<view class=" u-p-l-20 u-p-r-20 form-item-box">
							<u-form-item v-for="(item,index) in summaryField" :label="item.__config__.label"
								:key="item.__vModel__">
								<u-input input-align='right' v-model="item.value" disabled placeholder=""></u-input>
							</u-form-item>
						</view>
					</view>
				</view>
			</template>
			<template v-if="item.__config__.jnpfKey==='editor'">
				<u-parse class="editor-box" :html="item.__config__.defaultValue"></u-parse>
			</template>
			<template v-if="item.__config__.jnpfKey==='tab'">
				<u-tabs is-scroll :list="item.__config__.children" name="title" :current="tabCurrent"
					@change="onTabChange">
				</u-tabs>
				<view v-for="(pane,i) in item.__config__.children" :key='i'>
					<view v-show="i == tabCurrent">
						<Item v-for="(childItem, childIndex) in pane.__config__.children" :key="childIndex"
							:item="childItem" :formConf="formConf" :formValue="formValue" @toDetail="toDetail"
							@clickIcon='clickIcon' />
					</view>
				</view>
			</template>
			<template v-if="item.__config__.jnpfKey==='collapse'">
				<u-collapse :head-style="{'padding-left':'20rpx'}" :accordion="item.accordion" ref="collapseRef">
					<u-collapse-item :title="pane.title" v-for="(pane, i) in item.__config__.children" :key="i"
						:open="item.__config__.active.indexOf(pane.name)>-1">
						<Item v-for="(child, j) in pane.__config__.children" :key="child.__config__.renderKey"
							:item="child" :formConf="formConf" :formValue="formValue" @toDetail="toDetail"
							@clickIcon='clickIcon' />
					</u-collapse-item>
				</u-collapse>
			</template>
		</template>
	</view>
</template>
<script>
	import {
		getDownloadUrl
	} from '@/api/common'
	import Item from './Item'

	export default {
		name: 'Item',
		props: {
			item: {
				type: Object,
				required: true
			},
			formConf: {
				type: Object,
				required: true
			},
			formValue: {
				type: Object,
			},
		},
		components: {
			Item
		},
		data() {
			return {
				tabCurrent: 0,
				tableData: [],
				summaryField: []
			}
		},
		created() {
			if (this.item.__config__.jnpfKey === 'table') {
				const newVal = this.item.__config__.defaultValue
				let summaryField = this.item.summaryField || []
				this.summaryField = []
				this.tableData = this.item.__config__.children || []
				for (let i = 0; i < summaryField.length; i++) {
					for (let o = 0; o < this.tableData.length; o++) {
						if (this.tableData[o].__vModel__ === summaryField[i]) {
							this.summaryField.push(this.tableData[o])
							this.summaryField = this.summaryField.map(o => ({
								value: '0.00',
								...o
							}))
						}
					}
				}
				this.$nextTick(() => {
					this.getTableSummaries(newVal, this.item)
				})
				//if (!newVal.length) this.item.__config__.defaultValue.push({})
			}
			if (this.item.__config__.jnpfKey === 'tab') {
				const list = this.item.__config__.children
				for (var i = 0; i < list.length; i++) {
					if (this.item.__config__.active == list[i].name) {
						this.tabCurrent = i
						break
					}
				}
			}
		},
		mounted() {
			if (this.item.__config__.jnpfKey === 'collapse') {
				uni.$on('initCollapse', () => {
					//初始化折叠面板高度高度
					this.$refs.collapseRef && this.$refs.collapseRef.init()
				})
				//初始化折叠面板高度高度
				this.$refs.collapseRef && this.$refs.collapseRef.init()
			}
		},
		methods: {
			toThousands(val, column) {
				if (val) {
					let valList = val.toString().split('.')
					let num = Number(valList[0])
					let newVal = column.thousands ? num.toLocaleString() : num
					return valList[1] ? newVal + '.' + valList[1] : newVal
				}
			},
			getTableSummaries(newVal, config) {
				for (let i = 0; i < this.summaryField.length; i++) {
					let val = 0
					for (let j = 0; j < newVal.length; j++) {
						if (newVal[j][this.summaryField[i].__vModel__]) {
							let data = isNaN(newVal[j][this.summaryField[i].__vModel__]) ? 0 :
								Number(newVal[j][this.summaryField[i].__vModel__])
							val += data
							this.summaryField[i].value = this.summaryField[i].thousands ? Number(val).toLocaleString(
								'zh', {
									maximumFractionDigits: '2',
									minimumFractionDigits: '2'
								}) : val.toFixed(2)
						}
					}
				}
			},
			clickIcon(e) {
				if (!e.__config__.tipLabel) return
				this.$emit('clickIcon', e)
			},
			hasBarcodeField(data) {
				const {
					__config__: config
				} = data;
				if (config.jnpfKey === 'barcode' || config.jnpfKey === 'qrcode') {
					return true;
				}
				if (config.children) {
					return config.children.some(child => this.hasBarcodeField(child));
				}
				return false;
			},
			onTabChange(index) {
				const hasBarcode = this.hasBarcodeField(this.item.__config__.children[index]);
				if (hasBarcode) uni.$emit('upDateCode')
				if (this.tabCurrent === index) return
				this.tabCurrent = index;
				this.$emit('tab-change', this.item, index)
				//初始化折叠面板高度高度
				uni.$emit('initCollapse')
			},
			doPreviewImage(url) {
				const images = this.item.__config__.defaultValue.map(item => this.define.baseURL + item.url);
				uni.previewImage({
					urls: images,
					current: url,
					success: () => {},
					fail: () => {
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			},
			toDetail(item) {
				this.$emit('toDetail', item)
			},
			toTableDetail(item, value) {
				item.__config__.defaultValue = value
				this.$emit('toDetail', item)
			},
			getValue(item) {
				if (Array.isArray(item.__config__.defaultValue)) {
					if (['timeRange', 'dateRange'].includes(item.__config__.jnpfKey)) {
						return item.__config__.defaultValue.join('')
					}
					return item.__config__.defaultValue.join()
				}
				if (item.__config__.jnpfKey === 'calculate') return Number(item.__config__.defaultValue)
				return item.__config__.defaultValue
			},
		}
	}
</script>