<template>
	<view class="report_detail">
		<view class="list_box" v-if="list.length > 0">
			<view class="item" v-for="(item, i) in list" :key="i" @click="handelDetail(item)">
				
				<view class="bg_image" v-if="item.status == 'stay_examine'">
					<u-image src="/static/img/home/labelBgGreen.png" width="142rpx" height="48rpx"></u-image>
					<text>待审核</text>
				</view>
				
				<view class="bg_image" v-else-if="item.status == 'adopt'">
					<u-image src="/static/img/home/labelBgGrey.png" width="142rpx" height="48rpx"></u-image>
					<text>已通过</text>
				</view>
				
				<view class="bg_image" v-else>
					<u-image src="/static/img/home/labelBgGrey.png" width="142rpx" height="48rpx"></u-image>
					<text>已退回</text>
				</view>

				<view class="info">
					<u-image src="/static/img/home/approvalRecordBg.png" width="94rpx" height="94rpx" />
					<view class="title_name">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							
							<text>创建时间</text>
							<text>
								{{timeFormat(item.createdTime, 'yyyy-mm-dd hh:MM')}}
							</text>
						</view>
					</view>
				</view>

			</view>
			<c-loading :loading="loading"></c-loading>
		</view>
		<view v-else class="no_data">
			<c-no-data></c-no-data>
		</view>

		<view class="report_info">


		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'
	import listMixin from "@/common/mixins/list-mixin.js";

	import {
		getReportApprovalListApi,
	} from '@/config/api.js';

	export default {
		data() {
			return {
				formId: '',
				list: [],
			}
		},

		onLoad(option) {
			this.formId = option.formId;
			getReportApprovalListApi(option.formId).then(data => {
				if (data) {
					this.list = data
				}
			})
		},

		methods: {
			
			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},
			
			handelDetail(record) {
				this.$u.route({
					url: `pages/main/home/reportDetail/reportDetail?id=${record.id}&formId=${record.formId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.report_detail {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #F7F7F7;
		padding: 20rpx 0 0 0;

		.list_box {
			padding: 0 0 50rpx 0;

			.item {
				position: relative;
				width: 630rpx;
				margin: 30rpx auto;
				padding: 30rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;

				.bg_image {
					position: absolute;
					top: 0;
					right: 0;

					text {
						position: absolute;
						top: 12rpx;
						right: 30rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #FFFFFF;
					}
				}

				.info {
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					margin: 0 0 30rpx 0;

					.title_name {
						.title {
							font-size: 32rpx;
							line-height: 44rpx;
							color: #202131;
							font-weight: 500;
							margin: 0 20rpx;
						}

						.time {
							padding: 8rpx 0 0 20rpx;
							font-size: 28rpx;
							line-height: 32rpx;
							color: #909097;

							text:last-child {
								padding: 0 0 0 30rpx;
							}
						}
					}
				}
			}
		}
	}
</style>