<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      label-width="120px"
      label-position="left"
    >
      <el-form-item
        label="事项主题:"
        :rules="[
          {
            required: true,
            message: '请输入事项主题',
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          v-model="form.theme"
          class="w-96"
          placeholder="请输入事项主题"
        />
      </el-form-item>
      <el-form-item label="待办日期:" required>
        <el-space wrap>
          <el-select
            v-model="form.frequencyType"
            placeholder="请选择检查周期/时间"
            :disabled="props.isEdit"
          >
            <el-option label="指定日期" :value="3" />
            <el-option label="每天" :value="0" />
            <el-option label="每周" :value="1" />
            <el-option label="每月" :value="2" />
          </el-select>
          <template v-if="form.frequencyType < 3">
            <el-date-picker
              value-format="YYYY-MM-DD"
              v-model="time"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </template>
          <template v-else>
            <TagsDatePicker v-model:list="dayList" placeholder="请选择日期" />
          </template>
        </el-space>
      </el-form-item>
      <el-radio-group v-model="type">
        <el-radio-button :label="1">事项内容</el-radio-button>
        <el-radio-button :label="2">事项提醒备注</el-radio-button>
      </el-radio-group>
      <el-form-item label="" />
      <template v-if="type === 1">
        <el-input
          type="textarea"
          v-model="form.content"
          :rows="24"
          show-word-limit
          placeholder="(必填)请输入事项内容"
        />
      </template>
      <template v-else>
        <Editor
          v-model:value="form.remark"
          placeholder="(选填)输入事项提醒备注，设置后用户可见"
      /></template>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive, defineExpose, defineProps } from "vue";
import Editor from "@/components/Editor.vue";
import TagsDatePicker from "@/components/TagsDatePicker.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  }
});
const form = reactive({
  theme: "",
  date: "",
  frequencyType: 3,
  content: "",
  remark: ""
});
const time = ref([]);
const type = ref(1);
const dayList = ref([]);

const onSubmit = callback => {
  if (!form.theme) {
    return ElMessage.error("请输入事项主题");
  }
  let startDate = undefined;
  let endDate = undefined;
  if (!form.date.length && form.frequencyType < 3) {
    return ElMessage.error("待办日期不能为空");
  }

  if (!dayList.value.length && form.frequencyType == 3) {
    return ElMessage.error("待办日期不能为空");
  }
  if (!form.content) {
    return ElMessage.error("请输入待办事项内容");
  }
  try {
    [startDate, endDate] = form.date;
  } catch (error) {
    console.log(error);
  }
  const params = {
    theme: form.theme,
    frequencyType: form.frequencyType,
    content: form.content,
    remark: form.remark == "<p><br></p>" ? "" : form.remark
  };
  if (form.frequencyType == 3) {
    params.dates = dayList.value.join("、");
  } else {
    params[startDate] = startDate;
    params[endDate] = endDate;
  }
  callback(params);
};
const onReset = () => {
  dayList.value = [];
  form.date = [];
  form.theme = "";
  form.frequencyType = 3;
  form.remark = "";
  form.content = "";
  // formRef.value.resetFields();
};

const onInitEditData = data => {
  onReset();
  form.theme = data.theme;
  dayList.value = data.dates?.split("、");
  form.remark = data.remark == "<p><br></p>" ? "" : data.remark;
  form.content = data.content;
  form.frequencyType = data.frequencyType;
  form.date = [data.startDate, data.endDate];
};
defineExpose({
  onSubmit,
  onReset,
  onInitEditData
});
</script>
<style lang="scss " scoped></style>
