<template>
  <!-- 导入表 -->
  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body :close-on-click-modal="false">
    <el-form :model="tableData.param" ref="queryFormRef" :inline="true">
      <el-form-item label="表名称" prop="tableName">
        <el-input
            v-model="tableData.param.tableName"
            placeholder="请输入表名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input
            v-model="tableData.param.tableComment"
            placeholder="请输入表描述"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery"><el-icon><ele-Search /></el-icon>搜索</el-button>
        <el-button size="small" @click="resetQuery"><SvgIcon name="ele-Refresh" />重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table @row-click="clickRow" ref="tableRef" :data="tableData.data" @selection-change="handleSelectionChange" height="260px">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableName" label="表名称"></el-table-column>
        <el-table-column prop="tableComment" label="表描述"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      </el-table>
      <pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="getList"
      />
    </el-row>
    <div footer class="dialog-footer">
      <el-button type="primary" @click="handleImportTable">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue";
import {ImportTableDataState,TableData} from "/@/views/system/tools/gen/component/model"
import {getImportTableList, importTable} from "/@/api/system/tools/gen";
import {ElMessage} from "element-plus/es";
export default defineComponent({
  name: "importTable",
  emits:['ok'],
  setup(prop,{emit}) {
    const queryFormRef = ref()
    const tableRef = ref()
    const visible = ref(false)
    // 选中数组值
    let tables:string[] = []
    const state = reactive<ImportTableDataState>({
      tableData:{
        data:[],
        total:0,
        loading:true,
        param:{
          pageNum: 1,
          pageSize: 10,
          tableName: '',
          tableComment: ''
        },
      }
    })
    const getList = ()=>{
      getImportTableList(state.tableData.param).then(res=>{
        state.tableData.data = res.data.list??[]
        state.tableData.total = res.data.total
      })
    }
    const handleQuery = ()=>{
      state.tableData.param.pageNum = 1
      getList()
    }
    const resetQuery=()=>{
      queryFormRef.value.resetFields()
      getList()
    }
    const clickRow=(row:TableData)=>{
      tableRef.value.toggleRowSelection(row);
    }
    const handleSelectionChange=(selection:Array<any>)=>{
      tables = selection.map(item => item.tableName);
    }
    const handleImportTable=()=>{
      if(tables.length==0){
        ElMessage.error("请选择要导入的表格");
        return
      }
      importTable(tables).then((res:any)=>{
        if (res.code === 0) {
          ElMessage.success('导入成功');
          visible.value = false;
          emit("ok");
        }
      })
    }
    const openDialog = ()=>{
      getList()
      visible.value = true
    }
    return {
      queryFormRef,
      tableRef,
      visible,
      getList,
      handleQuery,
      resetQuery,
      clickRow,
      handleSelectionChange,
      handleImportTable,
      openDialog,
      ...toRefs(state),
    };
  }
})
</script>

<style scoped>

</style>
