<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="检查中" @clickLeft="back"></uni-nav-bar>

		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="keyWords" placeholder="请输入">
				</uni-easyinput>
			</uni-section>

			<button class="search_btn" @click="doSearch">搜索</button>

			<image class="menu_icon" src="~@/static/pda/menu.svg"></image>


		</view>

		<view class="check-content">
			<view class="title">
				{{ equiName }}
				<text>{{ equiCode }}</text>
			</view>
			<view class="check-list" ref="scrollContainer">

				<view v-for="(item,index) in filterList">
					<CheckCard :item="item" class="mb20" :index="index"></CheckCard>
				</view>
			</view>
			<view class="footer">


				<view class="btn" @click="back">返回</view>
				<view class="btn primary" @click="handleSave">保存</view>
			</view>
		</view>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="您当前已超出计划完成时间，请填写原因" placeholder="请输入内容"
				:before-close="true" @close="handleClose" @confirm="timeoutCauseConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getDeviceInfo,
		mattersChecked
	} from '@/api/myTicket/index.js'
	import {
		post,
		postJ
	} from '@/utils/api.js'
	import CheckCard from './components/CheckCard.vue'
	export default {
		components: {
			CheckCard
		},
		data() {
			return {
				keyWords: '',
				id: '',
				pageId: '',
				page: 1,
				equipList: [],
				filterList: [],
				isEnd: false,
				equiName: '',
				equiCode: '',
				workOrderId: '',
				workOrderCode: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.keyWords = options.codes
			this.getList()
			//   this.pageId = options.id
			//   this.equiName = options.equiName
			//   this.equiCode = options.equiCode
			//   this.workOrderId = +options.workOrderId
			// this.workOrderCode = options.workOrderCode
		},
		// onReachBottom() {
		// 	if (this.isEnd) return
		// 	this.page++
		// 	this.getList()
		// },
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			doSearch() {
				if (!this.keyWords) {
					this.filterList = this.equipList;
				} else {
					this.filterList = this.equipList.filter(item =>
						item.categoryCode.includes(this.keyWords)
					);
				}
			},
			handleSave() {
				let isAllPass = true
				isAllPass = this.equipList.every(item => item.status > -1)
				let params = {
					id: this.equipList[0].id,
					executeStatus: isAllPass ? 1 : 2,
					workItems: this.equipList.map(item => {
						return {
							content: item.content,
							name: item.name,
							norm: item.norm,
							operationGuide: item.operationGuide,
							result: item.result,
							serialNum: item.serialNum,
							status: item.status,
							photoList: item.photoList || []
						}
					})
				}
				mattersChecked(params).then(data => {
					uni.showToast({
						duration: 2000,
						title: '保存成功！'
					})
					this.back()
				})
				// let _this = this
				// const params = {
				// 	itemList: this.equipList,
				// 	planEquiId: this.pageId,
				// 	workOrderId: +this.workOrderId,
				// 	workOrderType: 1
				// }
				// postJ(this.apiUrl + `/workOrder/itemsInspect`, params, true).then(res => {
				// 	if (res?.success) {
				// 		if (res.data) {
				// 			uni.showModal({
				// 				title: '提示',
				// 				content: '所有设备已执行完，是否报工？',
				// 				cancelText: '取消', // 取消按钮的文字
				// 				confirmText: '报工', // 确认按钮的文字
				// 				showCancel: true, // 是否显示取消按钮，默认为 true
				// 				success: res => {
				// 					if (res.confirm) {
				// 						_this._report()
				// 					} else {
				// 						_this.back()
				// 					}
				// 				}
				// 			})
				// 		} else {
				// 			uni.showToast({
				// 				duration: 2000,
				// 				title: '保存成功！'
				// 			})
				// 			this.back()
				// 		}
				// 	}
				// })
			},

			handleClose() {
				this.$refs.inputDialog.close()
			},
			timeoutCauseConfirm(value) {
				if (!value) {
					uni.showToast({
						title: '请输入超时原因',
						icon: 'none'
					})
					return
				}
				this.$refs.inputDialog.close()
				this._report(value)
			},
			_report(timeoutCause = '') {
				let _this = this
				post(
						this.apiUrl + '/workOrder/reportWork', {
							workOrderId: this.workOrderId,
							timeoutCause
						},
						true,
						false
					)
					.then(res => {
						if (res?.success) {
							let data = res.data
							if (data.length) {
								uni.showModal({
									title: '提示',
									content: `有${data.length}台设备被标记为缺陷，是否要报修？`,
									cancelText: '取消', // 取消按钮的文字
									confirmText: '报修', // 确认按钮的文字
									showCancel: true, // 是否显示取消按钮，默认为 true
									success: res => {
										if (res.confirm) {
											if (data.length > 1) {
												uni.navigateTo({
													url: `/pages/tour_tally/detail/detail?workOrderCode=${this.workOrderCode}&id=${this.workOrderId}&chooseTab=true`
												})
											} else {
												uni.navigateTo({
													url: `/pages/repair/repair/index?source=5&workOrderCode=${this.workOrderCode}&equiCode=${data[0].equiCode}&equiId=${data[0].equiId}&workOrderId=${this.pageId}&equiName=${data[0].equiName}&equiModel=${data[0].equiModel}&equiLocation=${data[0].equiLocation}`
												})
											}
										} else {
											_this.back()
										}
									}
								})
							} else {
								uni.showToast({
									icon: 'success',
									title: '操作成功！',
									duration: 2000
								})
								_this.back()
							}
						}
					})
					.catch(res => {
						if (res.code === '4444') {
							this.$refs.inputDialog.open()
						}
					})
			},

			getList() {
				getDeviceInfo({
					id: this.id
				}).then(data => {
					this.equiName = data.name
					this.equiCode = data.code
					this.equipList = data.workItems.map(item => {
						return {
							...item,
							id: data.id,
							executeStatus: 1
						}
					})
					this.doSearch()
				})
				// const { page } = this
				// post(this.apiUrl + `/workOrder/getEquipmentItemsListApp?size=10&page=${page}`, { planEquiId: +this.pageId, workOrderId: this.workOrderId }, true).then(res => {
				// 	if (res?.success) {
				// 		res.data.records.forEach(item => {
				// 			item.isNormal = item.isNormal === null || item.isNormal === undefined ? 1 : item.isNormal
				// 		})
				// 		if (page === 1) {
				// 			this.equipList = res.data.records
				// 		} else {
				// 			this.equipList.push(...res.data.records)
				// 		}

				// 		this.isEnd = this.equipList.length >= res.data.total
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}

	.check-content {
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;

		.title {
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
		}

		.check-list {
			flex: 1;
			overflow: auto;
			padding: 0 30rpx 30rpx;
		}

		.footer {
			height: 100rpx;
			display: flex;
			border: 1rpx solid $j-primary-border-green;
			position: fixed;
			bottom: 0;
			width: 100vw;
			background: #fff;

			.btn {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				border-radius: 0;

				&.primary {
					background-color: $j-primary-border-green;
					color: #fff;
				}
			}
		}

		.mb20 {
			margin-bottom: 20rpx;
		}
	}
</style>