<template>
	<div class="dataShare-config-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="160px" v-loading="state.loading" class="scroll-form">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
						<el-form-item label="在线服务代表数" prop="crntSeatNum" :rules="[{ required: true, message: '请填写在线服务代表数', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.crntSeatNum" :min="1" :precision="0" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
						<el-form-item label="通话服务代表数" prop="crntTelNum" :rules="[{ required: true, message: '请填写通话服务代表数', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.crntTelNum" :min="1" :precision="0" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
						<el-form-item label="坐席数量(个)" prop="seatNum" :rules="[{ required: true, message: '请填写席数量', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.seatNum" :min="1" :precision="0" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
						<el-form-item label="坐席话务员数(个)" prop="seatHwyNum" :rules="[{ required: true, message: '请填写坐席话务员数', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.seatHwyNum" :min="1" :precision="0" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
						<el-form-item
							label="未接通通话记录记录最多上传条数"
							prop="missedCallCount"
							:rules="[{ required: true, message: '请填写未接通通话记录记录最多上传条数', trigger: 'blur' }]"
						>
							<el-input-number v-model="state.ruleForm.missedCallCount" :min="1" :precision="0" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item>
							<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading"> 保 存 </el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script lang="tsx" setup name="dataShareConfig">
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { editDataShareConfig, getDataShareConfig } from '@/api/dataShare';

// 定义变量内容
const state = reactive<any>({
	loading: false, //加载状态
	ruleForm: {},
});
/** 获取用户列表 */
const getConfig = () => {
	state.loading = true;
	getDataShareConfig()
		.then((response: any) => {
			state.ruleForm = response.result;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 保存
const ruleFormRef = ref<FormInstance>();
const onSubmit = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		ElMessageBox.confirm(`是否要保存？`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			autofocus: false,
			draggable: true,
		})
			.then(() => {
				state.loading = true;
				editDataShareConfig(state.ruleForm)
					.then(() => {
						ElMessage.success('操作成功');
						state.loading = false;
					})
					.catch(() => {
						state.loading = false;
					});
			})
			.catch(() => {});
	});
}, 500);
onMounted(() => {
	getConfig();
});
</script>
<style lang="scss" scoped>
.dataShare-config-container {
	.scroll-form {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
</style>
