<template>
    <el-input
        v-show="typeof row.show === 'function'? row.show?.(modelData): true"
        ref="infoInput"
        v-model="model"
        class="info-input"
        :name="row.model"
        auto-complete="off"
        :size="row.size"
        :placeholder="$t(row.placeholder?.() || 'pleaseInput', row.i18nParams || {})"
        :clearable="!!row.clearable"
        :autofocus="!!row.autofocus"
        :maxlength="row.maxlength"
        :type="row.inputType"
        :autosize="{ minRows: row.minRow, maxRows: 6}"
        :disabled="row.disabled?.(modelData)"
        :prefix-icon="row.prefixIcon"
        :show-password="row.showPassword"
        :show-word-limit="row.showLimit"
        @input="handleInput"
        @blur="blur($event)"
        @keyup.enter="keyupEnterNative"
    >
        <template v-if="row.prepend" #prepend>
            <el-select
                v-model="prependModel"
                :placeholder="$t(row.prepend?.placeholder?.() || 'pleaseSelect')"
                :clearable="row.prepend.clearable !== false"
                :disabled="row.prepend?.disabled?.(modelData)"
                :style="row.prepend.style"
                @change="prependChange">
                    <el-option
                        v-for="item in row.prepend.options()"
                        :key="item.label"
                        :label="$t(item.label)"
                        :value="item.value"
                    />
            </el-select>
        </template>
        <template
            v-if="row.button && row.button.show"
            #append
        >
            <el-button
                :disabled="row.button?.disabled?.(modelData)"
                @click="handleButton"
            >
                <el-tooltip
                    v-if="row.button.name"
                    :content="$t(row.button.tip || '')"
                    :disabled="!row.button.tip"
                    placement="top"
                >
                    {{ $t(row.button.name) }}
                </el-tooltip>
                <div v-else><el-icon size="14px"><Search /></el-icon></div>
            </el-button>
        </template>
        <template
            v-else-if="row.select"
            #append
        >
            <el-select
                v-model="selectModel"
                :placeholder="$t(row.select?.placeholder?.() || 'pleaseSelect')"
                :clearable="row.select && (row.select.clearable !== false)"
                :disabled="row.select?.disabled?.(modelData)"
                @change="selectChange"
            >
                <el-option
                    v-for="item in (row.select && row.select.options())"
                    :key="item.label"
                    :label="$t(item.label)"
                    :value="item.value"
                />
            </el-select>
        </template>
    </el-input>
</template>
<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useModel from '../../../script/help/useModel'
import { InputInterface } from './index'
// import { debounce } from 'lodash-es'

export default defineComponent({
    name: 'InfoInput',
    components: {
        Search
    },
    props: {
        row: {
            type: Object as PropType<InputInterface>,
            default: () => {}
        },
        modelData: {
            type: Object,
            default: () => {}
        },
        totalIndex: Number,
        addIndex: { // addform Index
            type: [Number, String],
            default: () => ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex, row)
        const prependModel = useModel(modelData, row.prepend?.model || '', row.deepData)
        const selectModel = useModel(modelData, row.select?.model || '', row.deepData)
        const handleButton = (): void => {
            row?.button && row.button.methods?.(model, modelData, props.addIndex, props.totalIndex)
        }
        const debounce = (() => {
            let timer: ReturnType<typeof setTimeout> | null = null
            return (callback, wait = 500) => {
                timer&&clearTimeout(timer)
                timer = setTimeout(callback, wait)
            }
        })()
        const handleInput = (val): void => {
            debounce(() => { // 防抖
                row.inputMethod?.(val, modelData)
            }, 500)
        }
        const blur = ($event): void => {
            row.blurMethod?.(model, modelData, $event)
        }
        const keyupEnterNative = (): void => {
            if (typeof row?.button?.methods === 'function') {
                row.button.methods(model)
            }
            if (row.keyEvent) { // 如果绑定了键盘事件
                row.methods?.()
            }
        }
        const selectChange = (): void => {
            row.select!.methods?.(selectModel.value)
        }
        const prependChange = (): void => {
            row.prepend!.methods?.(prependModel.value)
        }
        return {
            model,
            prependModel,
            selectModel,
            handleButton,
            handleInput,
            prependChange,
            blur,
            keyupEnterNative,
            selectChange
        }
    }
})
</script>
<style lang="scss">
.info-input {
    .el-input-group__append {
        .el-button {
            padding-bottom: 8px;
        }
        .el-tooltip {
            left: 0;
            top: 0;
            padding: 12px 22px;
        }
    }
}
</style>
