<template>
  <!-- 新增编辑 -->
  <common-modal
    :width="700"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    wrapClassName="project-modal"
    :title="isUpdate ? '编辑日程' : '新建日程'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
      <a-form-item label="日志标题:" name="title">
        <a-input v-model:value="form.title" allow-clear placeholder="请输入日志标题" />
      </a-form-item>
      <a-form-item label="指定日期:" name="calendarDate">
        <a-date-picker
          v-model:value="form.calendarDate"
          style="width: 100%"
          allowClear
          valueFormat="YYYY-MM-DD"
          placeholder="请选择指定日期"
        />
      </a-form-item>
      <a-form-item label="开始时间:" name="startTime">
        <a-date-picker
          v-model:value="form.startTime"
          style="width: 100%"
          allowClear
          :show-time="{ format: 'HH:mm' }"
          valueFormat="YYYY-MM-DD hh:mm"
          placeholder="请选择开始时间"
        />
      </a-form-item>
      <a-form-item label="结束时间:" name="endTime">
        <a-date-picker
          v-model:value="form.endTime"
          style="width: 100%"
          allowClear
          :show-time="{ format: 'HH:mm' }"
          valueFormat="YYYY-MM-DD hh:mm"
          placeholder="请选择结束时间"
        />
      </a-form-item>
      <a-form-item label="紧急程度:" name="urgencyType">
        <a-select v-model:value="form.urgencyType" allowClear placeholder="请选择紧急程度" style="width: 100%">
          <a-select-option :value="10">普通</a-select-option>
          <a-select-option :value="20">紧急</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea v-model:value="form.description" placeholder="请输入备注" :rows="4" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="updateVisible(false)" class="border-radius grey" type="link" :loading="loading">取消</a-button>
        <a-button type="primary" @click="save" class="border-radius" :loading="loading">确定</a-button>
      </a-space>
    </template>
  </common-modal>
</template>

<script setup name="CalendarAddEdit">
import { ref, onMounted, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import { PortalCalendarApi } from '../../api/PortalCalendarApi';

const props = defineProps({
  visible: Boolean,
  data: Object,
  calendarDate: String
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);
// 是否是编辑状态
const isUpdate = ref(false);
// 表单数据
const form = ref({
  urgencyType: 10,
  calendarDate: props.calendarDate
});

const rules = reactive({
  title: [{ required: true, message: '请输入日志标题', type: 'string', trigger: 'blur' }],
  calendarDate: [{ required: true, message: '请选择指定日期', type: 'string', trigger: 'blur' }],
  urgencyType: [{ required: true, message: '请选择紧急程度', type: 'number', trigger: 'blur' }]
});
// ref
const formRef = ref(null);

onMounted(async () => {
  if (props.data) {
    isUpdate.value = true;
    form.value = Object.assign({}, props.data);
  } else {
    isUpdate.value = false;
  }
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  await formRef.value.validate();
  // 修改加载框为正在加载
  loading.value = true;

  let result = null;

  // 执行编辑或修改
  if (isUpdate.value) {
    result = PortalCalendarApi.edit(form.value);
  } else {
    result = PortalCalendarApi.add(form.value);
  }
  result
    .then(async result => {
      loading.value = false;
      message.success(result.message);
      updateVisible(false);
      emits('done');
    })
    .catch(() => {
      loading.value = false;
    });
};
</script>

<style></style>
