<template>
  <BasicModal
    @register="registerModal"
    title="Cron表达式"
    width="800px"
    @cancel="onCancel"
    :footer="null"
  >
    <EasyCron v-bind="attrs" />
    <div style="float: right; margin-top: 2vh">
      <Button type="default" @click="onCancel" class="mr-2">取消</Button>
      <Button type="primary" @click="onOk" class="mr-2">确认</Button>
    </div>
  </BasicModal>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import EasyCron from './EasyCronInner.vue';
  import { Button } from '/@/components/Button';

  export default defineComponent({
    name: 'EasyCronModal',
    inheritAttrs: false,
    components: { BasicModal, EasyCron, Button },
    setup() {
      const attrs = useAttrs();
      const [registerModal, { closeModal }] = useModalInner();

      function onOk() {
        setTimeout(() => {
          closeModal();
        }, 500);
      }
      function onCancel() {
        setTimeout(() => {
          closeModal();
        }, 500);
      }

      return { attrs, registerModal, onOk, onCancel };
    },
  });
</script>
