<template>
	<view>
		<!-- 头部区域 -->
		<view class="topWrap">
			<view class="topItem">
				<view class="topLeft">
					状态
				</view>
				<view class="topRight">
					<image v-if="checkAll == false" class="topImg" src="../../../static/image/icon_daiducha.png" mode=""></image>
					<image v-if="checkAll == true" class="topImg" src="../../../static/image/icon_yiducha.png" mode=""></image>
				</view>
			</view>
			<view class="topItem">
				<view class="topLeft">
					检查时间<span>*</span>
				</view>
				<view class="topRight" @tap="visibleMinute=true">
					<text>{{checkTime}}</text>
					<image class="rightImg" src="../../../static/image/icon_arrow.png" mode=""></image>
				</view>
			</view>
			<w-picker
				:visible.sync="visibleMinute"
				mode="date" 
				:current="true"
				fields="day"
				@confirm="onConfirm($event,'minute')"
				@cancel="onCancel"
				:disabled-after="false"
				ref="date" 
			>检查时间</w-picker>
			<view class="topItem">
				<view class="topLeft">
					检查人员<span>*</span>
				</view>
				<view class="topRight">
					普通用户
				</view>
			</view>
		</view>
		<!-- 底部区域 -->
		<view style="height: 24rpx;"></view>
		<view v-for="(item,index) in keyList" :key="index">
			<view class="bottomWrap">
				<view class="bottomItem" @click="showSubCheck(index)" :class="{bottomLine:item.show == 0 && (index+1) != keyList.length}">
					<view class="bottomLeft">
						<view class="completeImg">
							<image v-if="item.complete == 1" src="../../../static/image/icon_complete2.png" mode=""></image>
						</view>
						{{item.title}}
					</view>
					<view class="bottomRight">
						<image v-if="item.show == 0" src="../../../static/image/icon_arrow.png" mode=""></image>
						<image v-if="item.show == 1" src="../../../static/image/icon_arrow_up.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="subCheckWrap" v-if="item.show == 1" v-for="(subItem,subIndex) in item.subKeyList" :key="subIndex">
				<navigator class="subCheckItem" :url="'checkDetail?param='+subItem.param+'&companyid='+companyid" hover-class="none">
					{{subItem.title}}
					<image src="../../../static/image/icon_arrow.png" mode=""></image>
				</navigator>
			</view>
		</view>
		<!-- 按钮区域 -->
		<view class="btnWrap">
			<view class="title">
				已督查企业记录需确认归档，确认归档后，信息将不可修改
			</view>
			<view class="btn" @click="archive" :class="{active:checkAll}">
				确认归档
			</view>
		</view>
		<!-- 归档成功弹窗 -->
		<view class="archiveAlertWrap" v-if="showArchiveAlert">
			<view class="archiveAlert">
				<view class="archiveImg">
					<image src="../../../static/image/icon_complete2.png" mode=""></image>
				</view>
				<view class="archiveTxt">
					已归档成功
				</view>
				<view class="bottomTxt" @click="showArchiveAlert = false">
					我知道了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	export default {
		data() {
			return {
				companyid:'',
				showArchiveAlert:false,
				visibleMinute:false,
				checkTime:'请选择',
				keyList:[
					{
						title:'一.基本情况',
						// code:'jbqk',
						param:{type:'1'},
						complete:1,
						show:0,
						subKeyList:[]
					},
					{
						title:'二.产排污环节对应排放口及其排放限量',
						complete:1,
						show:0,
						subKeyList:[
							{
								title:'1.水污染情况',
								param:JSON.stringify({type:'swrqk',pdoType:'0'})
							},
							{
								title:'2.大气污染情况',
								param:JSON.stringify({type:'dqwrqk',pdoType:'1'})
							},
							{
								title:'3.噪声排放',
								param:JSON.stringify({type:'zspf'})
							},
							{
								title:'4.固体废物排放',
								param:JSON.stringify({type:'gtfwpf',pdoType:'2'})
							}
						]
					},
					{
						title:'三.自行监测',
						complete:0,
						show:0,
						subKeyList:[
							{
								title:'1.废水',
								param:JSON.stringify({type:'fs'})
							},
							{
								title:'2.废气',
								param:JSON.stringify({type:'fq'})
							}
						]
					},
					{
						title:'四.环境管理台账',
						// code:'hjgltz',
						param:{type:'4'},
						complete:0,
						show:0,
						subKeyList:[]
					},
					{
						title:'五.执行报告',
						// code:'zxbg',
						param:{type:'5'},
						complete:0,
						show:0,
						subKeyList:[]
					},
					{
						title:'六.信息公开',
						// code:'xxgk',
						param:{type:'6'},
						complete:0,
						show:0,
						subKeyList:[]
					},
					{
						title:'七.修改落实情况',
						// code:'xglsqk',
						param:{type:'7'},
						complete:0,
						show:0,
						subKeyList:[]
					},
					{
						title:'八.其他许可内容',
						// code:'qtxknr',
						param:{type:'8'},
						complete:0,
						show:0,
						subKeyList:[]
					}
				]
			}
		},
		components:{
			wPicker
		},
		computed:{
			checkAll(){
				for(var i = 0; i < this.keyList.length; i ++){
					if(this.keyList[i].complete == 0){
						return false
					}
				}
				return true
			}
		},
		onLoad(option) {
			console.log('option',option)
			this.companyid = option.companyid
			uni.setNavigationBarTitle({
				title: option.factoryName //这是修改后的导航栏文字
			})
		},
		methods: {
			onCancel(){
				
			},
			onConfirm(e,pickerType){
				this.checkTime = e.result
			},
			showSubCheck(index){
				if(this.keyList[index].complete == 0){
					this.keyList[index].complete = 1
				}else{
					this.keyList[index].complete = 0
				}
				
				if(this.keyList[index].subKeyList.length > 0){
					if(this.keyList[index].show == 0){
						this.keyList[index].show = 1
					}else{
						this.keyList[index].show = 0
					}
				}else{
					uni.navigateTo({
						url:'checkDetail?param='+JSON.stringify(this.keyList[index].param)+'&companyid='+this.companyid
					})
				}
			},
			archive(){
				if(!this.checkAll){
					uni.showToast({
						title:'请填完所有项 再归档',
						icon:'none'
					})
					return
				}
				if(this.checkTime == '请选择'){
					uni.showToast({
						title:'请选择检查时间',
						icon:'none'
					})
					return
				}
				this.showArchiveAlert = true
			}
		}
	}
