<template>
	<view>
		<view class="card mb-10" v-if="mailReturns.length">
			<view class="mb-6">
				<view class="row">
					<view class="col-12 flex v-center gap">
						<fui-icon name="info" :size="36" color="red"></fui-icon>
						<text class="danger bold" style="font-size: 14px;">信件退回</text>
					</view>
					<view class="col-12 flex">
						<text class="label">退回单位</text>
						<text>{{ mailReturns[0].handlerDeptName }}</text>
					</view>
				</view>
				<view class="mb-4">
					<text class="label">退回理由</text>
				</view>
				<view class="content text-wrap" style="background: #FBEEED;">{{ mailReturns[0].reason }}</view>
			</view>
			<view v-for="item in mailReturns.slice(1, mailReturns.length)" class="mb-6" v-if="!returnFold">
				<view class="row">
					<view class="col-12 flex v-center gap">
						<fui-icon name="info" :size="36" color="red"></fui-icon>
						<text class="danger bold" style="font-size: 14px;">信件退回</text>
					</view>
					<view class="col-12 flex">
						<text class="label">退回单位</text>
						<text>{{ item.handlerDeptName }}</text>
					</view>
				</view>
				<view class="mb-4">
					<text class="label">退回理由</text>
				</view>
				<view class="content text-wrap" style="background: #FBEEED;">{{ item.reason }}</view>
			</view>
			<view class="flex end" v-if="mailReturns.length > 1">
				<m-button style="width: 80px" @tap="returnFold = !returnFold">{{ returnFold ? '查看更多' : '收起' }}</m-button>
			</view>
		</view>
		<view class="card mb-10">
			<view class="row">
				<view class="col-12 flex">
					<text class="label">来信时间</text>
					<text>{{ mail.mailTime }}</text>
				</view>
				<view class="col-12 flex">
					<text class="label">信件来源</text>
					<text>{{ getDictLable(mailSources, mail.source) }}</text>
				</view>
			</view>
			<view class="row" v-if="mail.mainDeptLevel || mail.mailLevel">
				<view class="col-12 flex" v-if="mail.mainDeptLevel">
					<text class="label">主办层级</text>
					<text>{{ mainDeptLevels.find(item => item.value === mail.mainDeptLevel)?.text }}</text>
				</view>
				<view class="col-12 flex" v-if="mail.mailLevel">
					<text class="label">信件等级</text>
					<text>{{ mail.mailLevel }}</text>
				</view>
			</view>
			<view class="row" v-if="mail.mailCategory">
				<view class="col-24 flex">
					<text class="label">信件分类</text>
					<text>{{ getMailCategory() }}</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title">来信人信息</view>
			<view class="row flex wrap">
				<view class="col-12 mb-6 flex">
					<text class="label">姓名</text>
					<text>{{ mail.contactName }}</text>
				</view>
				<view class="col-12 mb-6 flex" v-if="mail.contactSex">
					<text class="label">性别</text>
					<text>{{ mail.contactSex === 'M' ? '男': '女' }}</text>
				</view>
				<view class="col-12 flex" v-if="mail.contactIdCard">
					<text class="label">证件号码</text>
					<text>{{ mail.contactIdCard }}</text>
				</view>
				<view class="col-12 flex v-center">
					<text class="label">手机号</text>
					<view @tap="callPhone(mail.contactPhone)" class="primary flex v-center">
						<text class="mr-4">{{ mail.contactPhone }}</text>
						<fui-icon name="telephone" :size="40" color="#4E5FC8" style="vertical-align: top;"></fui-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="card mb-10">
			<view class="title">信件内容</view>
			<view class="row" v-if="mail.caseNumber">
				<view class="col-24 flex">
					<text class="label">案件编号</text>
					<text>{{ mail.caseNumber }}</text>
				</view>
			</view>
			<view class="row" v-if="mail.involvedDeptName">
				<view class="col-24">
					<text class="label">被投诉/涉及单位</text>
					<text>{{ mail.involvedDeptName }}</text>
				</view>
			</view>
			<view class="mt-10 content text-wrap">{{ mail.content }}</view>
			<file-list :files="mail.attachments" />
		</view>
		
		<view class="card mb-10" v-if="mail.firstDistributeComment || mail.secondDistributeComment">
			<view class="title">下发意见</view>
			<view class="row">
				<view class="col-24" v-if="mail.firstDistributeComment">
					<text class="label">市局下发意见</text>
					<text>{{ mail.firstDistributeComment }}</text>
				</view>
			</view>
			<view class="row">
				<view class="col-24" v-if="mail.secondDistributeComment">
					<text class="label">二级单位下发意见</text>
					<text>{{ mail.secondDistributeComment }}</text>
				</view>
			</view>
		</view>
		
		<view class="card mb-10" v-if="mail.verifyReportedPolices?.length">
			<view class="title">举报/投诉人基本情况</view>
			<view v-for="(item, index) in mail.verifyReportedPolices">
				<view class="title2">被举报投诉对象{{ index + 1 }}</view>
				<view class="row">
					<view class="col-12 flex">
						<text class="label">姓名</text>
						<text>{{ item.name }}</text>
					</view>
					<view class="col-12 flex">
						<text class="label">性别</text>
						<text>{{ item.gender }}</text>
					</view>
				</view>
				<view class="row">
					<view class="col-12 flex">
						<text class="label">警号</text>
						<text>{{ item.empNo }}</text>
					</view>
					<view class="col-12 flex">
						<text class="label">联系电话</text>
						<text>{{ item.mobile }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="card mb-10" v-if="mail.interviewType">
			<view class="title">领导接访情况</view>
			<view class="row">
				<view class="col-12 flex">
					<text class="label">主单位签收时长</text>
					<text>{{ mail.contactFlag ? formatTimeText(mail.mainDeptSignTime) : '未取得联系'}}</text>
				</view>
				<view class="col-12 flex" v-if="mail.contactDuration">
					<text class="label">主单位联系群众时长</text>
					<text>{{ formatTimeText(mail.contactDuration) }}</text>
				</view>
			</view>
			<view class="row">
				<view class="col-12 flex">
					<text class="label">接访形式</text>
					<text>{{ mail.interviewType }}</text>
				</view>
				<view class="col-12 flex">
					<text class="label">是否一把手接访</text>
					<text>{{ mail.interviewIsLeader ? '是' : '否' }}</text>
				</view>
			</view>
			<view class="row">
				<view class="col-24 flex">
					<text class="label">接访领导</text>
					<text>{{ mail.interviewPoliceName }}</text>
				</view>
			</view>
			<view class="row">
				<view class="col-24 flex">
					<text class="label text-left">接访情况</text>
				</view>
			</view>
			<view class="content">{{ mail.interviewDetails }}</view>
			<view class="row">
				<view class="col-24 flex mt-10">
					<text class="label text-left">接访附件</text>
				</view>
			</view>
			<file-list :files="mail.interviewAttachments" />
		</view>
		
		<view class="card" v-if="mail.verifyDetails">
			<view class="title">核查办理情况</view>
			<view class="row">
				<view class="col-12 flex">
					<text class="label">是否属实</text>
					<text>{{ mail.verifyIsTrue }}</text>
				</view>
				<view class="col-12 flex">
					<text class="label">是否需要问责</text>
					<text>{{ mail.verifyNeedAccountability ? '是': '否' }}</text>
				</view>
			</view>
			<view class="row flex wrap" v-if="mail.verifyProblem?.length">
				<view class="col-24 flex mb-6">
					<text class="label text-left">查证属实问题</text>
				</view>
				<view class="flex gap-4 wrap">
					<view v-for="item in mail.verifyProblem">{{ item }}</view>
				</view>
			</view>
			<view class="row flex wrap">
				<view class="col-24 flex">
					<text class="label text-left mb-6">核办结果</text>
				</view>
				<view class="content">{{ mail.verifyDetails }}</view>
			</view>
			
		</view>
		<view class="card mb-6" v-if="mail.verifyPunish?.length">
			<view class="title">整改问责情况</view>
			<view class="row flex wrap">
				<view class="col-24 flex mb-6">
					<text class="label text-left">责任追究</text>
				</view>
				<view class="flex gap-4 wrap">
					<view v-for="item in mail.verifyPunish">{{ item }}</view>
				</view>
			</view>
		</view>
		
		<view class="card mb-6" v-if="mail.verifyIsResolved">
			<view class="title">结果反馈情况</view>
			<view class="row">
				<view class="col-12 flex">
					<text class="label">群众反应事项解决情况</text>
					<text>{{ mail.verifyIsResolved ? '已解决' : '未解决' }}</text>
				</view>
				<view class="col-12 flex">
					<text class="label">办理反馈情况</text>
					<text>{{ mail.verifyFeedback }}</text>
				</view>
			</view>
			<view class="row">
				<view class="col-12 flex">
					<text class="label">回访人姓名</text>
					<text>{{ mail.verifyFollowupPolice?.name }}</text>
				</view>
				<view class="col-12 flex">
					<text class="label">回访人电话</text>
					<text>{{ mail.verifyFollowupPolice?.mobile }}</text>
				</view>
			</view>
			<view class="row">
				<view class="col-24 flex">
					<text class="label">回访人警号</text>
					<text>{{ mail.verifyFollowupPolice?.empNo }}</text>
				</view>
			</view>
		</view>
		
		<view class="card mb-6" v-if="mail.verifyAttachments?.length">
			<view class="title">办结佐证材料</view>
			<file-list :files="mail.verifyAttachments" />
		</view>
	</view>
</template>

<script setup>
	import { ref, inject } from 'vue'
	const mail = inject("mail");
	const mailReturns = inject("mailReturns");
	import { getDictLable, formatTimeText } from '@/common/util'
	import { getDictOptions } from '@/common/dict'
	const mailSources = getDictOptions('mail_source')
	
	function callPhone(phoneNumber) {
		uni.makePhoneCall({
		phoneNumber: phoneNumber // 电话号码
	  });
	}
	
	const mainDeptLevels = [
		{
			text: '市局主办',
			value: 1
		},
		{
			text: '二级机构主办',
			value: 2
		},{
			text: '三级机构主办',
			value: 3
		}
	]
	
	function getMailCategory() {
		return mail.value.mailFirstCategory + (mail.value.mailSecondCategory ? ' > ' + mail.value.mailSecondCategory : '') + 
		(mail.value.mailThreeCategory ? ' > ' + mail.value.mailThreeCategory : '');
	}
	
	const returnFold = ref(true)
</script>

<style lang="scss" scoped>
	.card {
		padding: 12px;
	}
	.content {
		background: #F5F6FF;
		padding: 10px 12px;
		font-size: 14px;
	}
	.row [class*=col-] .label {
		width: 66px;
		line-height: 1.1;
	}
	.title2 {
		font-size: 11px;
		font-weight: 700;
		margin-top: 10px;
	}
</style>