<template>
	<div class="app-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
        <el-form :inline="true" ref="queryRef" :model="tableData.param">
          <el-form-item label="表名称" prop="tableName">
            <el-input size="default" v-model="tableData.param.tableName" placeholder="请输入表名称" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="表描述" prop="tableComment">
            <el-input size="default" v-model="tableData.param.tableComment" placeholder="请输入岗位编码" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="创建时间" prop="dateRange">
            <el-date-picker
                v-model="tableData.param.dateRange"
                size="default"
                style="width: 240px"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="tableList">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="resetQuery(queryRef)">
              <el-icon>
                <ele-Refresh />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
                type="primary"
                size="small"
                @click="handleGenTable(null)"
                :disabled="multiple"
            ><el-icon><ele-Download /></el-icon>生成</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="info"
                size="small"
                @click="openImportTable"
            ><el-icon><ele-UploadFilled /></el-icon>导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="success"
                size="small"
                :disabled="single"
                @click="handleEditTable(null)"
            ><el-icon><ele-EditPen /></el-icon>修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="danger"
                size="small"
                :disabled="multiple"
                @click="onRowDel(null)"
            ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
          </el-col>
        </el-row>
			</div>
			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="tableName" label="表名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="tableComment" label="表描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="className" label="实体" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="300">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="handlePreview(scope.row)"><el-icon><ele-View /></el-icon>预览</el-button>
						<el-button size="small" text type="primary" @click="handleEditTable(scope.row)"><el-icon><ele-EditPen /></el-icon>编辑</el-button>
						<el-button size="small" text type="primary" @click="handleGenTable(scope.row)"><el-icon><ele-Download /></el-icon>生成代码</el-button>
						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
					</template>
				</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="tableList"
      />
		</el-card>
    <import-table ref="importRef" @ok="tableList" />
    <gen-code-preview ref="genCodePreviewRef"></gen-code-preview>
	</div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import {getTableList,deleteTables,batchGenCode} from "/@/api/system/tools/gen";
import {TableData,TableDataState} from "/@/views/system/tools/gen/component/model"
import importTable from "/@/views/system/tools/gen/component/importTable.vue";
import { useRouter } from 'vue-router';
import genCodePreview from '/@/views/system/tools/gen/component/preview.vue'
import {refreshBackEndControlRoutes} from "/@/router/backEnd";
export default defineComponent({
	name: 'apiV1SystemToolsGenTableList',
	components: {importTable,genCodePreview},
	setup() {
    const router =  useRouter()
		const addPostRef = ref()
		const editPostRef = ref()
    const queryRef = ref()
    const importRef = ref()
    const genCodePreviewRef = ref()
		const state = reactive<TableDataState>({
      ids:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      tableNames:[],
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
          tableName:'',
          tableComment:'',
					pageNum: 1,
					pageSize: 10,
          dateRange: []
				},
			},
		});
		// 初始化表格数据
		const initTableData = () => {
			tableList()
		};
    const tableList = ()=>{
      getTableList(state.tableData.param).then(res=>{
        state.tableData.data = res.data.list??[];
        state.tableData.total = res.data.total;
      })
    };
    /** 重置按钮操作 */
    const resetQuery = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
      tableList()
    };
		// 删除导入的表
		const onRowDel = (row: TableData) => {
      let msg = '你确定要删除所选数据？';
      let ids:number[] = [] ;
      if(row){
        msg = `此操作将永久删除：“${row.tableName}”，是否继续?`
        ids = [row.tableId]
      }else{
        msg = `此操作将永久删除：“${state.tableNames.join(',')}”，是否继续?`
        ids = state.ids
      }
      if(ids.length===0){
        ElMessage.error('请选择要删除的数据。');
        return
      }
			ElMessageBox.confirm(msg, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
          deleteTables(ids).then(()=>{
            ElMessage.success('删除成功');
            tableList();
          })
				})
				.catch(() => {});
		};
		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.tableData.param.pageSize = val;
		};
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.tableData.param.pageNum = val;
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
		});
    // 多选框选中数据
    const handleSelectionChange = (selection:Array<TableData>)=> {
      state.ids = selection.map(item => item.tableId)
      state.multiple = !selection.length
      state.single = selection.length != 1
      state.tableNames = selection.map(item=>item.tableName)
    };
    const handleGenTable=(row: TableData)=>{
      let msg = '你确定要生成？';
      let ids:number[] = [] ;
      if(row){
        msg = `此操作将生成业务表：“${row.tableName}”相关代码，是否继续?`
        ids = [row.tableId]
      }else{
        msg = `此操作将生成业务表：“${state.tableNames.join(',')}”相关代码，是否继续?`
        ids = state.ids
      }
      if(ids.length===0){
        ElMessage.error('请选择要生成的业务表数据。');
        return
      }
      ElMessageBox.confirm(msg, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            batchGenCode(ids).then(()=>{
              ElMessage.success('生成成功');
              resetMenuSession()
              tableList();
            })
          })
          .catch(() => {});
    }
    // 重置菜单session
    const resetMenuSession = () => {
      refreshBackEndControlRoutes();
    };
    //打开导入页面
    const openImportTable=()=>{
      importRef.value.openDialog()
    }
    const handlePreview = (row:TableData)=>{
      genCodePreviewRef.value.showView(row.tableId);
    }
    const handleEditTable=(row:TableData)=>{
      const tableId = row?.tableId || state.ids[0];
      router.push({ path: "/system/tools/gen/edit", query: { tableId: tableId } });
    }
		return {
			addPostRef,
			editPostRef,
      queryRef,
      importRef,
      genCodePreviewRef,
			onRowDel,
			onHandleSizeChange,
			onHandleCurrentChange,
      tableList,
      resetQuery,
      handleSelectionChange,
      handleGenTable,
      openImportTable,
      handleEditTable,
      handlePreview,
			...toRefs(state),
		};
	},
});
</script>
