<template>
  <div class="router">
    <!-- 查询区域 -->
        <el-form :inline="true">
            <el-form-item v-for="i in queryList" :label="i.label">
                <el-input v-if="i.type == 'input'" v-model="i.value"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作区域 -->
        <el-form>
            <el-form-item>
                <el-button v-for="b in buttonList" type="primary" @click="handleButton(b.prop)">{{b.label}}</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格区域 -->
        <el-table :data="tableData" border>
            <el-table-column type="selection"></el-table-column>
            <el-table-column v-for="c in tableColumn" :prop="c.prop" :label="c.label"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text">编辑</el-button>
                    <el-popconfirm title="确定删除吗?">
                        <template #reference>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表单输入区域 -->
        <el-dialog v-model="showDialog"></el-dialog>
  </div>
</template>

<script setup lang="ts">
import {reactive,ref} from "vue";
import {queryTable} from '@/services/api/table/tableAPI'

let tableData = ref()
let showDialog = ref(false)

const queryList = ref([
  {
    label:'表名',
    type:'input',
    value:''
  },
  {
    label:'表类型',
    type:'input',
    value:''
  },
  {
    label:'表描述',
    type:'input',
    value:''
  },
])

const buttonList = ref([
  {
    label:'新增',
    prop:'add'
  }
])

const tableColumn = ref([
  {
    prop:'fname',
    label:'表名'
  }
])

function init() {
  queryTable().then((res) => {
    tableData.value = res.data.records
  })
}

function handleButton(param:string){
  if(param == 'add'){
    showDialog.value = true
  }
}

init()
</script>

<style scoped>
</style>
