<template>
  <div class="demo-form">
    <a-form-model ref="addForm" :model="form" :rules="rules">
      <a-form-model-item :label="$t('SUBMITTER')">
        {{ user.name }}
      </a-form-model-item>
      <a-row>
        <a-col :span="6">
          <a-form-model-item :label="$t('START_TIME')" prop="startTime">
            <a-date-picker
              v-model="form.startTime"
              show-time
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="disabled"
              :placeholder="$t('PLACESELECT')"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :label="$t('END_TIME')" prop="endTime">
            <a-date-picker
              v-model="form.endTime"
              show-time
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="disabled"
              :placeholder="$t('PLACESELECT')"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item :label="$t('REASON_FOR_LEAVE')" prop="reason">
        <a-textarea
          v-model="form.reason"
          allow-clear
          :placeholder="$t('PLACEENTER')"
          :disabled="disabled"
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";

export default {
  props: {
    formBusinessId: {
      type: String,
      default: undefined,
    },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {
      form: {
        id: null,
        userId: null,
        startTime: undefined,
        endTime: undefined,
        reason: undefined,
      },
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.auth.user?.user || {},
    }),
    rules() {
      return {
        startTime: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        reason: [
          { required: true, message: this.$t("PLACEENTER"), trigger: "blur" },
        ],
      };
    },
  },
  created() {
    this.formBusinessId &&
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/demo/get-by-id/${this.formBusinessId}`
        )
        .then((res) => {
          Object.keys(this.form).forEach((key) => {
            this.form[key] = res.data?.data?.[key];
          });
        });
  },
  methods: {
    async confirm() {
      const valid = await this.$refs.addForm.validate();
      if (valid) {
        if (this.form.id) {
          return this.$axios.put(
            `${ApiConstant.PREFIX_CORE}/api/demo`,
            this.form
          );
        }
        return this.$axios.post(
          `${ApiConstant.PREFIX_CORE}/api/demo`,
          this.form
        );
      }
      return Promise.reject(valid);
    },
  },
};
</script>

<style lang="less" scoped>
.demo-form {
  /deep/ .ant-form .ant-form-item {
    .ant-calendar-picker {
      width: 80%;
    }
  }
}
</style>
