<template>
	<view class="container">
		<view class="page">
			<view class="maintenance" v-if="maintenanceList.length !== 0">
				<view class="information" v-for="item in maintenanceList" :key="item.id" @click="onDetail(item.id)">
					<view class="title" :class="item.color">{{item.repairTitle}}<view class="tag">{{item.statusName}}</view>
					</view>
					<view class="content">
						<view class="item">
							<view class="name">报修地址</view>
							<view class="detail">{{item.repairAddress}}</view>
						</view>
						<view class="item">
							<view class="name">报修物品</view>
							<view class="detail">{{item.repairArticle}}</view>
						</view>
						<view class="item">
							<view class="name">预约上门时间</view>
							<view class="detail">{{item.reservationTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<no-data :show="maintenanceList.length === 0" text="暂无报修信息"></no-data>
		</view>
		<view class="form-submit-fixed">
			<view class="form-submit" @click="toEditor()">维修上报</view>
		</view>
	</view>
</template>

<script>
import { getCommunityRepairListApi } from '@/config/api.js'
import noData from '@/components/no-data/no-data'
let statusList = {
	initiateWaitAudit: { name: '待维修', color: 'green' },	//	待审核
	waitDispatch: { name: '待维修', color: 'green' },		// 待派单
	waitReceive: { name: '待维修', color: 'green' },		// 待接单
	initiateRefuse: { name: '已驳回', color: 'red' },		// 提单驳回
	finishRefuse: { name: '维修中', color: 'blue' },			// 回单驳回
	inRepair: { name: '维修中', color: 'blue' },			// 维修中
	finishWaitAudit: { name: '维修中', color: 'blue' },		// 回单待审核
	finishAuditPass: { name: '已完成', color: 'gray' }		// 完成
}
export default {
	components: {noData},
	data() {
		return {
			pageNumber: 1,
			maintenanceList: [],
			isFinish: false
		}
	},
	methods: {
		toEditor() {
			uni.navigateTo({
				url: '/pages/maintenanceAdd/index',
			});
		},
		async getList(flag) {
			let {result} = await getCommunityRepairListApi({
				pageNo: this.pageNumber,
				pageSize: 10
			})
			let data = result.pageList.records.map(item=> {
				return {
					...item,
					statusName: statusList[item.repairStatus].name,
					color: statusList[item.repairStatus].color
				}
			})
			if(this.pageNumber === 1) {
				this.maintenanceList = [].concat(data)
			} else {
				this.maintenanceList = this.maintenanceList.concat(data)
			}
			if(flag) { uni.stopPullDownRefresh(); }
			if(data.length < 10) {
				this.isFinish = true
			} else {
				this.pageNumber += 1
			}
		},
		onDetail(id) {
			uni.navigateTo({
				url: `/pages/maintenanceAaudit/index?id=${id}`
			});
		}
	},
	onLoad() {
		this.getList()
		uni.$on('change-maintenance',async ()=>{
			this.pageNumber = 1
			this.isFinish = false
			this.getList()
		})
	},
	onUnload() {  
		// 移除监听事件  
		uni.$off('change-maintenance');
	},
	onPullDownRefresh() {
		this.pageNumber = 1
		this.isFinish = false
		this.getList(true)
	},
	onReachBottom() {
		if(this.isFinish) return
		this.getList()
	}
}
</script>
<style>
	page {
		background-color: #F8F6F9;
	}
</style>
<style lang="scss" scoped>
	.maintenance {
		padding: 30rpx 30rpx 90rpx;
		background-color: #F8F6F9;

		.information {
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.title {
				height: 40rpx;
				line-height: 40rpx;
				padding-left: 20rpx;
				font-size: 30rpx;
				color: #373737;
				font-weight: bold;
				margin-bottom: 30rpx;

				.evaluation{
					font-size: 22rpx;
					padding: 2rpx 20rpx;
					border-radius: 30rpx;
					display: inline-block;
					float: right;
					margin-left: 20rpx;
					color: #ffffff;
					background-color: #6A59F2;
					border: 1px solid #6A59F2;
				}
				.tag {
					font-size: 22rpx;
					padding: 2rpx 20rpx;
					border-radius: 30rpx;
					display: inline-block;
					float: right;
					margin-left: 20rpx;
				}
			}

			.red {
				border-left: 2px solid #F42E2E;

				.tag {
					color: #F42E2E;
					border: 1px solid #F42E2E;
					background-color: #FFF5F5;
				}
			}

			.yellow {
				border-left: 2px solid #F1BD4D;

				.tag {
					color: #F1BD4D;
					border: 1px solid #F1BD4D;
					background-color: #FFFCF6;
				}
			}

			.blue {
				border-left: 2px solid #6A59F2;

				.tag {
					color: #6A59F2;
					border: 1px solid #6A59F2;
					background-color: #F6F5FF;
				}
			}

			.green {
				border-left: 2px solid #10D680;

				.tag {
					color: #10D680;
					border: 1px solid #10D680;
					background-color: #F1FFF9;
				}
			}

			.gray {
				border-left: 2px solid #B6B6BA;

				.tag {
					color: #B6B6BA;
					border: 1px solid #B6B6BA;
					background-color: #F8F8F8;
				}
			}

			.content {
				border-top: 1px solid #F0F0F2;
				padding-top: 20rpx;

				.item {
					display: flex;
					align-items: center;
					height: 70rpx;
					line-height: 70rpx;

					.name {
						width: 35%;
						font-size: 28rpx;
						color: #CECED3;
					}

					.detail {
						font-size: 28rpx;
						color: #373737;
					}
				}
			}

		}
	}

	.form-submit-fixed {
		position: fixed;
		width: 100%;
		bottom: 10rpx;
	}

	.form-submit {
		margin: 0 30rpx;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #6A59F2;
		border-radius: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>