<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType,ref,reactive, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { ElDialog } from 'element-plus'ss
import {vue3CronPlus} from '@/views/vue3-cron-plus/index'
const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})
let showCron = ref(false);
let NewCornData = "";//当前最新的corn语句的定义

const formSchema = reactive<FormSchema[]>([
  {
    field: 'cron',
    label: '定时器信息',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps:{
      value:"",
      on:{
        click:()=>{
          NewCornData = formSchema[0].value;
          showCron.value = true;
        }
      }
    }
  },

])

const rules = reactive({
  cron:[required()],
})

const { formRegister, formMethods } = useForm()
const { setValues,getFormData, getElFormExpose } = formMethods

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData();
    formData.cron = formSchema[0].value;
    return formData
  }
}

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)
//修改定时器的信息
const changeCron = (corn)=>{
  formSchema[0].value = corn.toString();
  formSchema[0].componentProps.value = corn.toString();
  if(formSchema[0].value != '[object Event]'){
    NewCornData = formSchema[0].value
  }
}
const closeDialog = ()=>{
  if(NewCornData != formSchema[0].value){
    formSchema[0].value = NewCornData;
    formSchema[0].componentProps.value = NewCornData;
  }
  showCron.value = false;
}
defineExpose({
  submit
})
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
  <ElDialog v-model="showCron">
    <vue3CronPlus
      i18n="cn"
      @change="changeCron"
      @close="closeDialog"
      max-height="300px"
    />
  </ElDialog>
</template>
<style scoped>
  .vue3-cron-plus-container>>>.language{
    top:40px !important;
  }
</style>