<template>
  <div>
    <el-dialog
      v-if="visible"
      :model-value="visible"
      :title="type === 'add' ? '新增' : '修改'"
      :before-close="fnClose"
    >
      <el-form
        ref="formRef"
        :model="data.form"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item label="日期" prop="DATE">
          <el-date-picker
            v-model="data.form.DATE"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            type="date"
            clearable
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="提取金额" prop="AMOUNT">
          <el-input
            v-model="data.form.AMOUNT"
            maxlength="11"
            placeholder="这里输入提取金额"
          />
        </el-form-item>
        <el-form-item label="培训教材教具费" prop="MATERIAL_COST">
          <el-input
            v-model="data.form.MATERIAL_COST"
            maxlength="11"
            placeholder="这里输入培训教材教具费"
          />
        </el-form-item>
        <el-form-item label="师资费" prop="TEACHER_COST">
          <el-input
            v-model="data.form.TEACHER_COST"
            maxlength="11"
            placeholder="这里输入师资费"
          />
        </el-form-item>
        <el-form-item label="试卷印制费" prop="PAPER_COST">
          <el-input
            v-model="data.form.PAPER_COST"
            maxlength="11"
            placeholder="这里输入试卷印制费"
          />
        </el-form-item>
        <el-form-item label="外出培训费" prop="OUTSIDE_COST">
          <el-input
            v-model="data.form.OUTSIDE_COST"
            maxlength="11"
            placeholder="这里输入外出培训费"
          />
        </el-form-item>
        <el-form-item
          label="教学设备、课桌椅等购置维护费"
          prop="EQUIPMENT_COST"
        >
          <el-input
            v-model="data.form.EQUIPMENT_COST"
            maxlength="11"
            placeholder="这里输入教学设备、课桌椅等购置维护费"
          />
        </el-form-item>
        <el-form-item label="培训活动费" prop="TRAIN_COST">
          <el-input
            v-model="data.form.TRAIN_COST"
            maxlength="11"
            placeholder="这里输入培训活动费"
          />
        </el-form-item>
        <el-form-item label="委托培训费" prop="ENTRUST_COST">
          <el-input
            v-model="data.form.ENTRUST_COST"
            maxlength="11"
            placeholder="这里输入委托培训费"
          />
        </el-form-item>
        <el-form-item label="其他与培训有关的直接支出" prop="OTHER_COST">
          <el-input
            v-model="data.form.OTHER_COST"
            maxlength="11"
            placeholder="这里输入其他与培训有关的直接支出"
          />
        </el-form-item>
        <el-form-item label="余额" prop="BALANCE">
          <el-input
            v-model="data.form.BALANCE"
            maxlength="11"
            placeholder="这里输入余额"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="fnClose">取消</el-button>
        <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { useVModels } from "@vueuse/core";
import {
  getArchivesCapital,
  addArchivesCapital,
  editArchivesCapital,
} from "@/request/archives.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  year: {
    type: String,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  ARCHIVESCAPITAL_ID: {
    type: String,
    required: false,
    default: "",
  },
});
const { visible, year, type, ARCHIVESCAPITAL_ID } = useVModels(props);

const emits = defineEmits(["update:visible", "getData"]);

const data = reactive({
  form: {
    ARCHIVESCAPITAL_ID: undefined,
    AMOUNT: undefined,
    BALANCE: undefined,
    DATE: undefined,
    ENTRUST_COST: undefined,
    EQUIPMENT_COST: undefined,
    MATERIAL_COST: undefined,
    OTHER_COST: undefined,
    OUTSIDE_COST: undefined,
    PAPER_COST: undefined,
    TEACHER_COST: undefined,
    TRAIN_COST: undefined,
    YEAR: year.value,
  },
});

const rules = {
  AMOUNT: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  BALANCE: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  ENTRUST_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  EQUIPMENT_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  MATERIAL_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  OTHER_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  OUTSIDE_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  PAPER_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  TEACHER_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
  TRAIN_COST: [
    {
      type: "number",
      message: "请输入有效数字",
      trigger: "blur",
      transform: (value) => Number(value),
    },
  ],
};

const formRef = ref(null);

const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const params = Object.assign({}, data.form);
    let respData;
    if (type.value === "add") {
      respData = await addArchivesCapital(params);
    } else if (type.value === "edit") {
      respData = await editArchivesCapital(params);
    }
    if (respData && respData.result === "success") {
      emits("getData");
      fnClose();
    }
  },
  { atBegin: true }
);

const fnClose = () => {
  emits("update:visible", false);
};

const fnGetArchivesCapital = async () => {
  if (
    ARCHIVESCAPITAL_ID &&
    ARCHIVESCAPITAL_ID.value &&
    ARCHIVESCAPITAL_ID.value.length > 0
  ) {
    const respData = await getArchivesCapital({
      ARCHIVESCAPITAL_ID: ARCHIVESCAPITAL_ID.value,
    });
    if (respData && respData.pd) {
      data.form = respData.pd;
    }
  }
};
await fnGetArchivesCapital();
</script>

<style scoped lang="scss"></style>
