<script lang="ts" setup>
/**
 * @Name: CreateDialog.vue
 * @Description: 评论详情-创建对话框
 * @Author: xinyan
 */

import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { DictionaryStore } from '/@/stores/dictionary';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';
import { Close, Finished } from '@element-plus/icons-vue';
import { useTivEnum } from '/@/views/product-manage/comment-detail/enum';

const { data: staticData } = DictionaryStore();

const loading = ref(false);
const createDialog = <Ref>useTemplateRef('createDialog');
const createOpen = defineModel({ default: false });

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

interface RuleForm {
	asin: any;
	country_code: any;
	content: any;
	create_datetime: any;
	helpful: any;
	review_date: any;
	reviewer_id: any;
	reviewer_name: any;
	rid: any;
	score: any;
	title: any;
	tiv: number;
	verified: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	asin: '',
	country_code: '',
	content: '',
	create_datetime: '',
	helpful: null,
	review_date: '',
	reviewer_id: '',
	reviewer_name: '',
	rid: '',
	score: '',
	title: '',
	tiv: null,
	verified: false,
});

const rules = reactive<FormRules<RuleForm>>({
	asin: [{ required: true, message: '请输入ASIN', trigger: 'blur' }],
	country_code: [{ required: true, message: '请选择国家', trigger: 'blur' }],
	content: [{ required: true, message: '请输入评论内容', trigger: 'blur' }],
	create_datetime: [{ required: true, message: '请选择创建时间', trigger: 'blur' }],
	helpful: [
		{ required: true, message: '请输入评论有用人数', trigger: 'blur' },
		{
			type: 'number',
			message: '必须为大于0的整数',
			transform(value) {
				return Number(value);
			},
			validator(rule, value, callback) {
				if (value < 0 || !Number.isInteger(value)) {
					callback(new Error('必须为大于0的整数'));
				} else {
					callback();
				}
			},
			trigger: 'blur',
		},
	],
	review_date: [{ required: true, message: '请选择评论日期', trigger: 'blur' }],
	reviewer_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
	reviewer_name: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
	rid: [{ required: true, message: '请输入评论ID', trigger: 'blur' }],
	score: [{ required: true, message: '请输入用户评分', trigger: 'blur' }],
	title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
	tiv: [{ required: true, message: '请输入评论类型', trigger: 'blur' }],
});

// TODO: 后端接口报错
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			const body = {
				asin: ruleForm.asin,
				country_code: ruleForm.country_code,
				content: ruleForm.content,
				create_datetime: ruleForm.create_datetime,
				helpful: ruleForm.helpful,
				review_date: dayjs(ruleForm.review_date).format('YYYY-MM-DD'),
				reviewer_id: ruleForm.reviewer_id,
				reviewer_name: ruleForm.reviewer_name,
				rid: ruleForm.rid,
				score: ruleForm.score,
				title: ruleForm.title,
				tiv: ruleForm.tiv,
				verified: ruleForm.verified,
			};
			const res = await useResponse(api.createComment, body, loading);
			if (res.code === 2000) {
        ElMessage.success({ message: '创建成功', plain: true, icon: 'CirclePlus' });
				createOpen.value = false;
				emit('refresh');
			}
		} else {
			// createOpen.value = false;
			ElMessage.error('创建失败，请检查表单');
		}
	});
};

function cancelDialog() {
	resetForm(ruleFormRef.value);
	createDialog.value.visible = false;
}

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

<template>
	<el-dialog
		ref="createDialog"
		v-model="createOpen"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:title="`评论详情 - 创建 `"
		style="width: 40%"
	>
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-position="top" label-width="auto" status-icon>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item class="font-medium" label="ASIN" prop="asin">
						<el-input v-model="ruleForm.asin" />
					</el-form-item>

					<el-form-item class="font-medium" label="国 家" prop="country_code">
						<el-select v-model="ruleForm.country_code" placeholder="请选择国家">
							<el-option v-for="item in staticData.country_code" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>

					<el-form-item class="font-medium" label="用户ID" prop="reviewer_id">
						<el-input v-model="ruleForm.reviewer_id" />
					</el-form-item>

					<el-form-item class="font-medium" label="评论日期" prop="review_date">
						<el-date-picker v-model="ruleForm.review_date" format="YYYY-MM-DD" style="width: 100%" type="date" />
					</el-form-item>

					<el-form-item class="font-medium" label="用户评分" prop="score">
						<el-input-number v-model="ruleForm.score" max="5" min="1" />
					</el-form-item>

					<el-form-item class="font-medium" label="评论有用人数" prop="helpful">
						<el-input v-model="ruleForm.helpful" />
					</el-form-item>

					<el-form-item class="font-medium" label="创建时间" prop="create_datetime">
						<el-date-picker v-model="ruleForm.create_datetime" style="width: 100%" type="datetime" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item class="font-medium" label="评论ID" prop="rid">
						<el-input v-model="ruleForm.rid" />
					</el-form-item>

					<el-form-item class="font-medium" label="标题" prop="title">
						<el-input v-model="ruleForm.title" />
					</el-form-item>

					<el-form-item class="font-medium" label="用户昵称" prop="reviewer_name">
						<el-input v-model="ruleForm.reviewer_name" />
					</el-form-item>

					<el-form-item class="font-medium" label="评价内容" prop="content">
						<el-input v-model="ruleForm.content" />
					</el-form-item>

					<el-form-item class="font-medium" label="评论类型" prop="tiv">
						<el-select v-model="ruleForm.tiv" placeholder="请选择评论类型">
							<el-option v-for="item in useTivEnum" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item class="font-medium" label="认证购买" prop="verified">
						<el-switch v-model="ruleForm.verified" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button :icon="Close" @click="cancelDialog">取 消</el-button>
			<el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
		</template>
	</el-dialog>
</template>

<style scoped>
:deep(.el-drawer .el-drawer__header) {
	border: none !important;
}
</style>
