<template>
  <el-input clearable v-model="value" :style="{ width: props.width }" :placeholder="props.placeholder">
    <template #append>
      <el-button @click="show = true">{{ props.lable }}</el-button>
    </template>
  </el-input>

  <el-dialog title="定时表达式设置" v-model="show" width="40em" append-to-body draggable>
    <vue3CronVue v-model:value="value" @change="emits('change')" />
  </el-dialog>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import vue3CronVue from './vue3Cron.vue'



const value = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:modelValue', newValue)
  }
})

const emits = defineEmits(["update:modelValue", "change"])

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
  lable: {
    type: String,
    default: '设置'
  },
  width: {
    type: String,
    default: '18em'
  },
  placeholder: {
    type: String,
    default: '输入或设置定时表达式'
  }

})



const show = ref(false);



defineExpose({ open });
</script>

<style lang="scss" scoped></style>