<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <el-form class="form-main" :model="state.form" ref="form" :rules="state.rules" label-width="170px">
            <el-form-item label="最长请假时长：" prop="leaveDay">
              <el-input v-model="state.form.leaveDay">
                <template #append>天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="请假提前天数：" prop="beforeDay">
              <el-input v-model="state.form.beforeDay">
                <template #append>天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="开标前有效请假时间：" prop="proBeforeHour">
              <el-input v-model="state.form.proBeforeHour">
                <template #append>小时</template>
              </el-input>
            </el-form-item>
          </el-form>
          <div style="flex:1;text-align:right;">
            <el-button type="primary" @click="confirmSet">确认</el-button>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { getRule, setRule } from '@/api/leave/rule';
import { StateData } from '@/api/leave/rule/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const state = ref<StateData>({
  form: {
    gid: '',
    leaveDay: '30',
    beforeDay: '1',
    proBeforeHour: '3'
  },
  rules: {
    leaveDay: [{ required: true, message: '最长请假时长不能为空', trigger: 'blur' }],
    beforeDay: [{ required: true, message: '请假提前天数不能为空', trigger: 'blur' }],
    proBeforeHour: [{ required: true, message: '开标前有效请假时间不能为空', trigger: 'blur' }]
  }
});

const form = ref<ElFormInstance>(null);

const confirmSet = () => {
  form.value.validate(async (valid) => {
    if (!valid) return;
    let res = await setRule(state.value.form);
    if (res.code === 200) {
      ElNotification({
        title: '提示',
        message: '设置成功',
        type: 'success'
      });
      return;
    }
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
  });
};

const getInfo = async () => {
  let res = await getRule();
  if (res.code !== 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  state.value.form = {
    gid: res.data.gid,
    leaveDay: res.data.leaveDay,
    beforeDay: res.data.beforeDay,
    proBeforeHour: res.data.proBeforeHour
  };
};
onMounted(() => {
  getInfo();
});
</script>
<style lang="scss" scoped>
.form-main {
  width: 50%;
}
</style>
