<template>
	<view class="wrapper" v-if="show">
		<view class="header text-center">
			<fui-icon name="arrowleft" color="#fff" :size="50" @tap="show = false"></fui-icon>
			<text>认定办结</text>
		</view>
		<view class="body">
			<view class="cell">
				<view class="h2">
					<text>办理反馈情况</text>
				</view>
				<view class="row flex wrap">
					<view class="col-12 mb-6 flex">
						<text class="label">群众反应事项解决情况</text>
						<text>{{ mail.verifyIsResolved ? "已解决" : "未解决" }}</text>
					</view>
					<view class="col-12 mb-6 flex">
						<text class="label">办理反馈情况</text>
						<text>{{ mail.verifyFeedback }}</text>
					</view>
					<view class="col-12 mb-6 flex">
						<text class="label">回访人姓名</text>
						<text>{{ mail.verifyFollowupPolice?.name }}</text>
					</view>
					<view class="col-12 mb-6 flex">
						<text class="label">回访人电话</text>
						<text>{{ mail.verifyFollowupPolice?.phone }}</text>
					</view>
					<view class="col-12 mb-6 flex">
						<text class="label">回访人警号</text>
						<text>{{ mail.verifyFollowupPolice?.empNo }}</text>
					</view>
				</view>
			</view>
			
			<uni-forms :label-width="100" :modelValue="formData" :rules="rules" ref="formRef">
				<view class="cell mt-6" v-if="mail.verifyIsTrue === '属实' || mail.verifyIsTrue === '基本属实'">
					<view class="h2">
						<text>查证属实问题</text>
					</view>
					<mail-label-check :labels="verifyProblems" v-model="formData.verifyProblem" />
				</view>
				
				<view class="cell mt-6">
					<view class="h2">
						<text>综合认定情况</text>
					</view>
					<uni-forms-item label="办理合格情况" name="qualifiedProcessingStatus" >
						<uni-data-select :localdata="qualifiedProcessingStatuss" placeholder="请选择办理合格情况" v-model="formData.qualifiedProcessingStatus" />
					</uni-forms-item>
					<uni-forms-item label="问题解决情况" name="problemSolvingStatus" >
						<uni-data-select :localdata="[{text: '已解决', value: true}, {text: '未解决', value: false}]" placeholder="请选择问题解决情况" v-model="formData.problemSolvingStatus"/>
					</uni-forms-item>
					<uni-forms-item label="群众回复情况" name="satisfactionStatus" >
						<uni-data-select :localdata="satisfactionStatuss" placeholder="请选择群众回复情况" v-model="formData.satisfactionStatus"/>
					</uni-forms-item>
					<view style="font-size: 14px; margin-left: 106px; margin-top: 10px;">{{ getSatisfaction() }}</view>
				</view>
				<view class="cell mb-6">
					<view class="h2 relative mb-10">
						<text>信件标签</text>
						<view class="add-label-btn" @tap="showAddMailLabel">添加标签</view>
					</view>
					<mail-label-check :labels="labels" v-model="formData.mailLabels" :map="{text: 'labelName', value: 'id'}" />
				</view>
				<view class="cell mb-6">
					<view class="h2 relative">
						<text>认定办结意见</text>
					</view>
					<uni-forms-item name="completionComment">
						<textarea placeholder="请输入认定办结意见" v-model="formData.completionComment" class="mb-6"></textarea>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="footer flex end">
			<view class="flex gap">
				<m-button size="large" @tap="show = false">取消</m-button>
				<m-button size="large" type="primary" @tap="submit">认定办结</m-button>
			</view>
		</view>
	</view>
	
	<m-popup ref="addMailLaeblRef" title="信件标签" placeholder="请输入标签内容" @confirm="handleAddMailLabel" />
</template>

<script setup>
	import { reactive, ref, inject, watch } from "vue";
	import { getLeaderList } from '@/api/user'
	import { labelLists, labelAdd } from "@/api/label";
	import { getDictOptions } from '@/common/dict'
	const satisfactionStatuss = getDictOptions('satisfaction_status')
	const qualifiedProcessingStatuss = getDictOptions('qualified_processing_status')
	const verifyProblems = getDictOptions('verify_problem')
	
	const mail = inject("mail");
	
	const formData = reactive({
		verifyProblem: mail.value.verifyProblem
	})
	watch(() => mail.value.verifyProblem, val => {
		formData.verifyProblem = val
	})
	const formRef = ref()
	const rules = {
		qualifiedProcessingStatus: {
			rules:[
				{
					required: true,
					errorMessage: '请选择办理合格情况',
				}
			]
		},
		problemSolvingStatus: {
			rules:[
				{
					required: true,
					errorMessage: '请选择问题解决情况',
				}
			]
		},
		satisfactionStatus: {
			rules:[
				{
					required: true,
					errorMessage: '请选择群众回复情况',
				}
			]
		},
		completionComment: {
			rules:[
				{
					required: true,
					errorMessage: '请输入认定办结意见',
				}
			]
		}
	}
	const show = ref(false)
	const leaders = ref([])
	
	const addMailLaeblRef = ref()
	watch(() => mail.value.flowKey, (val) => {
		getLeaderList(val === 'second_approval' ? 'deputy' : 'leader').then(data => {
			leaders.value = data
		})
	})
	
	const props = defineProps({
		modelValue: {
			type: Object
		}
	})
	const emit = defineEmits(['update:modelValue', 'submit'])
	
	function submit() {
		formRef.value.validate().then(res => {
			console.log(formData)
			emit('update:modelValue', formData)
			emit('submit', 'confirmedCompletion')
			show.value = false
		})
	}
	
	function showAddMailLabel() {
		addMailLaeblRef.value.open()
	}
	
	const labels = ref([])
	getLabelList()
	function getLabelList() {
		labelLists().then(data => {
			labels.value = data
		})
	}
	
	function handleAddMailLabel(val) {
		labelAdd({labelName: val}).then(() => {
			addMailLaeblRef.value.close()
			getLabelList()
		})
	}
	
	function open() {
		show.value = true
	}
	
	const SATISFACTION = {
	    not_satisfied: "不满意",
	    basically_satisfied: "基本满意",
	    satisfied: "非常满意",
	};

	function getSatisfaction() {
	    if (!mail.value.satisfaction) {
	        return "";
	    }
	    return SATISFACTION[mail.value.satisfaction] + '(网络)';
	}
	
	defineExpose({
		open
	})
</script>

<style lang="scss">
	.wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F1F1F1;
		z-index: 3;
		.header {
			background-color: var(--primary-color);
			color: #fff;
			height: 46px;
			line-height: 46px;
			position: relative;
			padding-top: 40px;
			.fui-icon {
				position: absolute;
				left: 10px;
			}
		}
		.body {
			height: calc(100vh - 136px);
			overflow: auto;
			font-size: 11px;
			.h2 {
				padding: 6px 0;
				text {
					font-size: 12px;
					font-weight: 700;
					ine-height: 17px;
				}
			}
			.label {
				line-height: 1.1;
			}
			.add-label-btn {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 12px;
				color: var(--primary-color);
				padding: 6px;
			}
			textarea {
				border: 1px solid #ddd;
				padding: 12px;
				height: 80px;
				font-size: 14px;
				border-radius: 2px;
			}
			
		}
		.footer {
			background-color: #fff;
			padding: 9px 12px;
			border-top: 1px solid #e5e5e5;
		}
		
	}
	:deep() {
		.no-label {
			width: 0 !important;
		}
	}
</style>