</script>

<style lang="scss">
	page{background: #f7f8fa;}
	/* 头部区域 */
	.topWrap{padding: 0 32rpx;background: #fff;}
	.topWrap .topItem{display: flex;justify-content: space-between;align-items: center;height: 104rpx;font-size: 30rpx;border-top: 2rpx solid #f2f3f5;}
	.topItem .topLeft{color: #646566;}
	.topLeft span{color: red;}
	.topItem .topRight{display: flex;align-items: center;}
	.topRight text{color: #c8c9cc;}
	.topRight .topImg{width: 104rpx;height: 104rpx;}
	.topRight .rightImg{width: 32rpx;height: 32rpx;}
	/* 底部区域 */
	.bottomWrap{padding: 0 32rpx;background: #fff;}
	.bottomWrap .bottomItem{display: flex;justify-content: space-between;align-items: center;height: 104rpx;font-size: 30rpx;}
	.bottomItem.bottomLine{border-bottom: 2rpx solid #f2f3f5;}
	.bottomItem .bottomLeft{display: flex;align-items: center;}
	.bottomLeft .completeImg{width: 60rpx;display: flex;align-items: center;}
	.completeImg image{width: 40rpx;height: 40rpx;} 
	.bottomRight image{width: 32rpx;height: 32rpx;}
	.subCheckWrap{padding: 0 32rpx 0 64rpx;}
	.subCheckWrap .subCheckItem{display: flex;justify-content: space-between;align-items: center;height: 96rpx;color: #646566;font-size: 28rpx;}
	.subCheckItem image{width: 32rpx;height: 32rpx;}
	/* 按钮区域 */
	.btnWrap{padding: 16rpx 60rpx;background: #fff;margin-top: 32rpx;}
	.btnWrap .title{color: #ff8f56;font-size: 24rpx;}
	.btnWrap .btn{height: 100rpx;background: #dcdee0;border-radius: 28rpx;text-align: center;line-height: 100rpx;color: #fff;font-size: 34rpx;margin-top: 16rpx;}
	.btn.active{background: $theme-color;}
	// 归档成功弹窗
	.archiveAlertWrap{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.5);justify-content: center;display: flex;align-items: center;}
	.archiveAlertWrap .archiveAlert{width: 622rpx;background: #fff;border-radius: 30rpx;}
	.archiveAlert .archiveImg{padding-top: 48rpx;display: flex;justify-content: center;}
	.archiveAlert .archiveTxt{padding: 32rpx 0 48rpx;text-align: center;font-size: 32rpx;border-bottom: 2rpx solid #ebedf0;}
	.archiveImg image{width: 128rpx;height: 128rpx;}
	.archiveAlert .bottomTxt{height: 96rpx;text-align: center;line-height: 96rpx;color: $theme-color;font-size: 32rpx;}
</style>