<template>
	<view class="wrap">
		<u-card :title="initData.dept__name" margin="12rpx" :border="false" :foot-border-top="false"
			border-radius="8rpx" :head-style="headstyle" padding="10">
			<view class="" slot="body">
				<view class="u-body-item-title">
					<span class="itemstate">{{initData.state}}</span>
				</view>
				<view class="u-body-item" v-if="initData.start_date">
					开始检查日期: <span>{{initData.start_date}}</span>
				</view>
			</view>
			<view class="" slot="foot">
				<view style="flex:true;text-align: right;">
					<u-checkbox @change="selfChange" v-model="is_self">只看我的</u-checkbox>
					<u-button type="primary" size="mini" style="margin-left:6rpx" @click="startCheck"
						v-if="initData.state=='待检查'&&initData.leader==vuex_user.id">开始检查</u-button>
					<u-button type="warning" size="mini" style="margin-left:6rpx" @click="upReport"
						v-if="initData.state=='检查中'&&initData.leader==vuex_user.id">提交结果</u-button>
					<u-button size="mini" style="margin-left:6rpx" @click="goReport" v-if="initData.state=='已提交'">查看报告
					</u-button>
				</view>

			</view>
		</u-card>
		<view style="margin:12rpx 6rpx 12rpx;">
			<u-section title="详细项目" :right="false"></u-section>
		</view>
		<view style="background-color: #ffffff;padding: 8rpx;">
			<u-tabs :list="list" :is-scroll="false" :current="currentIndex" @change="sectionChange"></u-tabs>
			<!-- <uni-segmented-control :current="currentIndex" :values="list1" styleType="text" @clickItem="sectionChange2"></uni-segmented-control> -->
			<!-- 			<u-card v-for="(item, index) in records" v-bind:key="index"  margin="6rpx"
				:border="false" :foot-border-top="false" border-radius="8rpx" :head-style="headstyle"
				@body-click="clickRow" :index="item.id" padding="10" v-if="getShow(item.checked)">
				<view class="" slot="body">
					<view class="u-body-item-title">
						{{item.item_.name}}
					</view>
					<view class="u-body-item">
						<view>
							<span>{{item.checker.name}}</span>
							<span v-if="item.result=='发现'" style="color:red">{{item.result}}</span>
							<span v-else-if="item.result=='未发现'" style="color:green">{{item.result}}</span>
							<span v-else-if="item.result=='不适用'">{{item.result}}</span>
						</view>
					</view>
				</view>
			</u-card> -->
			<view v-show="currentIndex==0" style="text-align: right;position:sticky;top:0;z-index: 9999;background-color: white;
			border-bottom:dotted #ff0000;">
				<view style="height: 12rpx;"></view>
				<u-checkbox v-model="mutiSelect" @change="mutiSelectChange" v-if="initData.leader==vuex_user.id">多选</u-checkbox>
				<u-button type="primary" size="mini" style="margin-left:6rpx" @click="membersShow"
					v-if="initData.leader==vuex_user.id && mutiSelect">指派给</u-button>
			</view>
			<view style="margin-top:6rpx">
				<u-gap height="2" bg-color="#ececec"></u-gap>
			</view>
			<checkbox-group @change="checkboxChange">
			
				<view v-for="(item, index) in records" v-bind:key="index" v-show="getShow(item.checked)"
					style="padding: 12rpx;">
					<view class="u-body-item-title">
						<checkbox :checked="item.selected" :value="item.id+'item'" v-if="mutiSelect"/>
						<!-- <u-checkbox v-model="item.selected" v-if="mutiSelect"></u-checkbox> -->
						{{item.item_.sortnum}}.{{item.item_.name}}
					</view>
					<view class="u-body-item">
						<span v-if="item.checker_" style="color:gray">{{item.checker_.name}}</span>
						<span v-if="item.result=='发现'" style="color:red;margin-left:8rpx">{{item.result}}</span>
						<span v-else-if="item.result=='未发现'" style="color:green;margin-left:8rpx">{{item.result}}</span>
						<span v-else-if="item.result=='不适用'" style="color:green;margin-left:8rpx">{{item.result}}</span>
						<span style="margin-left:8rpx" v-if="item.check_time">{{item.check_time.substr(0,16)}}</span>
					</view>
					<view style="flex:true;text-align: right;">
						<u-button type="primary" size="mini" style="margin-left:6rpx" @click="clickRow(item)" v-if="initData.state=='检查中'">检查
						</u-button>
						<u-button size="mini" style="margin-left:6rpx" @click="clickRow2(item)" >
							详情</u-button>
					</view>
					<view style="margin-top:6rpx">
						<u-gap height="2" bg-color="#ececec"></u-gap>
					</view>
				</view>
			</checkbox-group>
				<!-- <u-collapse ref="mycollapse">
				<u-collapse-item :title="title1" :open="true">
					<u-cell-group :border="false">
						<u-cell-item :title="item.item_.name" v-for="(item, index) in records1" v-bind:key="index"
						:label="item.checker_.name" >
						
						</u-cell-item>
					</u-cell-group>
				</u-collapse-item>
				<u-collapse-item :title="title2">
					<u-cell-group :border="false">
						<u-cell-item :title="item.item_.name" v-for="(item, index) in records2" v-bind:key="index"
						:label="item.checker_.name" @click="clickRow(item)">
						<span slot="right-icon" >
						<span v-if="item.result=='发现'" style="color:red">{{item.result}}</span>
						<span v-else-if ="item.result=='未发现'" style="color:green">{{item.result}}</span>
						<span v-else>{{item.result}}</span>
						</span>
						</u-cell-item>
					</u-cell-group>
				</u-collapse-item>
			</u-collapse> -->
		</view>
		<view style="margin-top:16rpx">
			<u-divider bg-color="#ededed">没有更多了</u-divider>
		</view>
		<u-picker mode="selector" v-model="showMembers" :default-selector="[0]" :range="members"
			range-key="member__name" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initData: {},
				headstyle: {
					"padding-top": "12rpx",
					"padding-bottom": "12rpx"
				},
				currentIndex: 0,
				list: [{
						name: '未检查'
					},
					{
						name: '已检查'
					}
				],
				list1:['未检查', '已检查'],
				// title1:"未检查(0)",
				// title2:"已检查(0)",
				records: [],
				records_: [],
				// records1:[],
				// records2:[],
				is_self: false,
				showNo: false,
				mutiSelect: false,
				showMembers: false,
				members: [],
				selects: []
			}
		},
		onLoad(options) {
			this.initData = options;
			let pages = getCurrentPages();
			let prePage = pages[pages.length - 2];
			if (prePage && prePage.subtask) {
				this.members = prePage.subtask.members
			} else {
				this.$u.api.getSubinspectTask(this.initData.subtask).then(res => {
					this.members = res.data.members
				})
			}
			this.getRecords();
		},
		onShow() {
			this.getSubtaskDept();
			let rd = uni.getStorageSync('inspectrecord')
			if(rd){
				for(var i=0;i<this.records.length;i++){
					if(this.records[i].id==rd.id){
						this.records[i] = rd
					}
				}
				for(var i=0;i<this.records_.length;i++){
					if(this.records_[i].id==rd.id){
						this.records_[i] = rd
					}
				}
			}
		},
		methods: {
			getSubtaskDept() {
				this.$u.api.getSubtaskDept(this.initData.id).then(res => {
					this.initData = res.data
					if (this.initData.state == '已提交') {
						this.sectionChange(1)
					}
				})
			},
			getRecords() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$u.api.getInspectRecords({
					subtask: this.initData.subtask,
					dept: this.initData.dept,
					pageoff: true
				}).then(res => {
					uni.hideLoading()
					this.records_ = res.data
					this.records = res.data
					// for(var i=0;i<this.records.length;i++){
					// 	this.records[i].selected=false
					// }
					this.mutiSelect = false
					this.sectionChange(this.currentIndex)
					this.selfChange({value:this.is_self})
					// this.setCollapse(this.records_)
				}).catch(e=>{uni.hideLoading()})
			},
			selfChange(val) {
				if (val.value) {
					let selfrecords = []
					for (var i = 0; i < this.records_.length; i++) {
						if (this.records_[i].checker == this.vuex_user.id) {
							selfrecords.push(this.records_[i])
						}
					}
					this.records = selfrecords
				} else {
					// this.setCollapse(this.records_)
					this.records = this.records_
				}
			},
			sectionChange(index) {
				this.currentIndex = index;
			},
			sectionChange2(val){
				this.currentIndex=val.currentIndex;
			},
			checkboxChange(val){
				let selects = [];
				for(var i=0;i<val.detail.value.length;i++){
					selects.push(val.detail.value[i].replace("item",""))
				}
				this.selects = selects
			},
			mutiSelectChange() {
				if (this.mutiSelect) {
					for (var i = 0; i < this.records.length; i++) {
						this.records[i].selected = false
					}
				}
			},
			getShow(val) {
				if (val && this.currentIndex == 1) {
					return true
				} else if (!val && this.currentIndex == 0) {
					return true
				}
				return false
			},
			// setCollapse(data){
			// 	let records1 = []
			// 	let records2 = []
			// 	for(var i=0;i<data.length;i++){
			// 		if(data[i].checked){
			// 			records2.push(data[i])
			// 		}else{
			// 			records1.push(data[i])
			// 		}
			// 	}
			// 	this.records1 = records1
			// 	this.records2 = records2
			// 	this.title1 = "未检查" + "("+this.records1.length+")"
			// 	this.title2 = "已检查" + "("+this.records2.length+")"
			// 	this.$nextTick(() => {
			// 	    this.$refs["mycollapse"].init();
			// 	});
			// },
			clickRow(item) {
				// uni.navigateTo({
				// 	url:'/pages/inspectrecord/recorddo'
				// })
				if ((item.checker != this.vuex_user.id && item.checker == null) || this.initData.leader == this.vuex_user
					.id || item.checker == this.vuex_user.id) {
					this.$u.route({
						url: '/pages/inspectrecord/recorddo',
						params: {
							id: item.id
						}
					})
				} else {
					this.$u.toast('该项检查已指派他人')
				}

			},
			clickRow2(item) {
				// uni.navigateTo({
				// 	url:'/pages/inspectrecord/recorddo'
				// })
				this.$u.route({
					url: '/pages/inspectrecord/recorddetail',
					params: {
						id: item.id
					}
				})
			},
			goReport() {
				this.$u.toast('暂未开通')
			},
			membersShow() {
				if (this.selects.length > 0) {
					this.showMembers = true
				} else {
					this.$u.toast('请选择检查项')
				}

			},
			pickerConfirm(index) {
				var that = this
				let checker = that.members[index].member
				uni.showModal({
					title: '',
					content: '确认将' + that.selects.length + '个检查指派给' + that.members[index].member__name + '吗?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.appointChecker({
								records: that.selects,
								checker: checker
							}).then(res => {
								that.$u.toast('成功')
								that.getRecords()
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			upReport() {
				let that = this
				uni.showModal({
					title: '',
					content: '确认提交吗?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.upInspectDept(that.initData.id).then(res => {
								that.initData = res.data
								that.$u.toast('提交成功')
							}).catch(e => {})
						} else if (res.cancel) {

						}
					}
				});
			},
			startCheck(){
				let that = this
				uni.showModal({
					title: '',
					content: '确认开始检查吗?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.startInspectDept(that.initData.id).then(res => {
								that.initData = res.data
								that.$u.toast('成功')
							}).catch(e => {})
						} else if (res.cancel) {
				
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #ededed;
	}
</style>
<style lang="scss" scoped>
	.u-body-item-title {
		font-size: 32rpx;
		color: #333;
	}

	.u-body-item {
		margin-top: 6rpx;

		span {
			color: #333;
		}
	}

	.itemstate {
		color: $u-type-primary-dark;
		font-weight: bold;
		margin-right: 8rpx;
	}
</style>
