<template>
	<tabs :options="tabOptions" v-model="query.status" v-if="!searchFlag && taskStatus === 'todo'" />
	<view class="flex search">
		<view class="search-item flex justify-center" :search="searchFlag">
			<view class="search-item-conent">
				<uni-easyinput prefixIcon="search" type="text" v-model="query.queryTxt" placeholder="搜索" :inputBorder="false" @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="searchFlag = false">取消</view>
		</view>
	</view>
	<view class="people-container">
		<view class="flex gap-16 card" v-for="item in peoples" @tap="open(item)">
			<view class="people-img">
				<net-image :filepath="item.avatarUrl" v-if="item.avatarUrl" />
				<image src="/static/police.png" v-else></image>
			</view>
			<view style="width: calc(100% - 84px)">
				<view>
					<view class="row">
						<view class="col col-12">
							<view class="label">姓名：</view>
							<view class="content">{{ item.name }}</view>
						</view>
						<view class="col col-12">
							<view class="label">警号：</view>
							<view class="content">{{ item.empNo }}</view>
						</view>
						<view class="col col-12">
							<view class="label">所属单位：</view>
							<view class="content">{{ item.departName }}</view>
						</view>
						<view class="col col-12">
							<view class="label">职位：</view>
							<view class="content">{{ item.position }}</view>
						</view>
						<view class="col col-24">
							<view class="label">联系电话：</view>
							<view class="content">
								<view v-if="item.mobile" @tap.stop="callPhone(item.mobile)">{{ item.mobile }}</view>
								<view v-else>/</view>
							</view>
						</view>
						<template v-if="item.status === 'done'">
							<view class="col col-24">
								<view class="label">测酒时间：</view>
								<view class="content">{{ item.testingTime }}</view>
							</view>
							<view class="col col-24">
								<view class="label">
									<view style="padding-right: 18rpx;">
										<uni-tag :text="item.testingResult" type="primary" size="mini" v-if="item.testingResult === '已检测'" />
										<uni-tag :text="item.testingResult" type="error" size="mini"  v-else />
									</view>
								</view>
								<view class="content">
									<text v-if="item.drinkResult === '未饮酒'">{{ item.drinkResult }}</text>
									<text v-else style="color: red">{{ item.drinkResult }}</text>
									<text style="color: #ff5722">{{ item.unTestingDesc }}</text>
								</view>
							</view>
							<view class="col col-24" v-if="item.isIllegalBanquet">
								<view>是否违规宴请：{{ item.isIllegalBanquet }}</view>
							</view>
						</template>
					</view>
				</view>
				<view style="color: #FF0000;" v-if="item.status === 'todo'">待检测</view>
			</view>
		</view>
		<empty v-if="peoples.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="positions" v-model="query.position" @change="search" />
					<view v-if="query.status === 'done'">
						<view class="filter-label">检测情况</view>
						<filter-radio :data="testingResults" v-model="query.testingResult" @change="search" />
					</view>
					<view v-if="query.status === 'done'">
						<view class="filter-label">饮酒结果</view>
						<filter-radio :data="drinkResults" v-model="query.drinkResult" @change="search" />
					</view>
				</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 store from '@/store'
	import { listTestingAlcoholPeople, countTestingAlcoholPeople } from '@/api/testingAlcohol'
	import { submitTask } from '@/api/task'
	
	let oldPeoples;
	let _this;
	export default {
		inheritAttrs: false,
		data() {
			return {
				BASE_PATH: store.state.fileRequestUrl,
				tabOptions: [
					{
						text: '待测人员（0）',
						value: 'todo'
					},
					{
						text: '已测人员（0）',
						value: 'done'
					}
				],
				searchFlag: false,
				peoples: [],
				query: {
					size: 100,
					current: 1,
					status: this.$page.options.taskStatus
				},
				taskStatus: this.$page.options.taskStatus,
				filterFlag: false,
				positions: [
					{
						text: '正职',
						value: '正职'
					},
					{
						text: '副职',
						value: '副职'
					},
				],
				testingResults: [
					{
						text: '已检测',
						value: '已检测'
					},
					{
						text: '未检测',
						value: '未检测'
					},
				],
				drinkResults: [
					{
						text: '饮酒',
						value: '饮酒'
					},
					{
						text: '未饮酒',
						value: '未饮酒'
					},
				]
			}
		},
		watch: {
			searchFlag(val) {
				if (val) {
					oldPeoples = this.peoples;
					this.peoples = []
				} else {
					this.peoples = oldPeoples
				}
			},
			'query.queryTxt': function(val) {
				if (_this.searchFlag) {
					if (val) {
						_this.getPeoples()
					} else {
						this.peoples = []
					}
					
				}
			},
			'query.status': function(val) {
				if (val === 'todo') {
					this.query.testingResult = ''
					this.query.drinkResult = ''
				}
				this.getPeoples()
			}
		},
		onLoad() {
			_this = this;
			
		},
		onShow() {
			console.log('onShow')
			this.getPeoples()
		},
		methods: {
			open(item) {
				if (item.status === 'todo') {
					uni.navigateTo({
					    url: '/pages/task/testingAlcohol/add?people=' + JSON.stringify(item)
					});
				}
				if (item.status === 'done') {
					uni.navigateTo({
					    url: '/pages/task/testingAlcohol/info?people=' + JSON.stringify(item)
					});
				}
			},
			getPeoples() {
				listTestingAlcoholPeople(this.$page.options.taskId, this.query).then(data => {
					this.peoples = data.records
				});
				countTestingAlcoholPeople(this.$page.options.taskId).then(data => {
					this.tabOptions[0].text = `待测人员（${data.todoCount}）`
					this.tabOptions[1].text = `已测人员（${data.doneCount}）`
					if (data.todoCount === 0 && this.query.status === 'todo' && this.taskStatus === 'todo') {
						uni.showModal({
							content: `本次检测人数${data.doneCount}，\n请确认是否提交本次检测结果并结束任务`,
							confirmText: '提交',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									submitTask(_this.$page.options.taskId).then(data => {
										uni.navigateTo({
										    url: '/pages/task/index?taskStatus=todo'
										});
									})
								}
							}
						});
					}
				})
			},
			showPopup() {
				this.$refs.filterPopupRef.open()
			},
			closePopup() {
				this.$refs.filterPopupRef.close()
			},
			search() {
				this.filterFlag = !!this.query.position || !!this.query.testingResult || !!this.query.drinkResult
				console.log(this.filterFlag)
				this.getPeoples()
			},
			handleSearch() {
				this.search()
				this.closePopup()
			},
			reset() {
				this.filterFlag = false
				let taskStatus = this.query.taskStatus;
				this.query = {
					size: 10,
					current: 1,
					taskStatus
				}
				this.getPeoples()
			},
			callPhone(phoneNumber) {
				uni.makePhoneCall({phoneNumber})
			}
		}
	}
</script>

<style lang="scss">
	.people-container {
		max-height: calc(100vh - 96px);
		/* #ifdef H5 */
		max-height: calc(100vh - 140px);
		/* #endif */
		overflow: auto;
	}
	.people-img {
		width: 136rpx;
		height: 205rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>