<template>
	<el-dialog
		v-model="state.dialogVisible"
		draggable
		title="批量回访"
		append-to-body
		destroy-on-close
		@close="close"
		ref="dialogRef"
		@mouseup="mouseup"
		:style="'transform: ' + state.transform + ';'"
	>
		<div class="collapse-container" v-loading="state.loading">
			<el-form label-width="120px" ref="ruleFormRef" :model="state.ruleForm">
				<el-row :gutter="35">
					<el-col>
						<el-form-item label="回访人">
							{{ userInfos.name }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="话务员评价" prop="seatEvaluate" :rules="[{ required: true, message: '请选择话务员评价', trigger: 'change' }]">
							<el-radio-group v-model="state.ruleForm.seatEvaluate">
								<el-radio v-for="items in seatEvaluate" :key="items.key" :label="items.value" :value="items.key">{{ items.value }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item
							label="话务员回访内容"
							prop="seatVisitContent"
							:rules="[{ required: true, message: '请填写话务员回访内容', trigger: 'blur' }]"
						>
							<common-advice
								@chooseAdvice="chooseAdviceSeats"
								v-model="state.ruleForm.seatVisitContent"
								placeholder="请填写话务员回访内容"
								:loading="state.loading"
								:commonEnum="commonEnum.ReturnVisit"
								:minRows="5"
								:maxRows="10"
								drawerWidth="40%"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
						<el-form-item
							label="部门办件结果"
							prop="orgProcessingResults"
							:rules="[{ required: true, message: '请选择部门办件结果', trigger: 'change' }]"
						>
							<el-select
								v-model="state.ruleForm.orgProcessingResults"
								placeholder="请选择部门办件结果"
								value-key="dicDataValue"
								clearable
								@change="
									(val) => {
										state.ruleForm.orgProcessingResults.value = val?.dicDataName;
										state.ruleForm.orgProcessingResults.key = val?.dicDataValue;
									}
								"
							>
								<el-option v-for="items in visitSatisfaction" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- 不满意才会选择不满意原因 -->
					<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['1', '2'].includes(state.ruleForm.orgProcessingResults?.key)">
						<el-form-item
							label="不满意原因"
							prop="orgNoSatisfiedReason"
							:rules="[{ required: true, message: '请选择不满意原因', trigger: 'change' }]"
						>
							<el-select
								v-model="state.ruleForm.orgNoSatisfiedReason"
								placeholder="请选择不满意原因"
								value-key="dicDataValue"
								multiple
								collapse-tags
								clearable
								collapse-tags-tooltip
								@change="selectReason"
							>
								<el-option v-for="items in dissatisfiedReason" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
							</el-select>
						</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="部门办件态度"
							prop="orgHandledAttitude"
							:rules="[{ required: true, message: '请选择部门办件态度', trigger: 'change' }]"
						>
							<el-select
								v-model="state.ruleForm.orgHandledAttitude"
								placeholder="请选择部门办件态度"
								value-key="dicDataValue"
								clearable
								@change="
									(val) => {
										state.ruleForm.orgHandledAttitude.value = val.dicDataName;
										state.ruleForm.orgHandledAttitude.key = val.dicDataValue;
									}
								"
							>
								<el-option v-for="items in visitManner" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="部门回访内容" prop="orgVisitContent" :rules="[{ required: true, message: '请填写部门回访内容', trigger: 'blur' }]">
							<common-advice
								@chooseAdvice="chooseAdviceContent"
								v-model="state.ruleForm.orgVisitContent"
								d
								placeholder="请填写部门回访内容"
								:loading="state.loading"
								:commonEnum="commonEnum.ReturnVisit"
								:minRows="5"
								:maxRows="10"
								drawerWidth="40%"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onAudit(ruleFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { ElNotification, FormInstance } from 'element-plus';
import { visitAddBaseData, visitAddBatch } from '@/api/business/visit';
import { useUserInfo } from '@/stores/userInfo';
import { storeToRefs } from 'pinia';
import { commonEnum } from '@/utils/constants';
import { useThemeConfig } from '@/stores/themeConfig';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 是否显示弹窗
	loading: false, // 是否显示加载
	ruleForm: {
		seatEvaluate: null,
		orgProcessingResults: null,
		orgHandledAttitude: null,
		orgNoSatisfiedReason: null,
		seatVisitContent: null,
		orgVisitContent: null,
		visit: [],
	},
	transform: 'translate(0px, 0px)', // 附件弹窗位置
});
const ruleFormRef = ref<RefType>();
const ids = ref<any>([]);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const seatEvaluate = ref<EmptyArrayType>(); // 话务员评价
const dissatisfiedReason = ref<EmptyArrayType>(); // 不满意原因
const visitManner = ref<EmptyArrayType>(); // 部门办件态度
const visitSatisfaction = ref<EmptyArrayType>(); // 部门办件结果
// 获取基础信息
const getBaseData = async () => {
	state.loading = true;
	try {
		const { result } = await visitAddBaseData();
		seatEvaluate.value = result?.seatEvaluate ?? [];
		dissatisfiedReason.value = result?.dissatisfiedReason ?? [];
		visitManner.value = result?.visitManner ?? [];
		visitSatisfaction.value = result?.visitSatisfaction ?? [];
		state.loading = false;
	} catch (error) {
		console.log(error);
		state.loading = false;
	}
};
// 打开弹窗
const openDialog = async (val: any) => {
	state.dialogVisible = true;
	state.ruleForm.visit = val;
	await getBaseData();
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	state.loading = false;
};
// 设置抽屉
const dialogRef = ref<RefType>(); // 弹窗ref
const mouseup = () => {
	state.transform = dialogRef.value.dialogContentRef.$el.style.transform;
};
// 选择不满意原本
const selectReason = (val: any) => {
	state.ruleForm.orgNoSatisfiedReason = val.map((item: any) => {
		return {
			...item,
			value: item.dicDataName,
			key: item.dicDataValue,
		};
	});
};
// 保存
const onAudit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		visitAddBatch(state.ruleForm)
			.then((res: any) => {
				state.loading = false;
				closeDialog();
				emit('updateList');
				ElNotification({
					type: 'info',
					title: '批量回访完成',
					message: `成功回访${res.result?.completeCount}条，失败${res.result?.errorCount}条`,
				});
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
// 选中常用意见
const chooseAdviceSeats = (item: any) => {
	state.ruleForm.seatVisitContent += item.content;
};
const chooseAdviceContent = (item: any) => {
	state.ruleForm.orgVisitContent += item.content;
};
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.el-radio {
	margin-right: 15px;
}
</style>
