<template>
    <div>
        <div class="title">
            企业管理
        </div>
        <el-form ref="searchFormRef" class="form" :inline="true" label-width="98px" :model="queryParams">
            <el-form-item label="个人名称" prop="configName">
                <el-input clearable placeholder="请输入" style="width: 220px;" v-model="queryParams.configName" @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label-width="100px">
                <el-button icon="Search" type="primary" @keyup.enter.prevent="handleQuery" @keydown.enter.prevent>
                    搜索
                </el-button>
                <el-button icon="RefreshRight" @click="resetQuery">
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <div style="margin-bottom: 20px;">
            <el-button icon="Plus" type="primary" @click="add">
                新建
            </el-button>
        </div>
        <div ref="tableContainerEl" class="table_border table">
            <el-table ref="tableRef" :data="tableData" v-loading="loading" header-row-class-name="table-header">
                <el-table-column align="center" label="企业名称" prop="name" />
                <el-table-column align="center" label="地址详情" prop="name" />
                <el-table-column align="center" label="业务类型" prop="name" />
                <el-table-column align="center" label="注册日期" prop="name" />
                <el-table-column align="center" label="状态" prop="name" />
                <el-table-column align="center" label="操作">
                    <template #default="{ row }">
                        <el-button link type="primary" @click="edit(row)">
                            修改
                        </el-button>

                        <el-button link type="danger" @click="handleDelete(row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <pagination v-show="total > 0" :total="total" v-model:limit="queryParams.limit" v-model:page="queryParams.page" @pagination="getList" />

        <HandleDialog v-if="isShowDialog" :type="rowType" :colorPasteList="colorPasteList" :row="currentRow" @closed="isShowDialog = false" @on-success="getList" />
    </div>
</template>

<script setup>
import { useTableRPC } from '@/utils/hook';
import dayjs from 'dayjs';
import RPC from '@/utils/rpc';
import HandleDialog from './HandleDialog.vue'

const rowType = ref('')
const currentRow = ref(null)
const add = () => {
    isShowDialog.value = true
    currentRow.value = null
    rowType.value = 'add'
}
const edit = (row) => {
    isShowDialog.value = true
    rowType.value = 'edit'
    currentRow.value = row
}


const { loading, tableData, tableRef, searchFormRef, total, queryParams, getList, handleQuery, resetQuery, handleDelete, isShowDialog, maxHeight, tableContainerEl } = useTableRPC({
    queryParams: {
    },
    remoteDataFn: '/store/list',
    deleteConfig: {
        remote: '/store/delete',
        key: 'id',
        message(row) {
            return `确认删除 “${row.underpainting_name}”`
        },
    },
})

getList()
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
</style>