<template>
    <div class="p-4 bg-white h-full">
        <div class="pb-4 text-xl">{{ t('短信发送') }}</div>
        <div class="step1-form">
            <a-form :key="formKey" :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off" @finish="onFinish" @finish-failed="onFinishFailed">
                <div class="flex items-center header-title">
                    <div class="node-icon"></div>
                    <div class="text-base">{{ t('基本信息') }}</div>
                </div>
                <a-form-item :label="t('收件人手机号')" name="mobile">
                    <a-input v-model:value="formState.mobile" :placeholder="t('请输入收件人手机号')" />
                </a-form-item>

                <a-form-item :label="t('短信内容')" name="message">
                    <a-input v-model:value="formState.message" :placeholder="t('请输入短信内容')" />
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 10, span: 24 }">
                    <!-- <a-button type="default" html-type="reset">{{ t('重置') }}</a-button> -->
                    <a-button type="primary" html-type="submit" class="ml-4">{{ t('提交') }}</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { onMounted, reactive, ref } from 'vue';

    import { useI18n } from '/@/hooks/web/useI18n';
    // import { getLogoInfoToken, setLogoConfig } from '/@/api/system/login';
    import { useMessage } from '/@/hooks/web/useMessage';

    import { sendSms } from '/@/api/sms';

    const { t } = useI18n();
    const { notification } = useMessage();

    interface FormState {
        mobile?: string;
        message?: string;
    }

    let formState = reactive<FormState>({});
    const formKey = ref(0);
    const id = ref();
    onMounted(() => {
        formState = {};
    });
    const onFinish = (values: any) => {
        // console.log('------>', values)
        // console.log('------>', formState)
        let params = values;
        params.id = id.value;
        sendSms(formState).then((res) => {
            if (res) {
                notification.success({
                    message: t('提示'),
                    description: t('修改成功')
                });
            } else {
                notification.success({
                    message: t('提示'),
                    description: t('修改失败')
                });
            }
        });
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
</script>
<style>
    .header-title {
        height: 40px;
        font-size: 16px;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 12px;
    }

    .node-icon {
        width: 6px;
        height: 18px;
        background-color: #5e95ff;
        margin-right: 8px;
    }
</style>
