<template>
    <PageWrapper contentFullHeight>
        <CollapseContainer title="">
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="拼团时间" class="flex-row">
                    <a-input v-model:value="formState.groundTime" type="number" maxlength="2" size="small" class="input-num-b" />小时
                </a-form-item>
                <a-form-item label="分销返佣金额 ">
                    <a-input v-model:value="formState.distributionCommission" type="number" maxlength="6" size="small" class="input-num-b" />元
                </a-form-item>
                <a-form-item label="拼团奖励配置">
                    <div style="margin-bottom: 10px">
                        参团办卡人数小于或等于<a-input v-model:value="formState.minPeopleNumber" size="small" class="input-num-s" />人，
                        奖励金额<a-input v-model:value="formState.minAmount" size="small" class="input-num-s" />元
                    </div>
                    <div>
                        参团办卡人数大于或等于<a-input v-model:value="formState.maxPeopleNumber" size="small" class="input-num-s" />人，
                        奖励金额<a-input v-model:value="formState.maxAmount" size="small" class="input-num-s" />元
                    </div>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button style="margin-right: 10px">取消</a-button>
                    <a-button type="primary" @click="onSubmit">保存</a-button>
                </a-form-item>
            </a-form>
        </CollapseContainer>
    </PageWrapper>
</template>
<script lang="ts" name="sys-basicConfig" setup>
import { onMounted, reactive, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';
import { saveOrUpdate, queryOne } from './basicConfig.api';
import { useMessage } from '/@/hooks/web/useMessage';

interface FormState {
    id?: string;
    groundTime: number;
    distributionCommission: number;
    maxPeopleNumber: number;
    minPeopleNumber: number;
    minAmount: number;
    maxAmount: number;    
}
const formState: UnwrapRef<FormState> = reactive({
    groundTime: 0,
    distributionCommission: 0,
    maxPeopleNumber: 0,
    minPeopleNumber: 0,
    minAmount: 0,
    maxAmount: 0
});
const { createMessage } = useMessage();
const onSubmit = () => {
    console.log('submit!', toRaw(formState));
    saveOrUpdate(formState, !!formState.id).then((res) => {
        if(typeof res === 'string'){
            createMessage.error(res);
            return;
        }
        if (res && res.code === 200) {
            // 提交成功
            createMessage.success('保存成功');
        }
        createMessage.error(res.message || '保存失败');
    });
};
const labelCol = { style: { width: '150px' } };
const wrapperCol = { span: 14 };

onMounted(() => {
    queryOne().then((res) => {
        if (res && res.id) {
            Object.assign(formState, res);
        }
    });
});
</script>
<style lang="less" scoped>
.input-num-b {
    width: 150px;
    height: 30px;
}
.input-num-s {
    width: 50px;
    height: 30px;
}
</style>