<template>
	<view>
		<view
			class="single-pre"
			v-for="(list, index) in preDetailList"
			:key="list.id"
		>
		<!-- <view>
			<checkbox-group
				v-show="list.status == '0' && showBtn == '0'"
				style="margin-right: 15rpx;"
				@change="checkClick(list)"
			>
				<checkbox :checked="list.checked" />
			</checkbox-group>
		</view> -->
			<view class="info-cont">
				<view>
					<h4>设备类型</h4>
					<h5>{{ list.machineTypeName }}</h5>
				</view>
				<view>
					<h4>规格型号</h4>
					<h5>{{ list.specificationType }}</h5>
				</view>
				<view>
					<h4>设备编码</h4>
					<h5>{{ list.maCode == null ? '-' : list.maCode }}</h5>
				</view>
				<view>
					<h4>报废数量</h4>
					<h5>{{ list.scrapNum }}</h5>
				</view>
				<view>
					<h4>损坏原因</h4>
					<h5>{{ list.scrapType == '0' ? '自然' : '人为' }}</h5>
				</view>
				<view>
					<h4>报废图片</h4>
					<h5>
						<image
							v-for="(img, index) in list.fileUrl"
							:key="index"
							:src="imgPrefix + img[index]"
							mode=""
						></image>
					</h5>
				</view>
				<view
					style="justify-content: right;"
					v-show="showBtn == '0'"
				>
					<view>
						<uni-data-checkbox
							v-model="list.chooseStatus"
							:localdata="range"
							mode="tag"
						>
						</uni-data-checkbox>
					</view>
				</view>
				<!-- <h3 v-show="list.status == '0' && showBtn == '0'">
					<text
						@click="togglePass(list)"
					>
						通过
					</text>
					<text
						style="background-color: #fff; color: #000; border: 1px solid #EBEBEB;"
						@click="toggleRefuse(list)"
					>
						驳回
					</text>
				</h3> -->
				<!-- <h6 class="sticky-area">
					<h4
						v-show="list.status == '0'"
						style="background-color: #FFF6E7; color: #FCAA23;"
					>
						待审核
					</h4>
					<h4
						v-show="list.status == '1'"
						style="background-color: #E9FBE7; color: #3CD92E;"
					>
						已通过
					</h4>
					<h4
						v-show="list.status == '2'"
						style="background-color: #FFECEC; color: #FF4C4C;"
					>
						驳回
					</h4>
				</h6> -->
			</view>
		</view>
		<!-- <custom-tree-select
			:listData="deptList"
			v-model="deptArr"
			:mutiple="true"
			:search="true"
			:choseParent="false"
			:pathMode="true"
			@selectChange="treeChange"
		></custom-tree-select> -->
		<view class="btm-sticky" v-show="showBtn == '0'">
			<!-- <view class="checked">
				<checkbox-group @tap="checkAll" style="margin-right: 15rpx;">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view> -->
			<view style="display: flex;">
				<view
					class="exam"
					style="margin-right: 15rpx;"
					@click="clickSub"
				>
					提交
				</view>
				<!-- <view
					class="exam"
					style="background-color: #fff; color: #000; border: 1px solid #EBEBEB;"
					@click="clickReject"
				>
					驳回
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				pageTotal: 0,
				imgPrefix: '',
				showBtn: '',
				taskId: '',
				preDetailList: [],
				deptList: [],
				deptArr: [],
				range: [
					{ value: '0', text: '报废' },
					{ value: '1', text: '合格' },
					{ value: '2', text: '维修' }
				]
			}
		},
		methods: {
			treeChange () {
				let that = this
				// console.log(e, index);
				console.log(that.deptArr);
			},
			fetchPreDetail (taskId) {
				let that = this
				that.$api.preCrashExam.fetchPreCrashDetail({
					taskId
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						res.data.rows.forEach(item => {
							if (item.fileUrl != null) {
								item.fileUrl = item.fileUrl.split(',')
							}
							item.chooseStatus = ''
						})
						that.preDetailList = res.data.rows
						console.log(that.preDetailList);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			getDeptTree () {
				let that = this
				that.$api.preCrashList.fetchDeptTree().then(res => {
					that.deptList = that.veri(res.data.data)
					console.log(that.deptList);
				}).catch(err => {
					console.log(err);
				})
			},
			veri (data) {
				let that = this
				if (!data || data.length <= 0) {
					return null;
				}
				return data.map(x => {
					const model = {
						name: x.label,
						id: x.id
					}

				    const children = that.veri(x.children);

				    if (children) {
					    model.children = children;
				    }

					return model;
				});
			},
			clickSub () {
				let that = this
				let ok = true
				for (let item of that.preDetailList) {
					if (item.chooseStatus == '') {
						ok = false;
						break;
					}
				}
				if (!ok) {
					uni.showToast({
						icon: 'none',
						title: '您有未选择状态的机具！'
					})
				} else {
					uni.showModal({
						title: '提交列表',
						content: '确认提交机具列表吗？',
						confirmText: '提交',
						success: (res) => {
							if (res.confirm) {
								console.log(that.preDetailList);
							}
						}
					})
				}
			}
		},
		onLoad(params) {
			console.log(params);
			this.showBtn = params.showBtn
			this.taskId = params.taskId
			this.fetchPreDetail(this.taskId)
			this.getDeptTree()
		},
		onShow() {
			this.imgPrefix = this.$api.url
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #FAFDFF;
		box-sizing: border-box;
		padding-bottom: 10vh;
	}
	.single-pre{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #D7D7D7;
		.info-cont{
			width: 100%;
			display: flex;
			flex-direction: column;
			view{
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
				h4{
					font-weight: normal;
					font-size: 30rpx;
					color: #ADADAD;
					padding-right: 20rpx;
				}
				h5{
					font-weight: normal;
					font-size: 30rpx;
					image{
						width: 20%;
						height: 100rpx;
					}
				}
			}
			view:last-child{
				margin-bottom: 0;
			}
		}
		h3{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 50rpx;
			font-size: 14px;
			font-weight: normal;
			display: flex;
			align-items: center;
			justify-content: right;
			text{
				width: 20%;
				box-sizing: border-box;
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				background-color: #3888FF;
				font-weight: normal;
				margin-right: 30rpx;
				color: #fff;
			}
			text:last-child{
				margin-right: 0;
			}
		}
		/* .sticky-area{
			font-size: 16px;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			h4{
				box-sizing: border-box;
				padding: 10rpx 25rpx;
			}
		} */
	}
	.btm-sticky{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 15rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: right;
		align-items: center;
		.exam{
			box-sizing: border-box;
			padding: 10rpx 50rpx;
			border-radius: 30rpx;
			background-color: #3788FF;
			font-size: 14px;
			color: #fff;
		}
	}
</style>
