<template>
	<el-dialog v-model="dialogVisible" draggable title="编辑市民标签" ref="dialogRef" width="900px" append-to-body destroy-on-close>
		<div class="order-accept-citizen-portrait" v-loading="loading">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
					<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">{{ formData.citizen.phoneNumber }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">姓名:</span>
								<span class="flex-1">{{ formData.citizen.name }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">首次联系:</span>
								<span class="flex-1">{{ formatDate(formData.oneCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">上次联系:</span>
								<span class="flex-1">{{ formatDate(formData.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">{{ formData.order.allOrderNum }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">已办工单:</span>
								<span class="flex-1">{{ formData.order.endOrderNum }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">在办工单:</span>
								<span class="flex-1">{{ formData.order.handOrderNum }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">不满意工单:</span>
								<span class="flex-1">{{ formData.order.dissatisfactionNum }}</span>
							</p>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="display: flex; align-items: center">
					<el-card class="w100" shadow="never">
						<p class="citizen-title mb10">市民画像</p>
						<div class="citizen-img-box">
							<img v-lazy="getImageUrl('public/citizen.png')" alt="" />
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
					<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">{{ formData.callHistory.allCallNum }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">接通次数:</span>
								<span class="flex-1">{{ formData.callHistory.connectNum }}</span>
							</p>
							<p class="form-item">
								<span class="form-label">回拨次数:</span>
								<span class="flex-1">{{ formData.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 formData.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 formData.label" 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>
							<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>
	</el-dialog>
</template>

<script setup lang="ts" name="businessCitizenTagsEdit">
import { reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { citizenDetailByPhone, citizenLabelAdd, citizenLabelDelete } from '@/api/auxiliary/citizen';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { getImageUrl, throttle } from '@/utils/tools';

const emit = defineEmits(['updateList']);
// 定义变量内容
const dialogVisible = ref<Boolean>(false);
const state = reactive<any>({
	ruleForm: {
		content: '', // 标签内容
	},
});
const formData = reactive({
	lastCallTime: '', // 上次联系时间
  oneCallTime: '', // 首次联系时间
	hotspotNames: [], // 关注诉求
	order: {
		allOrderNum: 0, // 全部工单
		endOrderNum: 0, // 已办工单
		handOrderNum: 0, // 在办工单
		dissatisfactionNum: 0, // 不满意工单
	},
	callHistory: {
		allCallNum: 0, // 来电次数
		callBackNum: 0, // 回拨次数
		connectNum: 0, // 接通次数
	},
	citizen: {
		name: '', // 姓名
		id: '', // 市民id
	},
	label: [], // 市民标签
	phoneNumber: '', // 联系电话
});
const loading = ref(false);
// 打开弹窗
const openDialog = (row: any) => {
	formData.phoneNumber = row.phoneNumber ?? '';
	getDetail(formData.phoneNumber);
	dialogVisible.value = true;
};
// 关闭弹窗
const closeDialog = () => {
	dialogVisible.value = false;
};
// 查询市民画像详情
const getDetail = async (phone: string) => {
	loading.value = true;
	try {
		const { result } = await citizenDetailByPhone(phone);
		formData.lastCallTime = result.lastCallTime; // 上次联系时间
    formData.oneCallTime = result.oneCallTime; // 首次联系时间
		formData.hotspotNames = result.hotspotNames ? result.hotspotNames.split(',') : []; // 关注诉求
		formData.order = result.order; // 工单历史
		formData.callHistory = result.callHistory; // 来电历史
		formData.citizen = result.citizen; // 市民信息
		formData.label = result.citizen?.labelDetails ?? []; // 市民标签
		loading.value = false;
	} catch (e) {
		loading.value = false;
		console.log(e, '错误信息');
	}
};
// 添加标签
const ruleFormRef = ref<RefType>();
const addTag = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
		citizenLabelAdd({
			citizenId: formData.citizen.id,
			label: state.ruleForm.content,
		})
			.then(() => {
				ElMessage.success('操作成功');
				state.ruleForm.content = '';
				getDetail(formData.phoneNumber);
				emit('updateList');
			})
			.finally(() => {
				loading.value = false;
			});
	});
}, 300);
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(formData.phoneNumber);
				emit('updateList');
			});
		})
		.catch(() => {});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</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;
				align-items: center;
				margin-bottom: 10px;
				text-align: left;
				.form-label {
					width: 75px;
					text-align: right;
					margin-right: 3px;
				}
				.flex-1 {
					flex: 1;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		.citizen-title {
			font-size: 16px;
			font-weight: bold;
			text-align: center;
		}
		.citizen-img-box {
			img {
				width: 100%;
			}
		}
		.tag-list {
			margin-top: 20px;
			.el-tag {
				margin: 0 10px 10px 0;
				&:last-child {
					margin: 0 0 10px 0;
				}
			}
		}
	}
}
</style>
