<template>
	<view class="flex search">
		<view class="search-item flex justify-center" :search="searchFlag">
			<view class="flex gap-8 search-item-conent">
				<uni-easyinput :style="{width: `60px`}" prefixIcon="search" type="text" v-model="query.taskName"
					placeholder="搜索" :inputBorder="false" @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="searchFlag = false">取消</view>
		</view>
	</view>
	<view class="problem-container">
		<view class="problem-item" v-for="item in problems" @tap="open(item.id)">
			<view class="problem-item-img">
				<net-image :filepath="item.files[0].filePath" />
			</view>
			<view class="problem-item-c">
				<view class="row" style="--label-width: 160rpx">
					<view class="col col-24" v-if="item.probmeType">
						<view class="label">问题类型：</view>
						<view class="content">{{ item.probmeType }}</view>
					</view>
					<view class="col col-24">
						<view class="label">被督察单位：</view>
						<view class="content">{{ item.departName }}</view>
					</view>
					<view class="col col-24" v-if="item.peoples.length > 0">
						<view class="label">被督察人员：</view>
						<view class="content">{{ item.peoples?.map(p => p.name).join(' ') }}</view>
					</view>
					<view class="col col-24">
						<view class="label">情况描述：</view>
						<view class="content">{{ item.thingDesc }}</view>
					</view>
				</view>
				<view class="flex justify-between">
					<view></view>
					<view class="problem-item-time">{{ item.createTime }}</view>
				</view>
			</view>
		</view>
		<empty v-if="problems.length === 0" />
	</view>
	<view class="footer col-24">
		<button type="primary" @click="handleAdd">添加记录</button>
	</view>
</template>
<script setup>
	import store from '@/store'
</script>
<script>
	import {
		listInspectionProblem
	} from '@/api/inspection'

	export default {
		props: ['taskId'],
		data() {
			return {
				searchFlag: false,
				query: {},
				taskContent: this.$page.options.taskContent,
				problems: []
			}
		},
		onLoad() {
			
		},
		onShow() {
			listInspectionProblem(this.$page.options.taskId, this.query).then(data => {
				this.problems = data.records
			})
		},
		onBackPress(options) {
			console.log(options)
			return false
		},
		methods: {
			handleAdd() {
				uni.navigateTo({
					url: '/pages/task/problem/add?taskId=' + this.$page.options.taskId
				});
			},
			open(id) {
				uni.navigateTo({
					url: '/pages/task/problem/index?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.problem-container {
		padding: 0 24rpx;
	}

	.problem-item {
		display: flex;
		gap: 0 20rpx;
		padding: 24rpx 0;
		box-shadow: inset 0 -1px 0 0 #DDDDDD;

		.problem-item-img {
			width: 128rpx;
			height: 128rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.problem-item-c {
			width: calc(100% - 148rpx);
		}

		.problem-item-time {
			font-size: 12px;
			color: #666;
		}
	}
</style>