<template>
  <el-dialog
    v-model="visible"
    :title="type === 'add' ? '新增' : '修改'"
    :on-close="fnClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="NAME">
            <el-input v-model="form.NAME" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="自定义周期" prop="ISCUSTOM">
            <el-radio-group v-model="form.ISCUSTOM" @change="fnIsCustomChange">
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <template v-if="form.ISCUSTOM === '1'">
          <el-col
            :span="24"
            v-for="(item, index) in form.periodList"
            :key="item.id"
          >
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="上班天数"
                  :prop="'periodList.' + index + '.ONDAY'"
                  :rules="{
                    required: true,
                    message: '上班天数不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input-number v-model="item.ONDAY" :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  label="休班天数"
                  :prop="'periodList.' + index + '.OFFDAY'"
                  :rules="{
                    required: true,
                    message: '休班天数不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input-number v-model="item.OFFDAY" :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="10px">
                  <el-button
                    v-if="index === 0"
                    type="primary"
                    @click="fnAddSchedulingList"
                  >
                    添加
                  </el-button>
                  <el-button
                    v-else
                    type="danger"
                    @click="form.periodList.splice(index, 1)"
                  >
                    删除
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModels } from "@vueuse/core";
import { ref } from "vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import {
  setWorkforceManagementAdd,
  setWorkforceManagementEdit,
} from "@/request/workforce_management.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  type: {
    type: String,
    required: true,
    default: "",
  },
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  parentId: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "update:form", "get-data"]);
const { visible, form } = useVModels(props, emits);
const rules = {
  NAME: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  ISCUSTOM: [
    { required: true, message: "自定义周期不能为空", trigger: "change" },
  ],
};
const formRef = ref(null);
const fnIsCustomChange = (event) => {
  if (event === "0") form.value.periodList = [];
  else fnAddSchedulingList();
};
const fnAddSchedulingList = () => {
  form.value.periodList.push({
    ONDAY: "",
    OFFDAY: "",
    id: Math.random(),
  });
};
const fnClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const params = {
      ...form.value,
      LEVEL: "2",
      PARENTID: props.parentId,
      periodList: JSON.stringify(form.value.periodList),
    };
    if (props.type === "add") await setWorkforceManagementAdd(params);
    else await setWorkforceManagementEdit(params);
    fnClose();
    ElMessage.success("操作成功");
    emits("get-data");
  },
  { atBegin: true }
);
</script>

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