<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="新增智能回访任务" @close="close" append-to-body destroy-on-close>
		<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef" v-loading="state.loading">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="任务名称" prop="name" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.name" placeholder="请输入任务名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="时间段" prop="crTime" :rules="[{ required: true, message: '请选择时间段', trigger: 'change' }]">
						<el-date-picker
							v-model="state.ruleForm.crTime"
							type="datetimerange"
							unlink-panels
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							:shortcuts="shortcuts"
							value-format="YYYY-MM-DD[T]HH:mm:ss"
						/>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="节日禁呼" prop="festivalBan" :rules="[{ required: true, message: '请选择节日禁呼', trigger: 'change' }]">
						<el-radio-group v-model="state.ruleForm.festivalBan">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left" class="mb30">
			<el-text tag="b" size="large"> 回访任务名单 </el-text>
		</el-divider>
		<el-table :data="state.tableData" v-loading="state.loading" row-key="id" @selection-change="handleSelectionChange" ref="multipleTableRef">
			<el-table-column type="selection" label="" width="55" :reserve-selection="true" />
			<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
			<el-table-column label="标题" show-overflow-tooltip width="300">
				<template #default="{ row }">
          <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
				</template>
			</el-table-column>
			<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
			<el-table-column prop="visitStateText" label="回访状态" show-overflow-tooltip></el-table-column>
			<!--      <el-table-column label="短信发送时间" show-overflow-tooltip width="170">
        <template #default="{ row }">
          <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
        </template>
      </el-table-column>-->
			<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip width="150"></el-table-column>
			<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="100"></el-table-column>
			<el-table-column prop="order.actualHandleStepName" label="办理节点" show-overflow-tooltip width="150"></el-table-column>
			<el-table-column prop="order.employeeName" label="受理人" show-overflow-tooltip width="120">
				<template #default="{ row }">
					<span
						>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip width="150"></el-table-column>
			<el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip width="150"></el-table-column>
			<el-table-column label="受理时间" show-overflow-tooltip width="170">
				<template #default="{ row }">
					<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="办结时间" show-overflow-tooltip width="170">
				<template #default="{ row }">
					<span>{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="办结时间" show-overflow-tooltip width="170">
				<template #default="{ row }">
					<span>{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="发布时间" show-overflow-tooltip width="170">
				<template #default="{ row }">
					<span>{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="employeeName" label="回访人" show-overflow-tooltip width="170"></el-table-column>
			<template #empty>
				<Empty />
			</template>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading" :disabled="!multipleSelection.length">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime';
import { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref,defineAsyncComponent } from 'vue';
import { getSmartVisitRecord } from '@/api/smartVisit';
import { shortcuts } from '@/utils/constants';
import { smartVisitAdd } from '@/api/smartVisit';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const emit = defineEmits(['updateList']);
const state = reactive<any>({
	queryParams: {
		Keyword: null, // 关键字
	},
	tableData: [], //表格
	loading: false, // 加载
	dialogVisible: false, // 弹窗
	ruleForm: {
		name: '',
		crTime: [],
		festivalBan: 1,
	}, // 表单数据
});
// 打开弹窗
const openDialog = () => {
	queryList();
};
const close = () => {
	multipleSelection.value = [];
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
};
// 获取所有工单列表
const queryList = async () => {
	state.dialogVisible = true;
	try {
		state.loading = true;
		const res = await getSmartVisitRecord(state.queryParams);
		state.tableData = res.result;
		state.loading = false;
	} catch (e) {
		console.log(e);
		state.loading = false;
	}
};
// 重置所有工单列表
const queryParamsRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
const multipleSelection = ref<EmptyArrayType>([]); // 重复件表格选中项
const multipleTableRef = ref<RefType>(); // 重复件表格ref
const handleSelectionChange = (row: any) => {
	multipleSelection.value = row;
};

// 确定选择所有工单到重复工单
const ruleFormRef = ref<RefType>();
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		const request = {
			name: state.ruleForm.name,
			beginTime: state.ruleForm.crTime[0],
			endTime: state.ruleForm.crTime[1],
			festivalBan: state.ruleForm.festivalBan,
			aiOrderVisitDetails: multipleSelection.value.map((item: any) => {
				return {
					orderId: item.order?.id,
					orderVisitId: item.id,
					outerNo: item.order?.contact,
				};
			}),
		};
		smartVisitAdd(request)
			.then(() => {
				state.loading = false;
				state.dialogVisible = false;
				ElMessage.success('操作成功');
				emit('updateList');
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss"></style>
