<template>
    <div class="main">
        <div class="main-from common-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="可用状态">
                            <el-select v-model="formInline.region" placeholder="请选择" clearable>
                                <el-option label="启用" value="shanghai" />
                                <el-option label="禁用" value="shanghai" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="名称">
                            <el-input v-model="formInline.user" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="编码">
                            <el-input v-model="formInline.user" placeholder="请输入编码" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="规格型号">
                            <el-input v-model="formInline.user" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="助记码">
                            <el-input v-model="formInline.user" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="品牌">
                            <el-select v-model="formInline.region" placeholder="请选择" clearable>
                                <el-option label="海天" value="shanghai" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onSubmit">重置</el-button>
                    <el-button @click="onSubmit">保存</el-button>
                    <el-button type="primary" @click="onSubmit">新增</el-button>
                    <el-button @click="onSubmit" type="warning">删除</el-button>
                    <el-button @click="onSubmit">启用</el-button>
                    <el-button @click="onSubmit">禁用</el-button>
                    <el-dropdown style="margin-left: 10px;">
                        <el-button type="primary">
                            更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>导入</el-dropdown-item>
                                <el-dropdown-item>导出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-form-item>
            </el-form>
        </div>

        <div class="main-table common-box">
            <div class="tab-hed">
                <el-select v-model="formInline.region" placeholder="分类" clearable  style="width: 200px;">
                    <el-option label="所有" value="shanghai" />
                    <el-option label="成品" value="shanghai" />
                    <el-option label="成品非追溯" value="shanghai" />
                </el-select>
                <div>
                    <el-button type="success" link
                        style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding:  0 3px;">新增</el-button>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            更多
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>查看</el-dropdown-item>
                                <el-dropdown-item>修改</el-dropdown-item>
                                <el-dropdown-item>删除</el-dropdown-item>
                                <el-dropdown-item>刷新</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="tab">
                <vxe-table show-overflow height="100%" :data="tableData" :border=true :tree-config="{ transform: true }"
                    :scroll-y="{ gt: 20 }">
                    <vxe-column field="a" sortable title="编码" width=""></vxe-column>
                    <vxe-column field="b" sortable title="名称" width=""></vxe-column>
                    <vxe-column field="c" sortable title="可用状态" width=""></vxe-column>

                    <vxe-column field="d" sortable title="仓库条码" width=""></vxe-column>
                    <vxe-column field="e" sortable title="创建时间" width=""></vxe-column>
                    <vxe-column field="f" sortable title="仓库扩展字符串扩展字段1" width=""></vxe-column>
                    <vxe-column title="操作" width="200" fixed="right" show-overflow>
                        <template #default="{ row }">
                            <vxe-button type="text">查看</vxe-button>
                            <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
                        </template>
                    </vxe-column>
                </vxe-table>

            </div>
            <div>
                <vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"
                    :total="pageVO1.total" />
            </div>

        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const onSubmit = () => {
    console.log('submit!')
}



import { ref } from 'vue'

const tableData = ref([
    {
        id: 1,
        a: 'default',
        b: '默认仓库',
        c: ' 启用',
        d: '00-00-00-00-00',
        e: '	2021-05-27 03:26:52',
        f: "",
    },


])

const pageVO1 = reactive({
    currentPage: 1,
    pageSize: 30,
    total: 8
})
</script>

<style lang="scss" scoped>
.main {
    padding: 10px;
    display: flex;
    flex-direction: column;

    .main-from {
        // height: 300px;
        width: 100%;
        padding: 20px 10px;

        .el-row {
            width: 100%;
        }
    }

    .main-table {
        margin-top: 20px;
        box-sizing: border-box;
        padding: 10px;
        flex-grow: 1;
        height: 0;

        display: flex;
        flex-direction: column;

        .tab {
            flex: 1;
            overflow: scroll;
        }
        .tab-hed{
            display: flex;
            justify-content: space-between;
            margin:  5px;
            align-items: center;
        }
    }
}
</style>