<template>
    <div class="ht-base-drawer-form-demo">
        <ht-base-button type="primary" @click="showDrawer"> 表单抽屉</ht-base-button>
        <ht-base-drawer title="表单抽屉" @on-close="onClose"  v-model="visible" width=640 :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}">
            <ht-base-form :model="formData">
                <ht-base-row :gutter="32">
                    <ht-base-col span="12">
                        <ht-base-form-item label="姓名" label-position="top">
                            <ht-base-input v-model="formData.name" placeholder="请输入"/>
                        </ht-base-form-item>
                    </ht-base-col>
                    <ht-base-col span="12">
                        <ht-base-form-item label="网址" label-position="top">
                            <ht-base-input v-model="formData.url" placeholder="请输入">
                                <span slot="prepend">http://</span>
                                <span slot="append">.com</span>
                            </ht-base-input>
                        </ht-base-form-item>
                    </ht-base-col>
                </ht-base-row>
                <ht-base-row :gutter="32">
                    <ht-base-col span="12">
                        <ht-base-form-item label="所有者" label-position="top">
                            <ht-base-select v-model="formData.owner" placeholder="请选择">
                                <ht-base-option value="jobs">Steven Paul Jobs</ht-base-option>
                                <ht-base-option value="ive">Sir Jonathan Paul Ive</ht-base-option>
                            </ht-base-select>
                        </ht-base-form-item>
                    </ht-base-col>
                    <ht-base-col span="12">
                        <ht-base-form-item label="类型" label-position="top">
                            <ht-base-select v-model="formData.type" placeholder="请选择">
                                <ht-base-option value="private">私有的</ht-base-option>
                                <ht-base-option value="public">公共的</ht-base-option>
                            </ht-base-select>
                        </ht-base-form-item>
                    </ht-base-col>
                </ht-base-row>
                <ht-base-row :gutter="32">
                    <ht-base-col span="12">
                        <ht-base-form-item label="批准人" label-position="top">
                            <ht-base-select v-model="formData.approver" placeholder="请选择">
                                <ht-base-option value="jobs">Steven Paul Jobs</ht-base-option>
                                <ht-base-option value="ive">Sir Jonathan Paul Ive</ht-base-option>
                            </ht-base-select>
                        </ht-base-form-item>
                    </ht-base-col>
                    <ht-base-col span="12">
                        <ht-base-form-item label="日期" label-position="top">
                            <DatePicker v-model="formData.date" type="daterange" placeholder="请选择" style="display: block" placement="bottom-end"></DatePicker>
                        </ht-base-form-item>
                    </ht-base-col>
                </ht-base-row>
                <ht-base-form-item label="描述" label-position="top">
                    <ht-base-input type="textarea" v-model="formData.desc" :rows="4" placeholder="请输入"/>
                </ht-base-form-item>
            </ht-base-form>
            <div :style="{position: 'absolute',left: 0,bottom: 0,width: '100%',borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',}">
                <ht-base-button :style="{marginRight: '8px'}" @click="onClose">取消</ht-base-button>
                <ht-base-button @click="onClose" type="primary">提交</ht-base-button>
            </div>
        </ht-base-drawer>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseDrawerFormDemo',
        data() {
            return {
                visible: false,
                formData: {
                    name: '',
                    url: '',
                    owner: '',
                    type: '',
                    approver: '',
                    date: '',
                    desc: ''
                },
            }
        },
        methods: {
            showDrawer() {
                this.visible = true
            },
            onClose() {
                this.visible = false
            },
        },
    }
</script>
<style>
    .ht-base-drawer-form-demo {

    }
</style>

