<script lang="ts" setup>
import { elIcons } from '@/common/element/element.ts'
import CronPanel from '@/pages/sys/task/cron/cron-panel/CronPanel.vue'
import { useCronStore } from '@/pages/sys/task/cron/cron-store.ts'
import ADialog from '@/components/a-dialog/ADialog.vue'

const props = defineProps<{
  modelValue?: string
}>()

const emits = defineEmits([ 'update:modelValue' ])
const {cronVal} = toRefs(useCronStore())
const showDialog = ref(false)

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== undefined && newVal !== cronVal.value) {
      cronVal.value = newVal
    }
  },
  {immediate: true},
)

watch(
  cronVal,
  (newCronVal) => {
    if (newCronVal !== props.modelValue) {
      emits('update:modelValue', newCronVal)
    }
  },
)

function openPanel() {
  showDialog.value = true
}
</script>

<template>
  <ElInput v-model="cronVal" v-bind="$attrs">
    <template #suffix>
      <ElButton :icon="elIcons.Timer" type="text" @click="openPanel"/>
    </template>
  </ElInput>
  <ADialog v-model:show="showDialog"
    title="配置面板"
    width="50vw">
    <CronPanel/>
  </ADialog>
</template>

<style lang="stylus" scoped>
.current-val {
  width 100%;
  font-weight: 700;
  text-align center
}
</style>
