<template>
    <div class="pt-2">
        <cron-light
            v-model="model"
            format="quartz"
            :disabled="row.disabled?.()"
            initial-period="year"
            locale="en"
            @error="error = $event"
        />
        <div>
            <br/>
            {{ $t('cron') }}: <input
            :value="model"
            :disabled="row.disabled?.()"
            @change="updateValue"
        />
        </div>
        <span
            v-if="error"
            style="color: red"
        >
            {{ $t('error') }}: {{ error }}
        </span></div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import useModel from '../../../script/help/useModel'
import { InfoCronInterface } from './index'
import CronLight from './vue-js-cron/light/src/components/cron-light.vue'

export default defineComponent({
    name: 'InfoVueCron',
    components: {
        // eslint-disable-next-line vue/no-unused-components
        CronLight
    },
    props: {
        row: {
            type: Object as PropType<InfoCronInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {
            }
        },
        addIndex: {
            type: [Number, String],
            default: ''
        }
    },
    setup (props, { emit }) {
        // eslint-disable-next-line vue/no-setup-props-destructure
        const { row, modelData } = props
        let model = useModel(modelData, row.model, row.deepData, props.addIndex)
        if (!model.value) {
            model.value = '0 0 12 * * ?'
        }
        let error = ref('')
        const updateValue = (evt: any) => {
            model.value = evt.target.value
        }
        return { error, model, updateValue }
    }
})
</script>
