<template>
	<div class="order-accept-citizen-portrait" v-loading="loading">
		<el-row :gutter="20">
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="never">
					<p class="border-title mb10">基本信息</p>
					<div class="info-form">
						<p class="form-item">
							<span class="form-label">联系电话:</span>
							<span class="flex-1">{{ state.orderInfo.contact }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">姓名:</span>
							<span class="flex-1">{{ state.citizen.name }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">首次联系:</span>
							<span class="flex-1">{{ formatDate(state.oneCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">上次联系:</span>
							<span class="flex-1">{{ formatDate(state.lastCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
						</p>
					</div>
				</el-card>
				<el-card shadow="never" class="mt20">
					<p class="border-title mb10">工单历史</p>
					<div class="info-form">
						<p class="form-item">
							<span class="form-label">全部工单:</span>
							<span class="flex-1">{{ state.order.allOrderNum }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">已办工单:</span>
							<span class="flex-1">{{ state.order.endOrderNum }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">在办工单:</span>
							<span class="flex-1">{{ state.order.handOrderNum }}</span>
						</p>
						<p class="form-item">
							<span class="form-label" style="width:75px">不满意工单:</span>
							<span class="flex-1">{{ state.order.dissatisfactionNum }}</span>
						</p>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="never">
					<p class="border-title mb10">来电历史:</p>
					<div class="info-form">
						<p class="form-item">
							<span class="form-label">来电次数:</span>
							<span class="flex-1">{{ state.callHistory.allCallNum }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">接通次数:</span>
							<span class="flex-1">{{ state.callHistory.connectNum }}</span>
						</p>
						<p class="form-item">
							<span class="form-label">回拨次数:</span>
							<span class="flex-1">{{ state.callHistory.callBackNum }}</span>
						</p>
					</div>
				</el-card>
				<el-card shadow="never" class="mt20">
					<p class="border-title mb10">关注诉求</p>
					<div class="tag-list">
						<el-tag v-for="tag in state.hotspotNames" effect="dark" :key="tag">{{ tag }}</el-tag>
					</div>
				</el-card>
			</el-col>
			<el-col :span="24" class="mt20">
				<el-card shadow="never">
					<p class="border-title mb10">市民标签</p>
					<div class="tag-list">
						<el-tag v-for="tag in state.label" size="small" :closable="closable" effect="dark" @close="closeTag(tag)" :key="tag">{{ tag.label }}</el-tag>
					</div>
					<el-form :model="state.ruleForm" label-width="0" ref="ruleFormRef" @submit.native.prevent v-if="state.citizen.id && closable">
						<el-form-item label="" prop="content" :rules="[{ required: true, message: '请填写标签内容', trigger: 'blur' }]">
							<div class="flex-center-align mt10 w100">
								<el-input
									v-model="state.ruleForm.content"
									placeholder="请填写标签内容"
									clearable
									show-word-limit
									maxlength="10"
									@keyup.enter="addTag(ruleFormRef)"
								/>
								<el-button type="primary" @click="addTag(ruleFormRef)" class="ml10">添加标签</el-button>
							</div>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts" name="orderAcceptCitizenPortrait">
import { computed, reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { citizenDetailByPhone, citizenAdd, citizenLabelAdd, citizenLabelDelete } from '@/api/auxiliary/citizen';
import { formatDate } from '@/utils/formatTime';

const props = defineProps({
	editable: {
		type: Boolean,
		default: true,
	},
	orderInfo: {
		type: Object,
		default: () => {
			return {};
		},
	},
});

const state = reactive<any>({
	lastCallTime: '', // 上次联系时间
	oneCallTime: '', // 首次联系时间
	hotspotNames: [], // 关注诉求
	order: {
		allOrderNum: 0, // 全部工单
		endOrderNum: 0, // 已办工单
		handOrderNum: 0, // 在办工单
		dissatisfactionNum: 0, // 不满意工单
	},
	callHistory: {
		allCallNum: 0, // 来电次数
		callBackNum: 0, // 回拨次数
		connectNum: 0, // 接通次数
	},
	citizen: {
		name: '', // 姓名
		id: '', // 市民id
	},
	label: [], // 市民标签
	orderInfo: <EmptyObjectType>{}, // 工单信息
	ruleForm: {
		content: '', // 标签内容
	},
});

// 暂定智能删除自己创建的标签 但是系统管理员可以删除所有标签
const closable = computed(() => {
	return props.editable;
});
// 查询市民画像方法
const getCitizen = () => {
	state.orderInfo = props.orderInfo;
	const phone = /^((0\d{2,3}(-)?\d{7,8})|(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})$/;
	if (!phone.test(state.orderInfo.contact)) return; // 联系号码正则
	getDetail(state.orderInfo.contact);
};
const loading = ref(false);
// 查询市民画像详情
const getDetail = async (phone: string) => {
	loading.value = true;
	try {
		const { result } = await citizenDetailByPhone(phone);
		if (result.citizen) {
			// 有市民信息
			state.lastCallTime = result.lastCallTime; // 上次联系时间
			state.oneCallTime = result.oneCallTime; // 首次联系时间
			state.hotspotNames = result.hotspotNames ? result.hotspotNames.split(',') : []; // 关注诉求
			state.order = result.order; // 工单历史
			state.callHistory = result.callHistory; // 来电历史
			state.citizen = result.citizen; // 市民信息
			state.label = result.citizen?.labelDetails ?? []; // 市民标签
		} else {
			// 没有市民信息 添加市民信息 重新获取详情
			await citizenAdd({
				phoneNumber: phone,
				name: state.orderInfo.fromName,
				gender: state.orderInfo.fromGender,
				identityType: state.orderInfo.identityType,
				licenceType: state.orderInfo.licenceType,
				licenceNo: state.orderInfo.licenceNo,
				ageRange: state.orderInfo.ageRange,
				contact: state.orderInfo.contact,
			});
			await getDetail(phone);
		}
		loading.value = false;
	} catch (e) {
		loading.value = false;
		console.log(e, '错误信息');
	}
};
// 添加标签
const ruleFormRef = ref<RefType>();
const addTag = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
		citizenLabelAdd({
			citizenId: state.citizen.id,
			label: state.ruleForm.content,
		})
			.then(() => {
				ElMessage.success('操作成功');
				state.ruleForm.content = '';
				getDetail(state.orderInfo.contact);
			})
			.finally(() => {
				loading.value = false;
			});
	});
};
const closeTag = (item: any) => {
	ElMessageBox.confirm(`您确定要删除【${item.label}】标签，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			citizenLabelDelete({
				id: item.id,
			}).then(() => {
				ElMessage.success('操作成功');
				getDetail(state.orderInfo.contact);
			});
		})
		.catch(() => {});
};
defineExpose({
	getCitizen,
});
</script>

<style scoped lang="scss">
.order-accept-citizen-portrait {
	.el-card {
		background-color: var(--el-color-info-light-9);
		:deep(.el-card__body) {
			padding: 20px 15px;
		}
		.info-form {
			.form-item {
				display: flex;
				margin-bottom: 10px;
        align-items:baseline;
				.form-label {
					margin-right: 5px;
          width: 60px;
				}
				.flex-1 {
					flex: 1;
					word-break: break-all;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		.citizen-title {
			font-size: 16px;
			font-weight: bold;
			text-align: center;
		}
		.citizen-img-box {
			img {
				width: 100%;
			}
		}
		.tag-list {
			overflow: auto;
			.el-tag {
				margin: 0 10px 10px 0;
				&:last-child {
					margin: 0 0 10px 0;
				}
			}
		}
	}
}
</style>
