<template>
    <el-date-picker
        v-model="value"
        :type="dateType"
        :disabled="row.disabled?.(modelData)"
        range-separator="-"
        :placeholder="$t(row.placeholder?.() || 'pleaseSelect')"
        :start-placeholder="$t(row.startPlaceholder || 'startTime')"
        :end-placeholder="$t(row.endPlaceholder || 'endTime')"
        :format="format"
        :default-time="dateType.endsWith('range') ? defaultTime : defaultTime[1]"
        :value-format="valueFormat"
        :popper-class="row.popperClass"
        :shortcuts="row.shortcuts"
        :disabled-date="row.disabledDate"
        :disabled-hours="row.disabledHours"
        :disabled-minutes="row.disabledMinutes"
        :disabled-seconds="row.disabledSeconds"
        :cell-class-name="row.cellClassName?.()"
        :teleported="row.teleported"
        @change="changeDate"
        @focus="handleFocus"
    />
</template>
<script lang="ts">
import { defineComponent, ref, computed, reactive, PropType } from 'vue'
import { globalFormValue } from '../../../script/index'
import { DatePickerInterface } from './index'
export default defineComponent({
    name: 'InfoDatePicker',
    props: {
        row: {
            type: Object as PropType<DatePickerInterface>,
            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
        const defaultTime = reactive<Date[]>([
            new Date(2000, 1, 1, 0, 0, 0),
            new Date(2000, 2, 1, 23, 59, 59, 999)
        ])
        // let value = ref<number | string | Date | Array<any> >('')
        const dateType = computed(() => {
            return  row.dateType?.()
        })
        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 changeDate = (val: string | Array<any> | Date | number): void => {
            row.methods?.(val)
        }
        const handleFocus = (): void => {
            row.focusMethod?.(value.value)
        }
        /**
         * row.model 传一个字段还是两个字段
         * 1 start,end - range - Array<any>
         * 2 date - string | number | Date | Array<any>
         */
        const value = computed({
            get() {
                if (row.model.includes(',')) { // 两个字段的区间
                    let valueList: string[] = []
                    for (let item of row.model.split(',')) {
                        let dt = globalFormValue(modelData, item.trim(), row.deepData)._get() as string
                        valueList.push(dt)
                    }
                    return valueList
                }
                return globalFormValue(modelData, row.model, row.deepData)._get()
            },
            set(newValue) {
                // modelData变化
                if (row.model.includes(',')) {
                    let modelList = row.model.split(',')
                    // [modelData[modelList[0]], modelData[modelList[1]]] = value.value as Array<any> || ['', '']
                    for (let [index, key] of modelList.entries()) {
                        globalFormValue(modelData, key.trim(), row.deepData)._set(newValue?.[index] || '')
                    }
                } else {
                    globalFormValue(modelData, row.model, row.deepData)._set(newValue || '')
                }
            }
        })
        return {
            value,
            changeDate,
            handleFocus,
            valueFormat,
            format,
            dateType,
            defaultTime
        }
    }
})
</script>
<style lang="scss">
</style>
