<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
      <el-button
        slot="table-head-left2"
        type="primary"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleGenTable"
        >生成</el-button
      >

      <el-button
        slot="table-head-left2"
        type="info"
        plain
        icon="el-icon-upload"
        size="mini"
        @click="openImportTable"
        >导入</el-button
      >

      <el-button
        slot="table-head-left2"
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDelete"
        >删除</el-button
      >
    </LayoutTable>
    <!-- 预览界面 -->
    <el-dialog
      class="abow_dialog"
      :title="preview.title"
      :visible.sync="preview.open"
      width="90%"
      top="5vh"
      append-to-body
    >
      <el-tabs v-model="preview.activeName">
        <el-tab-pane
          v-for="(value, key) in preview.data"
          :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.ftl'))"
          :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.ftl'))"
          :key="key"
        >
          <pre><code  class="hljs" v-html="highlightedCode(value, key)"></code></pre>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <import-table ref="import" @ok="handleQuery" />
  </div>
</template>

<script>
import importTable from "./importTable";
import table from "@/assets/mixins/table";
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage(
  "javascript",
  require("highlight.js/lib/languages/javascript")
);
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

import { resolveBlob } from "@/assets/utils";

export default {
  components: { importTable },
  mixins: [table],
  created() {},
  methods: {
    /** 打开导入表弹窗 */
    openImportTable() {
      this.$refs.import.show();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getData();
      //this.queryParams.pageNum = 1;
      //this.getList();
    },
    /** 生成代码操作 */
    handleGenTable(row) {
      console.log("gen", row);
      const tableNames = row.tableName || this.tableNames;
      if (tableNames == "") {
        this.$message.error("请选择要生成的数据");
        return;
      }
      this.loading = true;
      if (!row) {
        this.$download(
          "/gentable/genCode",
          {
            tableName: tableNames,
          },
          { type: "application/zip" }
        )
          .then((res) => {
            this.loading = false;
          })
          .catch((error) => {
            console.log("error", error);
            this.$message.error(error.message);
          });
      } else {
        this.$download(
          "/gentable/batchGenCode",
          { tables: tableNames.join(",") },
          { type: "application/zip" }
        )
          .then((res) => {
            this.loading = false;
          })
          .catch((error) => {
            console.log("error", error);
            this.$message.error(error.message);
          });
      }

    },
    /** 同步数据库操作 */
    handleSynchDb(row) {
      let _this=this;
      const tableName = row.tableName;
      this.$confirm('确认要强制同步"' + tableName + '"表结构吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        _this.loading = true;
        _this.$post("/gentable/synchDb", {
          tableName: row.tableName,
        })
          .then((res) => {
            if (res && res.code && res.code == 1) {
              _this.$message.success("同步成功");
            }
            _this.loading = false;
          })
          .catch((error) => {
            _this.$message.error(error.message);
          });
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 预览按钮 */
    handlePreview(row) {
      this.loading = true;
      this.$post("/gentable/preview", {
        id: row.id,
      })
        .then((res) => {
          this.preview.data = res.data;
          this.preview.open = true;
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    /** 高亮显示 */
    highlightedCode(code, key) {
      const vmName = key.substring(
        key.lastIndexOf("/") + 1,
        key.indexOf(".ftl")
      );
      var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
      console.log("name", vmName, language);
      const result = hljs.highlight(language, code || "", true);
      return result.value || "&nbsp;";
    },
    //多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection.map((i) => i.id);
      this.ids = selection.map((item) => item.tableId);
      this.tableNames = selection.map((item) => item.tableName);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleEditTable(row) {
      const tableId = row.id;
      this.$router.push({
        path: "/gen/edit",
        query: { tableId: tableId },
      });

      // this.$router.push("/gen/edit/" + tableId);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let _this = this;
      const tableIds = row.id || this.selection;
      this.$confirm('是否确认删除表编号为"' + tableIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          //this.toDel(this.selection.join(','), true);
          _this.toDel(tableIds, true);
          // return delTable(tableIds);
        })
        .then(() => {
          this.getList();
        });
    },
  },
  data() {
    return {
      // 预览参数
      preview: {
        open: false,
        title: "代码预览",
        data: {},
        activeName: "entity.java",
      },
      config: {
        search: [],

        columns: [
          { type: "selection", width: 60 },

          { label: "表名称", prop: "tableName", width: 200 },
          { label: "表描述", prop: "tableComment" },
          { label: "关联子表的表名", prop: "subTableName" },
          { label: "子表关联的外键", prop: "subTableFkName" },
          { label: "实体类名称", prop: "className", width: 200 },
          { label: "生成包路径", prop: "packageName" },
          { label: "生成代码方式", prop: "genType", formatter: this.formatter },
          {
            label: "创建时间",
            prop: "createTime",
            formatter: this.formatterDate,
          },
          {
            label: "操作",
            width: 320,
            formatter: (row) => {
              return (
                <div>
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-view"
                    onClick={() => {
                      this.handlePreview(row);
                    }}
                  >
                    预览
                  </el-button>

                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-edit"
                    onClick={() => {
                      this.handleEditTable(row);
                    }}
                  >
                    编辑
                  </el-button>

                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    onClick={() => {
                      this.handleDelete(row);
                    }}
                  >
                    删除
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-refresh"
                    onClick={() => {
                      this.handleSynchDb(row);
                    }}
                  >
                    同步
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-download"
                    onClick={() => {
                      this.handleGenTable(row);
                    }}
                  >
                    生成代码
                  </el-button>
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>


<style lang="scss" scoped>
</style>


