<template>
	<tabs :options="tabOptions" v-model="query.taskStatus" v-if="!searchFlag" />
	<view class="flex search">
		<view class="search-item flex justify-center" :search="searchFlag">
			<view class="search-item-conent">
				<uni-easyinput prefixIcon="search" type="text" placeholder="搜索" :inputBorder="false" v-model="query.taskName" @focus="searchFlag = true"   />
			</view>
		</view>
		<view class="search-item flex justify-center" v-if="!searchFlag" @tap="showPopup">
			<view :class="filterFlag ? 'search-item-conent active': 'search-item-conent'">
				<uni-icons customPrefix="customicons" type="filter" size="20" color="#666" />
				<view>筛选</view>
			</view>
		</view>
		<view v-else>
			<view class="cancel-btn" @tap="cancleSearch">取消</view>
		</view>
	</view>
	<view>
		<view class="flex gap-16 task-item card" v-for="item in tasks" @tap="open(item)" >
			<template v-if="item.taskType === 'testing_alcohol'">
				<view>
					<image src="../../static/icon/ic_wine.png" style="width: 44px; height: 44px"></image>
				</view>
				<view style="width: calc(100% - 60px)">
					<view class="flex justify-between header">
						<view class="title">{{ item.taskName }}</view>
						<view class="date">{{ item.createTime }}</view>
					</view>
					<view>
						<view class="row">
							<view class="col col-24">
								<view class="label">督察单位：</view>
								<view class="content">{{ item.supDepartName }}</view>
							</view>
							<view class="col col-24">
								<view class="label">抽检人员：</view>
								<view class="content">{{ item.totalNumber }}人</view>
							</view>
							<view class="col col-24">
								<view class="label">检查时间：</view>
								<view class="content">{{ item.beginTime }} ~ {{ item.endTime }}</view>
							</view>
						</view>
						<view style="color: #FF0000;" v-if="item.taskStatus === 'todo'">待处理</view>
						<view v-else>已办结</view>
					</view>
				</view>
			</template>
			<template v-if="item.taskType === 'inspection'">
				<view>
					<image src="../../static/icon/ic_task.png" style="width: 44px; height: 44px"></image>
				</view>
				<view style="width: calc(100% - 60px)">
					<view class="flex justify-between header">
						<view class="title">{{ item.taskName }}</view>
						<view class="date">{{ item.createTime }}</view>
					</view>
					<view>
						<view class="row">
							<view class="col col-24">
								<view class="label">督察单位：</view>
								<view class="content">{{ item.supDepartName }}</view>
							</view>
							<view class="col col-12">
								<view class="label">督察类型：</view>
								<view class="content">{{ item.supervisionType }}</view>
							</view>
							<view class="col col-24">
								<view class="label">督察内容：</view>
								<view class="content">{{ item.taskContent }}</view>
							</view>
							<view class="col col-24">
								<view class="label">检查时间：</view>
								<view class="content">{{ item.beginTime }} ~ {{ item.endTime }}</view>
							</view>
						</view>
						<view style="color: #FF0000;" v-if="item.taskStatus === 'todo'">{{ !item.hasSign? '待签收' : '待处理'}}</view>
						<view v-else>已办结</view>
					</view>
				</view>
			</template>
			<template v-if="item.taskType === 'selfexamination'">
				<view>
					<image src="../../static/icon/ic_selfexamination.png" style="width: 44px; height: 44px"></image>
				</view>
				<view style="width: calc(100% - 60px)">
					<view class="flex justify-between header">
						<view class="title">{{ item.taskName }}</view>
						<view class="date">{{ item.createTime }}</view>
					</view>
					<view>
						<view class="row">
							<view class="col col-24">
								<view class="label">自查单位：</view>
								<view class="content">{{ item.supDepartName }}</view>
							</view>
							<view class="col col-12">
								<view class="label">自查类型：</view>
								<view class="content">{{ item.type }}</view>
							</view>
							<view class="col col-24">
								<view class="label">自查要求：</view>
								<view class="content">{{ item.requirement }}</view>
							</view>
							<view class="col col-24">
								<view class="label">任务时间：</view>
								<view class="content">{{ item.beginTime }} ~ {{ item.endTime }}</view>
							</view>
						</view>
						<view style="color: #FF0000;" v-if="item.taskStatus === 'todo'">{{ !item.hasSign? '待签收' : '待处理'}}</view>
						<view v-else>已办结</view>
					</view>
				</view>
			</template>
			<template v-if="item.taskType === 'negative'">
				<view>
					<image src="../../static/icon/ic_question.png" style="width: 44px; height: 44px"></image>
				</view>
				<view style="width: calc(100% - 60px)">
					<view class="flex justify-between header">
						<view class="title">{{ item.taskName }}</view>
						<view class="date">{{ item.createTime }}</view>
					</view>
					<view>
						<view class="row">
							<view class="col col-24">
								<view class="label">业务类别：</view>
								<view class="content">{{ item.businessTypeName }}</view>
							</view>
							<view class="col col-24">
								<view class="label">涉及单位：</view>
								<view class="content">{{ item.supDepartName }}</view>
							</view>
							<view class="col col-24">
								<view class="label">问题内容：</view>
								<view class="content">{{ item.taskContent }}</view>
							</view>
							<view class="col col-24">
								<view class="label">涉嫌问题：</view>
								<view class="content">{{ getDictLabelByArray(suspectProblems, item.involveProblem) || '/' }}</view>
							</view>
						</view>
						<view style="color: #555;" v-if="item.flowKey === 'completed'">已办结</view>
						<view style="color: #FF0000;" v-else>{{ getFlowLable(item.flowKey) }}</view>
					</view>
				</view>
			</template>
		</view>
		<empty v-if="tasks.length === 0" />
	</view>
	
	<uni-popup ref="filterPopupRef" type="top">
		<view class="popup-container">
			<view class="popup-header">
				<view>全部筛选</view>
				<uni-icons type="closeempty" class="close-btn" @tap="closePopup"></uni-icons>
			</view>
			<view class="popup-body">
				<view class="filter-container">
					<view class="filter-label">任务类型</view>
					<filter-radio :data="taskTypes" v-model="query.taskType" @change="search" />
					<!-- <view class="filter-label">任务状态</view>
					<filter-radio :data="taskStatus" v-model="query.taskStatus" /> -->
				</view>
			</view>
			<view class="footer col-24 flex gap-8">
				<button class="col-12" @tap="reset">重置</button>
				<button type="primary" @tap="handleSearch" class="col-12">完成</button>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import { listTask, getTaskCount } from '@/api/task'
	import { getDictLabelByArray } from '@/common/util'
	import { getDictOptions } from '@/common/dict'
	
	let _this;
	let oldTasks = []
	export default {
		inheritAttrs: false,
		data() {
			return {
				tabOptions: [
					{
						text: '我的待办（0）',
						value: 'todo'
					},
					{
						text: '我的已办（0）',
						value: 'done'
					}
				],
				query: {
					size: 100,
					current: 1,
					taskStatus: this.$page.options.taskStatus
				},
				tasks: [],
				searchFlag: false,
				filterFlag: false,
				loading: false,
				taskTypes: [
					{
						text: '测酒任务',
						value: 'testing_alcohol'
					},
					{
						text: '督察任务',
						value: 'inspection'
					},
					{
						text: '所队自查',
						value: 'selfexamination'
					},
					{
						text: '问题',
						value: 'negative'
					},
				],
				taskStatus: [
					{
						text: '待签收',
						value: 'tobe_signed'
					},
					{
						text: '待处理',
						value: 'tobe'
					},
				],
				
			}
		},
		setup() {
			const suspectProblems = getDictOptions('suspectProblem');
			return {
				suspectProblems,
				getDictLabelByArray
			}
		},
		watch: {
			searchFlag(val) {
				if (val) {
					oldTasks = this.tasks;
					this.tasks = []
				} else {
					this.tasks = oldTasks
				}
			},
			'query.taskName': function(val) {
				console.log(this)
				if (_this.searchFlag && val) {
					_this.getTasks()
				}
			},
			'query.taskStatus': function(val) {
				this.getTasks()
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			this.getTasks()
		},
		methods: {
			open(item) {
				if (item.taskType === 'testing_alcohol') {
					uni.navigateTo({
						url: `/pages/task/testingAlcohol/people?taskId=${item.id}&taskStatus=${item.taskStatus}`
					});
				}
				if (item.taskType === 'inspection') {
					if (item.hasSign) {
						uni.navigateTo({
							url: `/pages/task/inspection/list?taskId=${item.id}`
						});
					} else {
						uni.navigateTo({
							url: `/pages/task/inspection/info?taskId=${item.id}`
						});
					}
				}
				if (item.taskType === 'selfexamination') {
					uni.navigateTo({
						url: `/pages/task/selfexamination/index?taskId=${item.id}`
					});
				}
				if (item.taskType === 'negative') {
					console.log(item.taskStatus)
					if (item.taskStatus === 'todo') {
						uni.navigateTo({
							url: `/pages/negative/action?id=${item.negativeId}&workId=${item.id}`
						});
					} else {
						uni.navigateTo({
							url: `/pages/negative/info?id=${item.negativeId}`
						});
					}
					
				}
			},
			getFlowLable(flowKey) {
				const signFlows = ['second_sign']
				if (signFlows.indexOf(flowKey) > -1) {
					return '待签收'
				}
				const distributeFlows = ['first_distribute', 'second_distribute']
				if (distributeFlows.indexOf(flowKey) > -1) {
					return '待下发'
				}
				const verifyFlows = ['verify']
				if (verifyFlows.indexOf(flowKey) > -1) {
					return '核查办理'
				}
				const approveFlows = ['second_approve']
				if (approveFlows.indexOf(flowKey) > -1) {
					return '待审批'
				}
				return ''
			},
			async getTasks() {
				this.loading = true
				uni.showLoading({
					title: '数据加载中'
				});
				listTask(this.query).then(data => {
					this.tasks = data.records
					this.loading = false
					uni.hideLoading();
				})
				getTaskCount(this.query).then(data => {
					this.tabOptions[0].text = `待办任务（${data.todoCount}）`
					this.tabOptions[1].text = `已办任务（${data.doneCount}）`
				})
			},
			cancleSearch() {
				this.searchFlag = false
				this.query.taskName = ''
			},
			showPopup() {
				this.$refs.filterPopupRef.open()
			},
			closePopup() {
				this.$refs.filterPopupRef.close()
			},
			search() {
				if (this.query.taskType) {
					this.filterFlag = true
				} else {
					this.filterFlag = false
				}
				this.getTasks()
			},
			handleSearch() {
				this.search()
				this.closePopup()
			},
			reset() {
				this.filterFlag = false
				let taskStatus = this.query.taskStatus;
				this.query = {
					size: 100,
					current: 1,
					taskStatus
				}
				this.getTasks()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-item {
		.header {
			margin-bottom: 12rpx;

			.title {
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.date {
				font-size: 24rpx;
				color: #666;
			}
		}

	}
	
</style>