<template>
    <el-time-picker
        v-model="value"
        :disabled="row.disabled?.(modelData)"
        range-separator="-"
        is-range
        :placeholder="$t(row.placeholder?.() || 'pleaseSelect')"
        :start-placeholder="$t(row.startPlaceholder || 'startTime')"
        :end-placeholder="$t(row.endPlaceholder || 'endTime')"
        :value-format="valueFormat"
        :format="format"
        :popper-class="row.popperClass"
        @change="changeTime"
        @focus="handleFocus"
    />
</template>
<script lang="ts">
import { defineComponent, ref, computed, PropType } from 'vue'
import { globalFormValue } from '../../../script'
import { TimePickerInterface } from './index'

export default defineComponent({
    name: 'InfoTimePicker',
    props: {
        row: {
            type: Object as PropType<TimePickerInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {
            }
        },
        addIndex: {
            type: [Number, String],
            default: () => ''
        }
    },
    setup (props) {
        const { row } = props
        const modelData: any = typeof props.addIndex === 'number' ? props.modelData[props.addIndex] : props.modelData
        let value = ref<string | Array<any> | Date | number>()
        const format = computed(() => {
            return row.format?.()
        })
        const valueFormat = computed(() => {
            return row.valueFormat?.()
        })
        const buildValue = (): void | boolean => { // 这里其实是回显绑定
            let valueList: string[] = []
            if (row.model.includes(',')) { // 这里就是区间 并且有两个变量接收
                for (let item of row.model.split(',')) {
                    let dt = globalFormValue(modelData, item.trim(), row.deepData)._get() as string
                    valueList.push(dt)
                }
                value.value = valueList
                return
            }
            value.value = globalFormValue(modelData, row.model, row.deepData)._get() as string
        }
        const changeTime = (val: string | Array<any> | Date | number): void => {
            if (row.model.includes(',')) {
                let modelList = row.model.split(',')
                for (let [index, key] of modelList.entries()) {
                    globalFormValue(modelData, key.trim(), row.deepData)._set(val?.[index] || '')
                }
            } else {
                globalFormValue(modelData, row.model, row.deepData)._set(val || '')
            }
            row.methods?.(val)
        }
        const handleFocus = (): void => {
            row.focusMethod?.(value.value, buildValue())
        }
        setTimeout(() => {
            row.initMethods && row.methods?.(value.value, buildValue())
        }, 0)
        return {
            value,
            changeTime,
            handleFocus,
            valueFormat,
            format
        }
    }
})
</script>
<style lang="scss">
</style>
