<template>
	<el-dialog v-model="state.dialogVisible" draggable title="回访修改记录" @close="close" destroy-on-close>
		<div v-loading="state.loading">
			<p class="border-title">修改前</p>
			<el-row :gutter="10" class="show-info-form pd15">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-row v-for="item in state.orderVisitDetailCopyDtos" :key="item.id" :gutter="10">
						<!-- 务员评价 -->
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['ZiGong'].includes(themeConfig.appScope) && item.visitTarget === 10">
							<el-form-item label="语音评价"> {{ item.voiceEvaluateText }} </el-form-item>
						</el-col>
						<template v-if="item.visitTarget === 10 && isTelSource">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
								<el-form-item label="话务员评价">
									{{ item.seatEvaluateText }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="话务员回访内容">
									{{ item.visitContent }}
								</el-form-item>
							</el-col>
						</template>
						<!-- 部门评价 -->
						<template v-if="item.visitTarget === 20">
							<div class="w100 mt10 mb10" style="height: 1px; border: 1px dashed #b2b2b2"></div>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="回访部门">
									{{ item.visitOrgName }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
								<el-form-item label="部门办件结果">
									{{ item.orgProcessingResultsText }}
								</el-form-item>
							</el-col>
							<!-- 不满意才会选择不满意原因 -->
							<el-col
								:xs="24"
								:sm="24"
								:md="24"
								:lg="12"
								:xl="12"
								v-if="item.orgNoSatisfiedReason && item.orgNoSatisfiedReason.length && item.orgProcessingResults?.value === '不满意'"
							>
								<el-form-item label="不满意原因">
									{{ item.orgNoSatisfiedReasonText }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['ZiGong'].includes(themeConfig.appScope)">
								<el-form-item label="部门办件态度">
									{{ item.orgHandledAttitude?.value }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="部门回访内容">
									{{ item.visitContent }}
								</el-form-item>
							</el-col>
						</template>
					</el-row>
				</el-col>
			</el-row>
			<p class="border-title mt20">修改后</p>
			<el-row :gutter="10" class="show-info-form pd20">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item label="修改人">
						{{ state.orderVisitModel.creatorName }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item label="修改时间">
						{{ formatDate(state.orderVisitModel.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-row v-for="item in state.orderVisitDetailDtos" :key="item.id" :gutter="10">
						<!-- 务员评价 -->
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['ZiGong'].includes(themeConfig.appScope) && item.visitTarget === 10">
							<el-form-item label="语音评价"> {{ item.voiceEvaluateText }} </el-form-item>
						</el-col>
						<template v-if="item.visitTarget === 10 && isTelSource">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
								<el-form-item label="话务员评价">
									{{ item.seatEvaluateText }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="话务员回访内容">
									{{ item.visitContent }}
								</el-form-item>
							</el-col>
						</template>
						<!-- 部门评价 -->
						<template v-if="item.visitTarget === 20">
							<div class="w100 mt10 mb10" style="height: 1px; border: 1px dashed #b2b2b2"></div>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="回访部门">
									{{ item.visitOrgName }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
								<el-form-item label="部门办件结果">
									{{ item.orgProcessingResultsText }}
								</el-form-item>
							</el-col>
							<!-- 不满意才会选择不满意原因 -->
							<el-col
								:xs="24"
								:sm="24"
								:md="24"
								:lg="12"
								:xl="12"
								v-if="item.orgNoSatisfiedReason && item.orgNoSatisfiedReason.length && item.orgProcessingResults?.value === '不满意'"
							>
								<el-form-item label="不满意原因">
									{{ item.orgNoSatisfiedReasonText }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['ZiGong'].includes(themeConfig.appScope)">
								<el-form-item label="部门办件态度">
									{{ item.orgHandledAttitude?.value }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="部门回访内容">
									{{ item.visitContent }}
								</el-form-item>
							</el-col>
						</template>
					</el-row>
				</el-col>
			</el-row>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="tsx">
import { computed, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { visitChangeRecord } from '@/api/business/visit';
import { useThemeConfig } from '@/stores/themeConfig';
import { formatDate } from '@/utils/formatTime';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 是否显示弹窗
	loading: false, // 是否显示加载
	ruleForm: {
		visitDetails: {},
		orgJudge: false, // 扭转部门满意度
		seatJudge: false, // 扭转坐席满意度
	},
	orderVisitModel: {}, // 回访详情
	orderVisitDetailCopyDtos: {}, // 修改前
	orderVisitDetailDtos: {}, // 修改后
});
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const getBaseData = async (id: string) => {
	state.loading = true;
	try {
		const { result } = await visitChangeRecord(id);
		state.orderVisitModel = result;
		state.orderVisitDetailCopyDtos = result.orderVisitDetailCopyDtos;
		state.orderVisitDetailDtos = result.orderVisitDetailDtos;
		state.loading = false;
	} catch (error) {
		console.log(error);
		state.loading = false;
	}
};
// 判断当前工单是否是电话来源
const isTelSource = computed(() => {
	return state.orderDetail?.sourceChannelCode === 'RGDH';
});
// 打开弹窗
const openDialog = (row: any) => {
	if (!row.id || !row) {
		ElMessage.warning('传入回访ID不正确');
		return;
	}
	state.dialogVisible = true;
	getBaseData(row.id);
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {};

defineExpose({
	openDialog,
	closeDialog,
});
</script>
