<template>
    <div class="ht-base-form-validator-demo">
        <ht-base-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <ht-base-form-item label="名称" prop="name">
                <ht-base-input v-model="formValidate.name" placeholder="Enter your name"></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="E-mail" prop="mail">
                <ht-base-input v-model="formValidate.mail" placeholder="Enter your e-mail"></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="城市" prop="city">
                <ht-base-select v-model="formValidate.city" placeholder="Select your city">
                    <ht-base-option value="beijing">New York</ht-base-option>
                    <ht-base-option value="shanghai">London</ht-base-option>
                    <ht-base-option value="shenzhen">Sydney</ht-base-option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item label="日期" prop="date">
                <ht-base-date-picker type="date" placeholder="Select date" v-model="formValidate.date" style="width: 100%"></ht-base-date-picker>
            </ht-base-form-item>
            <ht-base-form-item label="喜好" prop="interest">
                <ht-base-checkbox-group v-model="formValidate.interest">
                    <ht-base-checkbox label="吃"></ht-base-checkbox>
                    <ht-base-checkbox label="睡觉"></ht-base-checkbox>
                    <ht-base-checkbox label="跑步"></ht-base-checkbox>
                    <ht-base-checkbox label="电影"></ht-base-checkbox>
                </ht-base-checkbox-group>
            </ht-base-form-item>
            <ht-base-form-item label="描述" prop="desc">
                <ht-base-input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="Enter something..."></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-button type="primary" @click="handleSubmit('formValidate')">确定</ht-base-button>
                <ht-base-button @click="handleReset('formValidate')" style="margin-left: 8px">重置</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseFormValidatorDemo',
        data() {
            return {
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ],
                    mail: [
                        {required: true, message: 'email不能为空', trigger: 'blur'},
                        {type: 'email', message: 'email格式不正确', trigger: 'blur'}
                    ],
                    city: [
                        {required: true, message: '城市不能为空', trigger: 'change'}
                    ],
                    interest: [
                        {required: true, type: 'array', min: 1, message: '喜好不能为空', trigger: 'change'},
                        {type: 'array', max: 2, message: '最多只能选择两项', trigger: 'change'}
                    ],
                    date: [
                        {required: true, type: 'date', message: '日期不能为空', trigger: 'change'}
                    ],
                    desc: [
                        {required: true, message: '描述不能为空', trigger: 'blur'},
                        {type: 'string', min: 20, message: '描述不能小于20字', 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-validator-demo {
        width: 500px;
        margin: 0 auto;
    }
</style>

