<script lang="ts">
    import type { PropType } from 'vue'
    import { defineComponent } from 'vue'
    import CountButton from './CountButton.vue'
    import { useDesign } from '/@/hooks/web/useDesign'
    import { useRuleFormItem } from '/@/hooks/component/useFormItem'

    const props = {
        value: { type: String },
        size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
        count: { type: Number, default: 60 },
        sendCodeApi: {
            type: Function as PropType<() => Promise<boolean>>,
            default: null,
        },
    }

    export default defineComponent({
        name: 'CountDownInput',
        components: { CountButton },
        inheritAttrs: false,
        props,
        setup(props) {
            const { prefixCls } = useDesign('countdown-input')
            const [state] = useRuleFormItem(props)

            return { prefixCls, state }
        },
    })
</script>

<template>
    <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
        <template #addonAfter>
            <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
        </template>
        <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
            <slot :name="item" v-bind="data || {}"></slot>
        </template>
    </a-input>
</template>

<style lang="less">
    @prefix-cls: ~'@{namespace}-countdown-input';

    .@{prefix-cls} {
        .ant-input-group-addon {
            padding-right: 0;
            background-color: transparent;
            border: none;

            button {
                font-size: 14px;
            }
        }
    }
</style>
