<template>
  <Modal title="触发规则" visible :width="820" @ok="save" @cancel="cancel">
    <Timer ref="timerRef" v-model:value="addModel.timer" />
  </Modal>
</template>

<script setup lang="ts" name="timerAddModel">
  import Timer from '../components/Timer';
  import type { OperationTimer } from '../../typings';
  import { PropType, ref, reactive } from 'vue';
  import { handleTimerOptions } from '../components/Timer/util';
  import { Modal } from 'linker-ui-components';

  type Emit = {
    (e: 'cancel'): void;
    (e: 'save', data: OperationTimer, options: Record<string, any>): void;
  };

  const props = defineProps({
    value: {
      type: Object as PropType<OperationTimer>,
      default: () => ({})
    }
  });
  const emit = defineEmits<Emit>();

  const timerRef = ref();

  interface AddModelType {
    timer: OperationTimer;
  }

  const addModel = reactive<AddModelType>({
    timer: props.value
  });

  const save = async () => {
    const timerData = await timerRef.value?.validateFields();
    if (timerData) {
      const options = handleTimerOptions(addModel.timer);
      emit('save', addModel.timer, options);
    }
  };

  const cancel = () => {
    emit('cancel');
  };

  // watchEffect(() => {
  //   addModel.timer = props.value
  // })
</script>

<style scoped></style>
