<template>
	<view class="content">
		<view class="list">
			<view class="list-item"  v-for="(item,index) in tableData" :key="index">
				<view class="item-title" @click="showDetail(item)" :class="{'noCheck': item.chooseType == '0'}">
					<view class="title-left">
						<uni-icons2 type="minus" size="20" @click="handleDisabledCheck(item)"></uni-icons2>
						{{item.checkItem}}
					</view>
					<uni-icons2 v-if="!item.isShow" type="arrowright" size="18"></uni-icons2>
					<uni-icons2 v-else type="arrowdown" size="18"></uni-icons2>
				</view>
				<view v-if="item.isShow && item.chooseType != '0'" >
					<view class="item-children" v-for="(item2,index2) in item.children" :key="index2">
						<view class="item-title title2" :class="{'noCheck': item2.chooseType == '0'}">
							<view class="title-left">
								<uni-icons2 type="minus" size="20" @click="handleDisabledCheck(item2)"></uni-icons2>
								{{item2.checkContent}}
							</view>
						</view>
						<view v-if="item2.chooseType != '0'">
							<view class="item-detail" v-for="(item3,index3) in item2.children" :key="index3">
								<view class="item-title title3" :class="{'noCheck': item3.chooseType == '0'}">
									<view class="title-left">
										<uni-icons2 type="minus" size="20" @click="handleDisabledCheck(item3)"></uni-icons2>
										{{item3.checkDetailContent}}
									</view>
								</view>
								<view class="item-actions" v-if="item3.chooseType != 0">
									<view class="upload-img">
										<view @click="previewImage(item3)">
											<uni-icons2 type="image" color="#4396E7" size="12"></uni-icons2>
											{{item3.imageUrl ? item3.imageUrl.split(',').length : '0'}}
										</view>
										<uni-icons2 v-if="item3.imageUrl && item3.imageUrl.split(',').length > 0 && status != 2" class="clos-btn" type="clear" color="#ff4b49" size="12" @click="removeImg(item3)"></uni-icons2>
									</view>
									<view class="upload-img" v-if="status != 2 && (!item3.imageUrl || item3.imageUrl.split(',').length<1)"  @click="uploadImg(item3)">
										<view>
											拍照
										</view>
									</view>
									<view class="item-radio">
										<view class="radio-item"
											v-for="(itm,idx) in checkData"
											:style="{'color': item3.chooseType == itm.value ? '#fff':'#000',background: item3.chooseType == itm.value ? colorList[idx]:'#fff'}"
											:key="idx"
											@click="checkRadio(item3,itm)">{{itm.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn" v-if="type != '0' && isEdit == '1'" @click="finishCheck">完成验收</view>
	</view>
</template>

<script>
	export default {
		props:['tableData','checkData','type','isEdit','status'],
		data(){
			return{
				imgFileList: [],
				colorList:['#1ecc8f','#ff9305','#ff4b49'],
				activeIndex: "",
				isShow: true
			}
		},
		created(){
		},
		methods:{
			checkRadio(val,val2){
				if(this.status == 2){
					return;
				}
				val.chooseType = val2.value
				val.chooseName = val2.name
				// this.$forceUpdate()
				console.log(val,val2)
				this.submitCheckRes(val)
			},
			showDetail(val){
				console.log(val)
				val.isShow = !val.isShow
				this.$forceUpdate()
			},
			uploadImg(val) {
				if(this.status == 2){
					return;
				}
				var that = this
				let arr = val.imageUrl ? val.imageUrl.split(',') : []
				if(arr.length < 3){
					uni.chooseImage({
						count: 1,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									arr.push(JSON.parse(uploadFileRes.data).data[0].imageUrl)
									val.imageUrl = arr.join(',')
									that.submitCheckRes(val)
									that.$emit('upTableData')
								}
							});
						}
					})
				}
			},
			//预览图片
			previewImage(val) {
				let arr = []
				if(val.imageUrl){
					val.imageUrl.split(',').forEach(item=>{
						arr.push(this.url_config+'image/'+item)
					})
				}
				console.log(arr)
				if(arr.length > 0){
					uni.previewImage({
						urls: arr
					})
				}
			},
			removeImg(val){
				if(this.status == 2){
					return;
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							val.imageUrl = ""
							that.submitCheckRes(val)
							that.$emit('upTableData')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 设置检查项不检查 
			handleDisabledCheck(val){
				if(this.status == 2){
					return;
				}
				if(val.chooseType == '0'){
					this.sendRequest({
						url:'xmgl/acceptanceTableUserCheckRecord/updateCancelNotCheck',
						method:'post',
						data:{checkItemId: val.idList ? val.idList:val.id},
						success:res=>{
							uni.hideLoading()
							this.$emit('upTableData')
							console.log(res)
						}
					})
				} else {
					if(val.idList){
						this.submitDisabledRes(val.idList)
					} else if(val.id){
						this.submitDisabledRes(val.id)
					}
				}
				console.log(val)
			},
			submitDisabledRes(data){
				if(this.status == 2){
					return;
				}
				console.log(data)
				this.sendRequest({
					url:'xmgl/acceptanceTableUserCheckRecord/updateSetNotCheck',
					method:'post',
					data:{checkItemId: data.toString()},
					success:res=>{
						uni.hideLoading()
						this.$emit('upTableData')
						console.log(res)
					}
				})
			},
			submitCheckRes(data){
				if(this.status == 2){
					return;
				}
				this.sendRequest({
					url:'xmgl/acceptanceTableUserCheckRecord/updateTableCheckItemResult',
					method:'post',
					data:data,
					success:res=>{
						uni.hideLoading()
						this.$emit('upTableData')
						console.log(res)
					}
				})
			},
			finishCheck(){
				if(this.status == 2){
					return;
				}
				let userCheckId = ""
				if(this.tableData && this.tableData.length>0){
					userCheckId = this.tableData[0].children[0].children[0].userCheckId
				} else {
					uni.showToast({
						title:'内容为空',
						icon: 'none'
					})
					return;
				}
				console.log(userCheckId)
				this.sendRequest({
					url:'xmgl/acceptanceTableUserCheckRecord/updateCloseUserCheck',
					method:'post',
					data:{userCheckId: userCheckId},
					success:res=>{
						uni.hideLoading()
						this.$emit('upTableData')
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20rpx 0;
		.list{
			padding-bottom: 96rpx;
			.list-item{
				margin-bottom: 20rpx;
				.item-title{
					display: flex;
					align-items: center;
					height: 96rpx;
					background: #f8f8f8;
					justify-content: space-between;
					padding: 0 28rpx;
					.title-left{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						.uni-icons{
							margin-right: 32rpx;
						}
					}
				}
				.title2{
					background: #fff;
					padding-left: 54rpx;
					border-bottom: 1px solid #eee;
				}
				.title3{
					background: #fff;
					padding-left: 88rpx;
				}
				.item-children{
					background: #fff;
					.item-actions{
						display: flex;
						padding: 20rpx 0;
						padding-left: 88rpx;
						padding-right: 28rpx;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #eee;
						.upload-img{
							display: flex;
							align-items: center;
							font-size: 28rpx;
							border: 1px solid #4396E7;
							padding: 10rpx 10rpx;
							color: #4396E7;
							border-radius: 6rpx;
							position: relative;
							.uni-icons{
								margin-right: 16rpx;
							}
							.clos-btn{
								position: absolute;
								right: -28rpx;
								top: -16rpx;
							}
						}
						.item-radio{
							display: flex;
							font-size: 28rpx;
							border-right: 1px solid #eee;
							.radio-item{
								padding: 10rpx 20rpx;
								border: 1px solid #eee;
								border-right: none;
							}
						}
					}
				}
			}
		}
		.submit-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 96rpx;
			background: #4a88f5;
			color: #fff;
			width: 100%;
			text-align: center;
			line-height: 96rpx;
		}
		.noCheck{
			opacity: 0.5;
		}
	}
</style>
