<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 class="information" @click="toDetails()">
					<view class="title gray">浴霸不出水了<view class="tag">已评价</view><view class="tag">已完成</view>
					</view>
					<view class="content">
						<view class="item">
							<view class="name">报修地址</view>
							<view class="detail">汉江之星小区101栋2单元401</view>
						</view>
						<view class="item">
							<view class="name">报修物品</view>
							<view class="detail">水暖-浴霸</view>
						</view>
						<view class="item">
							<view class="name">预约上门时间</view>
							<view class="detail">2021/09/09 13：00 - 14：00</view>
						</view>
						<view class="item">
							<view class="name">维修员</view>
							<view class="detail">张三</view>
						</view>
						<view class="item">
							<view class="name">联系方式</view>
							<view class="detail">15415234562</view>
						</view>
						<view class="item">
							<view class="name">评价</view>
							<view class="detail"><uni-rate :value="4" :size="20" /></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: 'red' },
	inRepair: { name: '维修中', color: 'blue' },
	finishWaitAudit: { name: '维修中', color: 'blue' },
	finishAuditPass: { name: '已完成', color: 'gray' }
	// waitDispatch: { name: '待派单', color: 'yellow' }
}
export default {
	components: {noData},
	data() {
		return {
			maintenanceList: []
		}
	},
	methods: {
		toEditor() {
			uni.navigateTo({
				url: '/pages/maintenanceAdd/index',
			});
		},
		async getList() {
			let {result} = await getCommunityRepairListApi()
			this.maintenanceList = result.records.map(item=> {
				return {
					...item,
					statusName: statusList[item.repairStatus].name,
					color: statusList[item.repairStatus].color
				}
			})
		},
		onDetail(id) {
			uni.navigateTo({
				url: `/pages/maintenanceAaudit/index?id=${id}`
			});
		}
	},
	onLoad() {
		this.getList()
	},
	onShow() {

	}
}
</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: 32rpx;
				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>