<template>
    <div class="ht-base-form-custom-demo" inline>
        <ht-base-form ref="formValidate" :model="formValidate" :label-width="100">
            <ht-base-form-item label="价格" prop="customForm" :rules="ruleCustom.customForm">
                <price-input :value="formValidate.customForm"></price-input>
                <ht-base-button type="primary" @click="handleSubmit('formValidate')" style="margin-left: 10px">确定</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
    const PriceInput = {
        props: ['value'],
        template:`
            <span>
                <ht-base-input v-model="value.number" style="width: 50%;" />
                <ht-base-select v-model="value.currency" style="width: 25%;margin-left: -5px">
                    <ht-base-option value="rmb">人民币</ht-base-option>
                    <ht-base-option value="dollar">美元</ht-base-option>
                </ht-base-select>
            </span>
        `,
    }
    export default {
        name: 'HtBaseFormCustomDemo',
        components: {
            PriceInput,
        },
        data(){
            const validateCustomForm = (rule, value, callback) => {
                if(value.number<=0||value.currency===''){
                    callback(new Error('不能为空'));
                }else{
                    callback();
                }
            };
            return {
                formValidate:{
                    customForm:{
                        number:0,
                        currency:'rmb'
                    }
                },
                ruleCustom: {
                    customForm: [
                        { required: true },
                        { validator: validateCustomForm, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$HtBaseMessage.success('Success!');
                    } else {
                        this.$HtBaseMessage.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
<style>
    .ht-base-form-custom-demo {
        width:500px;
        margin: 0 auto;
    }
</style>

