<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="巡点检工单报工" @clickLeft="back">
		<!-- 	<template slot="float">
				<view class="nav-icon-caozuo iconfont icon-caozuo" @click="setOptionShow"></view>
			</template> -->
		</uni-nav-bar>
		<!-- 进度组件 根据状态显示不同列表  -->
		<!-- <popupOper :optionShow="optionShow" @operate="operate"
			:operationList="operationList.filter(el=> el.type == status)"></popupOper> -->

		<view class="page-bottom-padding">
			<!-- 巡点检事项 -->
			<!-- <template v-if="worksheetInfo.rule">
				<CellTip title="巡点检事项"> </CellTip>
				<view v-for="(items,indexs) in worksheetInfo.rule.ruleItem" :key="indexs">
					<view class="cell cell-box">
						<view class="tip">
							<text class="dian">检测事项：</text> <text class="content">{{items.itemContent}}</text>
							<text class="status font-sm" v-text="'检测内容：'+items.itemName"></text>
						</view>
						<view class="status-info font-sm">
							<view>
								<text class="font-grey ">检测标准：</text><text>{{items.itemStandard }}</text>
							</view>

						</view>
					</view>
				</view>
			</template> -->
			<!-- 待处理 -->
			<template v-if="detailsIng.length">
				<CellTip title="待处理"> </CellTip>
				<uni-collapse ref="collapse" v-for="item in detailsIng" :key="item.id">
					<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
						<OrderDetail slot="typeOpenShow" :value1="item.equiName" :value2="item.equiCode"
							:value3="'通用设备-' + item.equiTypeName" :value4="item.equiTypeId" :value5="item.equiLocation">
							<!-- <template slot="custSlot">
						<view class="btn-status">
							<view class="btn btn-primary" @click="changeStatus(1,item.id)">
								正常
							</view>
							<view class="btn btn-warning" @click="changeStatus(2,item.id,item)">
								缺陷
							</view>
						</view>
					</template> -->

						</OrderDetail>
						<view class="content-status">
							<view class="title cell font-grey">
								巡点检事项
							</view>

							<view v-for="(items,indexs) in item.ruleItems" :key="indexs">
								<view class="cell cell-box">
									<view class="tip">
										<text class="dian">检测事项：</text> <text
											class="content">{{items.itemContent}}</text>
										<text class="status font-sm" v-text="'检测内容：'+items.itemName"></text>
									</view>
									<view class="status-info font-sm">
										<view>
											<text class="font-grey ">检测标准：</text><text>{{items.itemStandard }}</text>
										</view>

									</view>
								</view>
								<view class="btn-status" v-if="items.status === null">
									<view class="btn btn-primary" @click="changeStatus(1,items.id,item.id)">
										正常
									</view>
									<view class="btn btn-warning" @click="changeStatus(2,items.id,item.id,item)">
										缺陷
									</view>
								</view>
								<view class="btn-status" v-else>
									<text
										:class="['showBtn',items.status===1?'green':'red']">{{items.status==1?"正常":"缺陷"}}</text>
								</view>
							</view>

						</view>

					</uni-collapse-item>
				</uni-collapse>

			</template>
			<!-- 已处理 -->
			<template v-if="detailsEd.length">
				<CellTip title="已处理"> </CellTip>
				<uni-collapse ref="collapse" v-for="item in detailsEd" :key="item.id">
					<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
						<OrderDetail slot="typeOpenShow" :value1="item.equiName" :value2="item.equiCode"
							:value3="'通用设备-' + item.equiTypeName" :value4="item.equiTypeId" :value5="item.equiLocation">
							<!-- <template slot="custSlot">
								<text
									:class="['showBtn',item.status===1?'green':'red']">{{item.status==1?"正常":"缺陷"}}</text>
							</template> -->
						</OrderDetail>
						<view class="content-status">
							<view class="title cell font-grey">
								巡点检事项
							</view>

							<view v-for="(items,indexs) in item.ruleItems" :key="indexs">
								<view class="cell cell-box">
									<view class="tip">
										<text class="dian">检测事项：</text> <text
											class="content">{{items.itemContent}}</text>
										<text class="status font-sm" v-text="'检测内容：'+items.itemName"></text>
									</view>
									<view class="status-info font-sm">
										<view>
											<text class="font-grey ">检测标准：</text><text>{{items.itemStandard }}</text>
										</view>

									</view>
								</view>
								<view class="btn-status">
									<text
										:class="['showBtn',items.status===1?'green':'red']">{{items.status==1?"正常":"缺陷"}}</text>
								</view>
							</view>
						


						</view>
					</uni-collapse-item>
				</uni-collapse>
			</template>

		</view>
		<view class="btn-submit" @click="bindSubmitFn">
			报工
		</view>
	</view>
</template>

