<template>
    <el-popover
        v-model:visible="cronPopover"
        :teleported="row.teleported === undefined ? true : row.teleported"
        trigger="click"
        :placement="row.placement"
        width="auto"
        @show="showPopover"
    >
        <!--        cron表达式的选择框-->
        <info-cron
            ref="infoCronRef"
            class="infoVueCron"
            @change="changeCron"
            @close="close"
        />
        <!--        翻译表达式-->
        <template #reference>
            <el-input
                v-model="cronLabel"
                :placeholder="$t(row.placeholder?.() || 'pleaseInput')"
                :disabled="row.disabled?.(modelData)"
            />
        </template>
    </el-popover>
</template>

<script lang="ts">
import { defineComponent, ref, computed, PropType } from 'vue'
import cronstrue from 'cronstrue/i18n'
import useModel from '../../../script/help/useModel'
import { ObjectInterface, __getItem } from '../../../script/index'
import infoCron from '../../infoVueCron/index.vue'
import { VueCronInterface } from './index'
export default defineComponent({
    name: 'InfoVueCron',
    components: {
        infoCron
    },
    props: {
        row: {
            type: Object as PropType<VueCronInterface>,
            default: () => {}
        },
        modelData: {
            type: Object,
            default: () => {}
        },
        addIndex: {
            type: [Number, String],
            default: ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        let cronPopover = ref<boolean>(false)
        let model = useModel(modelData, row.model, row.deepData, props.addIndex)
        const infoCronRef = ref()
        if (!model.value) {
            model.value = '0 0/5 * * * ? *'
        }
        const cronLabel = computed(() => {
            const lang:any = __getItem('language', 'localStorage') || 'zh'
            const locale = lang === 'zh' ? 'zh_CN' : 'en'
            let val = cronstrue.toString(model.value as string, { locale: locale, dayOfWeekStartIndexZero: false, monthStartIndexZero: true, use24HourTimeFormat: true })
            return val
        })
        const changeCron = (cron: ObjectInterface, cronStr): void => {
            // cronLabel.value = cronStr.value
            model.value = cron.value
            cronPopover.value = false // 关闭
            row.methods?.(model.value)
        }
        const close = (): void => {
            cronPopover.value = false
        }
        const showPopover = () => {
            infoCronRef.value.parseCron(model.value)
        }
        return {
            cronPopover,
            model,
            cronLabel,
            changeCron,
            close,
            infoCronRef,
            showPopover
        }
    }
})
</script>
