<template>
	<view class="inspection-task-input" @tap="show = true">
		<view>
			<view v-if="text">{{ text }}</view>
			<view class="inspection-task-input_placeholder" v-else>请关联督察任务</view>
		</view>
		<view class="inspection-task-input_icon">
			<uni-icons type="down" v-if="!text"></uni-icons>
		</view>
	</view>
	<view class="inspection-task-dialog" v-if="show">
		<view class="flex search">
			<view class="search-item flex justify-center" :search="searchFlag">
				<view class="flex gap-8 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">
				<view class="flex gap-8 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 class="inspection-task-container">
			<view v-for="item in tasks" class="inspection-task-item" @tap="handleSelect(item)">
				<view class="row">
					<view class="col col-24">
						<view class="label">任务名称：</view>
						<view class="content">{{ item.taskName }}</view>
					</view>
					<view class="col col-24">
						<view class="label">参与人员：</view>
						<view class="content">{{ item.persons }}</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.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>
		</view>
		<view class="footer col-24">
			<button type="primary" @click="handleAdd">创建督察任务</button>
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';
import { listInspection } from '@/api/inspection'

	defineProps({
		modelValue: {
			type: Object
		}
	})
	const emit = defineEmits(['update:modelValue']);
	
	const show = ref(false);
	const query = ref({});
	const searchFlag = ref(false)
	const tasks = ref([]);
	const text = ref('')
	
	function cancleSearch() {
		searchFlag.value = false
	}
	
	onMounted(() => {
		listInspection(query.value).then(data => {
			tasks.value = data.records
		})
	})
	
	function handleSelect(item) {
		text.value = item.taskName;
		emit('update:modelValue', item.id);
		show.value = false
	}
</script>

<style lang="scss">
	.inspection-task-input {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-right: 10px;
		.inspection-task-input_placeholder {
			font-size: 12px;
			color: grey;
			padding-left: 6px;
		}
		.inspection-task-input_icon {
			.uni-icons {
				color: #666 !important;
			}
		}
	}
	.inspection-task-dialog {
		background-color: #fff;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}
	.inspection-task-container {
		padding: 0 24rpx;
		.inspection-task-item {
			padding: 24rpx 0;
			box-shadow: inset 0 -1px 0 0 #DDDDDD;
		}
	}
</style>