<template>
    <div class="app-container">
        <el-form ref="queryForm" size="small" :inline="true">
            <el-form-item>
                <el-input placeholder="请输入搜索关键词" />
            </el-form-item>

            <el-form-item>
                <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-search"
                    @click="onRegisterCompany"
                >
                    注册公司
                </el-button>
            </el-form-item>
        </el-form>

        <div class="company-list">
            <CompanyCard class="company-items" />
            <CompanyCard class="company-items" />
            <CompanyCard class="company-items" />
        </div>

        <AddForm :formDialogVisible.sync="formDialogVisible" />
    </div>
</template>

<script>
import AddForm from './components/add-form'
import CompanyCard from './components/company-card'
export default {
    components: {
        AddForm,
        CompanyCard,
    },
    data() {
        return {
            formDialogVisible: false,
        }
    },
    methods: {
        onRegisterCompany() {
            this.formDialogVisible = true
        },
    },
}
</script>

<style scoped lang="scss">
.company-list {
    display: flex;
    flex-wrap: wrap;

    .company-items {
        width: calc((100% - 30px) / 3);
        margin-right: 15px;
    }

    & .company-items:nth-child(3n) {
        margin-right: 0;
    }
}
</style>
