<script lang="ts" setup>
/**
 * @Name: CreateDialog.vue
 * @Description: 成本查看-创建弹窗
 * @Author: xinyan
 */
import * as api from '../api';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useResponse } from '/@/utils/useResponse';
import { Close, Finished } from '@element-plus/icons-vue';

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

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

interface RuleForm {
	description: any;
	station: any;
	platform: any;
	export_tax_rate: any;
	import_tax_rate: any;
	VAT_rate: any;
	first_cost: any;
	forwarding_fee: any;
	return_or_refurbishment_rates: any;
	advertising_budget_rate: any;
	storage_charges_rate: any;
	brokerage_rate: any;
	price_supply_rate: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	description: '',
	station: '',
	platform: '',
	export_tax_rate: '',
	import_tax_rate: '',
	VAT_rate: '',
	first_cost: '',
	forwarding_fee: '',
	return_or_refurbishment_rates: '',
	advertising_budget_rate: '',
	storage_charges_rate: '',
	brokerage_rate: '',
	price_supply_rate: '',
});

const validateRate = (rule, value, callback) => {
	const regex = /^\d{1,2}(\.\d{1,2})?$/; // 小数点前最多2位数字，小数点后最多2位数字
	if (!regex.test(value)) {
		callback(new Error('格式不正确，小数点前、后不超过2个数字'));
	} else {
		callback();
	}
};

const rules = reactive<FormRules<RuleForm>>({
	description: [{ required: true, message: '请输入成本模板名称', trigger: 'blur' }],
	station: [{ required: true, message: '请输入地区', trigger: 'blur' }],
	platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
	export_tax_rate: [{ required: true, message: '请输入出口报关费率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }
	],
	import_tax_rate: [{ required: true, message: '请输入进口关税率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	VAT_rate: [{ required: true, message: '请输入VAT', trigger: 'blur' }],
	first_cost: [{ required: true, message: '请输入头程运输费率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	forwarding_fee: [{ required: true, message: '请输入转发费', trigger: 'blur' }],
	return_or_refurbishment_rates: [{ required: true, message: '请输入退货与翻新费', trigger: 'blur' }],
	advertising_budget_rate: [{ required: true, message: '请输入广告预算费率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	storage_charges_rate: [{ required: true, message: '请输入仓储费', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	brokerage_rate: [{ required: true, message: '请输入佣金', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	price_supply_rate: [{ required: true, message: '请输入供货价折算率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			const body = {
				description: ruleForm.description,
				station: ruleForm.station,
				platform: ruleForm.platform,
				export_tax_rate: ruleForm.export_tax_rate,
				import_tax_rate: ruleForm.import_tax_rate,
				VAT_rate: ruleForm.VAT_rate,
				first_cost: ruleForm.first_cost,
				forwarding_fee: ruleForm.forwarding_fee,
				return_or_refurbishment_rates: ruleForm.return_or_refurbishment_rates,
				advertising_budget_rate: ruleForm.advertising_budget_rate,
				storage_charges_rate: ruleForm.storage_charges_rate,
				brokerage_rate: ruleForm.brokerage_rate,
			};
			const res = await useResponse(api.postCost, body, loading);
			if (res.code === 2000) {
				ElMessage.success({ message: '创建成功', plain: true, icon: 'CirclePlus' });
				createOpen.value = false;
				emit('refresh');
			} else {
				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="成本模板名称" prop="description">
						<el-input v-model="ruleForm.description" placeholder="请输入成本模板名称" />
					</el-form-item>
					<el-form-item class="font-medium" label="地 区" prop="station">
						<!--<el-select v-model="ruleForm.station" placeholder="请选择地区">-->
						<!--	<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item" />-->
						<!--</el-select>-->
						<el-input v-model="ruleForm.station" placeholder="请输入地区"/>

					</el-form-item>
					<el-form-item class="font-medium" label="进口关税率" prop="import_tax_rate">
						<el-input v-model="ruleForm.import_tax_rate" placeholder="请输入进口关税率"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="头程运输费率" prop="first_cost">
						<el-input v-model="ruleForm.first_cost" placeholder="请输入头程运输费率"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="退货与翻新费" prop="return_or_refurbishment_rates">
						<el-input v-model="ruleForm.return_or_refurbishment_rates" placeholder="请输入退货与翻新费"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="仓储费" prop="storage_charges_rate">
						<el-input v-model="ruleForm.storage_charges_rate" placeholder="请输入仓储费"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="供货价折算率" prop="price_supply_rate">
						<el-input v-model="ruleForm.price_supply_rate" placeholder="请输入供货价折算率"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item class="font-medium" label="平 台" prop="platform">
						<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
					</el-form-item>
					<el-form-item class="font-medium" label="出口报关费率" prop="export_tax_rate">
						<el-input v-model="ruleForm.export_tax_rate" placeholder="请输入出口报关费率"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="VAT" prop="VAT_rate">
						<el-input v-model="ruleForm.VAT_rate" placeholder="请输入VAT"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="转发费" prop="forwarding_fee">
						<el-input v-model="ruleForm.forwarding_fee" placeholder="请输入转发费"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="广告预算费率" prop="advertising_budget_rate">
						<el-input v-model="ruleForm.advertising_budget_rate" placeholder="请输入广告预算费率"></el-input>
					</el-form-item>
					<el-form-item class="font-medium" label="佣金" prop="brokerage_rate">
						<el-input v-model="ruleForm.brokerage_rate" placeholder="请输入佣金"></el-input>
					</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></style>
