<template>
	<view class="wrap">
		<u-card :title="subtask.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">{{subtask.state}}</span>
					{{subtask.name}}
				</view>
				<view class="u-body-item">
					所属任务:
					<span v-if="subtask.inspecttask_">{{subtask.inspecttask_.name}}</span>
				</view>
				<view class="u-body-item">
					检查期限:
					<span v-if="subtask.inspecttask_">{{subtask.inspecttask_.start_date}} </span>至
					<span v-if="subtask.inspecttask_"> {{subtask.inspecttask_.end_date}}</span>
				</view>
				<view class="u-body-item">
					涉及单位:
					<span style="color:darkblue;">{{subtask.depts_count}}</span>家
					巡查组:
					<span style="color:darkblue;" v-if="subtask.members">{{subtask.members.length}}</span>人
				</view>
				<view style="margin-top: 6rpx;">
					<u-gap height="2" bg-color="#ececec"></u-gap>
				</view>
				<u-collapse-item title="巡查组组成" :open="true">
					<view>
						组长:
						<span v-for="(item, index) in subtask.members" v-bind:key="index" mode="plain"
							style="margin-left:8rpx;color: darkblue;" v-if="item.type=='组长'">{{item.member__name}}</span>
					</view>
					<view>
						组员:
						<span v-for="(item, index) in subtask.members" v-bind:key="index" mode="plain"
							style="margin-left:8rpx;color: darkblue;" v-if="item.type!='组长'">{{item.member__name}}</span>
					</view>
				</u-collapse-item>
			</view>
		</u-card>
		<view style="background-color: #ffffff;padding: 8rpx 4rpx 0rpx 4rpx;" >
			<!-- <u-subsection :list="list" :current="currentIndex" @change="sectionChange"></u-subsection> -->
			<u-tabs :list="list" :is-scroll="false" :current="currentIndex" @change="sectionChange"></u-tabs>
			<u-cell-group v-if="nowdepts.length>0">
				<u-cell-item v-for="(item, index) in nowdepts" v-bind:key="index" :title="item.dept__name" :arrow="true"
					@click="cellClick(item)"></u-cell-item>
			</u-cell-group>
		</view>
		<view style="margin-top:16rpx">
		<u-divider bg-color="#ededed">没有更多了</u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subtask: {},
				headstyle: {
					"padding-top": "12rpx",
					"padding-bottom": "12rpx"
				},
				currentIndex: 1,
				list: [{
						name: '待检查'
					},
					{
						name: '检查中'
					},
					{
						name: '已提交'
					}
				],
				taskdepts: [],
				nowdepts: []
			}
		},
		onLoad(options) {
			this.subtask.id = options.id;
			this.$u.api.getSubinspectTask(options.id).then(res => {
				this.subtask = res.data
			})

		},
		onShow() {
			this.$u.api.getSubtaskDepts(this.subtask.id).then(res => {
				this.taskdepts = res.data
				this.sectionChange(this.currentIndex);
			})
		},
		methods: {
			sectionChange(index) {
				this.currentIndex = index;
				this.nowdepts = []
				for (var i = 0; i < this.taskdepts.length; i++) {
					if (this.taskdepts[i].state == this.list[index].name) {
						this.nowdepts.push(this.taskdepts[i])
					}
				}
			},
			cellClick(item) {
				uni.navigateTo({
					url:'/pages/inspectrecord/index' + this.$u.queryParams(item)
				})
			},
			touchStart(e){
				console.log(e)
			},
			touchEnd(e){
				console.log(e)
			}
		}
	}
</script>

<style>
	page {
		background-color: #ededed;
	}

	/* .u-cell {
		padding: 12rpx 24rpx !important;
	} */
</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>
