<template>
	<view class="registration_review" :style="vuex_theme">

		<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="company">
					<text>实践课程</text>
					<text>{{item.courseName || '--'}}</text>
				</view>
				<view class="company">
					<text>实习计划</text>
					<text>{{item.planName|| '--'}}</text>
				</view>
				<view class="company">
					<text>实习项目</text>
					<text>{{item.projectName|| '--'}}</text>
				</view>
				<view class="company">
					<text>学生名称</text>
					<text>{{item.studentName|| '--'}}</text>
				</view>

				<view class="time">
					<text>上传时间</text>
					<text>{{timeFormat(item.createdTime, 'yyyy-mm-dd hh:MM')}}</text>
				</view>

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

	</view>
</template>

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

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

	export default {
		mixins: [listMixin],
		data() {
			return {

				list: [], //列表必须为key list的数组
				search: {
					//搜索对象必须为key search的对象
					status: 'wait,pass,reject',

				},
			}
		},

		onLoad(option) {
			this.studentId = option.studentId;
			this.projectId = option.projectId;

			this.finished = false;
			this.loading = "loadmore";
			this.page = 0;
			this.list = [];
			this._getList();
		},

		onShow() {

		},

		computed: {


		},

		methods: {

			handelDetail(record) {
				this.$u.route({
					url: `pages/main/internship/agreementDetail/agreementDetail?&id=${record.id}`
				})
			},

			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},

			// scroll-view到底部加载更多
			onreachBottom() {},
			// 搜索
			searchSubmit() {
				// 调用混合搜索
				this._searchData();
			},
			// 模拟后端分页
			async getData(requestParams) {
				const {
					search = {}
				} = requestParams;

				let params = {};
				params.pageNumber = requestParams.page + 1;
				params.pageSize = 5;

				if (this.studentId) {
					params.studentId = this.studentId
				}
				
				if (this.projectId) {
					params.projectId = this.projectId
				}

				return await getAgreementListApi(params);
			},
			// 数据请求(没错就是这么少的代码)
			async _getList() {
				if (this.page == 0) {
					this.list = [];
				}

				// 根据实际情况修改自己修改key
				let result = await this.getData({
					page: this.page, // 传入页码
					size: this.size, // 传入每页条数
					search: this.search, // 传入搜索的对象
				});

				this.total = result.total;

				if (this.list.length == 0 && result.records.length == 0) {
					this.shownoData = false
				} else {
					this.shownoData = true
				}

				this.list = this.list.concat(result.records)
				
				// 判断是否全部加载完成
				if (this.total == this.list.length) {
					this.finished = true;
					this.loading = 'nomore';
				} else {
					this.loading = 'loadmore';
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.registration_review {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #F7F7F7;

		.list_box {
			padding: 30rpx 0 50rpx 0;

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

				.company {
					display: flex;
					flex-flow: row nowrap;
					margin: 0 0 30rpx 0;

					text {
						width: 120rpx;
						font-size: 28rpx;
						line-height: 32rpx;
						color: #909097;
						margin: 0 0 0 16rpx;
					}

					text:last-child {
						width: 450rpx;
						color: #202131;
						margin: 0 0 0 30rpx;
					}
				}

				.time {
					border-top: 2rpx solid #E2E2E8;
					padding: 28rpx 0 0 0;

					text {
						width: 120rpx;
						font-size: 28rpx;
						line-height: 32rpx;
						color: #909097;
					}

					text:last-child {
						width: 450rpx;
						color: #202131;
						margin: 0 0 0 78rpx;
					}
				}
			}
		}

	}
</style>