<script>
	import {
		get,
		postJ,
		post
	} from "@/utils/api.js"
	import CellTip from '@/components/CellTip.vue'
	import OrderDetail from '../components/OrderDetail.vue'
	import popupOper from '@/components/PopupOper.vue'
	export default {
		components: {
			CellTip,
			OrderDetail,
			popupOper
		},
		data() {
			return {
				worksheetInfo: {},
				details: [],
				detailsIng: [],
				detailsEd: [],
				optionShow: false,
				status: '1', //1 执行 0 暂停
				
				// operationList: [{
				// 	title: '暂停',
				// 	class: 'iconfont icon-zhuanpai',
				// 	type: 1
				// }, {
				// 	title: '执行',
				// 	class: 'iconfont icon-zhuanpai',
				// 	type: 0
				// }],
			}
		},
		onLoad(options) {
			this.pageId = options.id;
			this.getInfo();

		},
		onShow() {
			if (this.worksheetInfo) {
				this.getInfo();
			}
		},
		methods: {
			//自动执行
			toImplement(state) {
				postJ(this.apiUrl + "/api/feature/worksheet/implement", {
					id: this.pageId,
					state: state
				}).then(res => {
					this.state = state == "1" ? "0" : "1"; //状态更换
					if (state === '0') {
						//暂停，回退到详情
						this.back()
					}
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},

			changeStatus(status,ruleItemId, bizEquiId,item) {
				if (status === 1) {
					postJ(this.apiUrl + "/rule/item/editStatus", {
						ruleItemId,
						status
					}).then(
						res => {
							// console.log(res)
							if (res.success) {
								uni.showToast({
									title: '操作成功'
								})
								this.getInfo();
							}
						})
				} else {
					get(this.apiUrl + "/repair/info/isExistRepair/" + bizEquiId).then(res => {
						// console.log(res)
						if (res.success) {
							if (res.data) {
								uni.showToast({
									title: "当前设备不能报修",
									icon: "none"
								})
								return
							}
							uni.navigateTo({
								url: '../defects/defects?id=' + this.pageId + "&executeUserName=" + this
									.worksheetInfo
									.workOrder.executeUserName + "&equiName=" + item.equiName +
									"&equiCode=" + item
									.equiCode + "&cycleType=" + this
									.worksheetInfo.rule.cycleType + "&cycleValue=" + this.worksheetInfo
									.rule.cycleValue +
									"&bizEquiId=" + bizEquiId +"&ruleItemId="+ruleItemId
							})
						}
					})

				}
			},
			getInfo() {
				get(this.apiUrl + "/patrol/order/getDetail/" + this.pageId).then(res => {
					this.worksheetInfo = res.data;
					this.detailsIng = res.data.equiList.filter(item => !item.status)
					this.detailsEd = res.data.equiList.filter(item => item.status)

				})
			},
			bindSubmitFn() {
				get(this.apiUrl + "/patrol/order/report/" + this.pageId).then(res => {
					uni.navigateTo({
						url: '/pages/promp/promp?title=巡点检工单'
					})
				}).catch(err => {
					uni.showToast({
						title: err.message || '报工失败',
						icon: 'none',
						duration: 3000
					})
				})
			},
			// goDetail(id, status) {
			// 	//已报修-已消缺

			// 	// uni.navigateTo({
			// 	// 	url: '../defects/defects?id=' + id + "&type=details" + "&parentsId=" + this.pageId
			// 	// })
			// },
			//点击显示弹窗
			setOptionShow() {
				this.optionShow = !this.optionShow;
			},
			//选择对应的操作
			operate(type) {
				if (type === 1) { //暂停
					this.toImplement('0');
					this.setOptionShow();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-status {
		padding: 20rpx 0 40rpx;
		background-color: $page-bg;
		line-height: 1.5;
		font-size: $uni-font-size-base;
		color: $uni-text-color;

		.cell {
			padding: 10rpx 30rpx;
		}

		.cell-box {
			width: 94%;
			margin: 0 auto;
			padding: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			// background-color: #fff;

			.tip {
				position: relative;
				margin-bottom: 20rpx;

				.content {
					font-size: $uni-font-size-sm;
				}
			}

			.tip .dian {
				padding-right: 10rpx;
				font-size: $uni-font-size-sm;
				font-weight: bold;
				color: $uni-text-color;
			}

			.tip .status {
				position: absolute;
				right: 0;
				color: $uni-text-color-grey;
			}

			// margin-bottom: 20rpx;
		}

		.status-info {
			position: relative;
		}

		.title {
			margin-bottom: 20rpx;
			font-weight: 700;
			text-indent: 0;
		}

		.font-grey {
			color: $uni-text-color-grey;
		}
	}

	.btn-status {
		display: flex;
		justify-content: flex-end;
		font-size: $uni-font-size-base;
		padding-right: 20rpx;
	}

	.showBtn {
		display: flex;
		justify-content: flex-end;
	}

	.green {
		color: green
	}

	.red {
		color: red;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}
</style>
