<template>
	<view>
		<view v-if="mode === 'text'">
			<uni-row>
				<uni-col :span="6">
					<view class="desc">
						{{label}}
					</view>
				</uni-col>
				<uni-col :span="18">
					<view class="desc" v-if="data !== '' && data !== null && data !== undefined">
						{{data}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="mode === 'time'">
			<uni-row>
				<uni-col :span="6">
					<view class="desc">
						{{label}}
					</view>
				</uni-col>
				<uni-col :span="18">
					<view class="desc" v-if="data !== '' && data !== null && data !== undefined">
						{{$dateResult(data,'date')}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="mode === 'dict'">
			<uni-row>
				<uni-col :span="6">
					<view class="desc">
						{{label}}
					</view>
				</uni-col>
				<uni-col :span="18">
					<view class="desc">
						{{dictLabel}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="mode === 'dept'">
			<uni-row>
				<uni-col :span="6">
					<view class="desc">
						{{label}}
					</view>
				</uni-col>
				<uni-col :span="18">
					<view class="desc">
						{{$dictTranslation(data,'deptData','dept')}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="mode === 'post'">
			<uni-row>
				<uni-col :span="6">
					<view class="desc">
						{{label}}
					</view>
				</uni-col>
				<uni-col :span="18">
					<view class="desc">
						{{$dictTranslation(data,'postsData','post')}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="mode === 'photo'">
			<view class="desc">
				{{label}}
			</view>
			<view class="desc">
				<uni-file-picker  :value="data"  file-mediatype="image" readonly></uni-file-picker>
			</view>
		</view>
		<u-gap height="10" bgColor="#f7f7f7"></u-gap>
	</view>
</template>

<script>
	export default {
		props: {
			label: {
				type: String,
				default: ''
			},
			data: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'text'
			},
			dictKey: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				dictLabel: ''
			}
		},
		mounted() {
			if (this.mode === 'dict') {
				this.dictLabel = this.$dictTranslation(this.data, this.dictKey, 'dict')
			}
		}
	}
</script>

<style>
	.desc {
		padding: 10rpx 30rpx;
		color: #818181;
	}
</style>
