<script lang="ts" setup>
/**
 * @Name: EditLabelDialog.vue
 * @Description: 负面标签-编辑
 * @Author: xinyan
 */
import { Close, Finished } from '@element-plus/icons-vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';

const props = defineProps({
	editData: <any>Object,
	rowData: <any>Object,
});
const { editData, rowData } = props;

const loading = ref(false);

const editOpen = defineModel({ default: false });
const editDrawer = <Ref>useTemplateRef('editDrawer');

const emit = defineEmits(['refresh']);

interface RuleForm {
	raw_label: any;
	kind: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	raw_label: editData?.raw_label,
	kind: editData?.kind,
});

const rules = reactive<FormRules<RuleForm>>({
	raw_label: [{ required: true, message: '请输入原始标签', trigger: 'blur' }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			const query = {
				review: rowData.id,
				raw_label: ruleForm.raw_label,
				kind: ruleForm.kind,
			};
			const res = await useResponse(api.updateNegativeTags, { id: editData?.id, ...query }, loading);
			if (res.code === 2000) {
				ElMessage.success('更新成功');
				editOpen.value = false;
				emit('refresh');
			}
		} else {
			// editOpen.value = false;
			ElMessage.error('更新失败，请检查表单');
		}
	});
};

function closeDrawer() {
	editDrawer.value.handleClose();
}

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>

<template>
	<div class="drawer-container">
		<el-drawer
			ref="editDrawer"
			v-model="editOpen"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="`负面标签 - 编辑 `"
			style="width: 25%"
		>
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon label-position="top">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item class="font-medium" label="原始标签" prop="raw_label">
							<el-input v-model="ruleForm.raw_label" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="150" show-word-limit type="textarea" />
						</el-form-item>
						<el-form-item class="font-medium" label="类别" prop="kind">
							<el-input v-model="ruleForm.kind" maxlength="150" show-word-limit type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-divider />
					<div class="flex flex-1 justify-end">
						<el-button :icon="Close" @click="closeDrawer">取 消</el-button>
						<el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)">
							确 定
						</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<style scoped></style>
