<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <el-card>
        <el-form ref="searchDbform" :inline="true" :model="searchform" class="demo-form-inline" size="small">
          <el-form-item label="数据库地址" prop="DbAddress">
            <el-input v-model="searchDbform.DbAddress" placeholder="请输入数据库地址" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="数据库名称" prop="DbName">
            <el-input v-model="searchDbform.DbName" placeholder="请输入数据库名称" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="用户名" prop="DbUserName">
            <el-input v-model="searchDbform.DbUserName" placeholder="请输入用户名" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="访问密码" prop="DbPassword">
            <el-input v-model="searchDbform.DbPassword" placeholder="请输入访问密码" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="数据库类型" prop="DbType">
            <el-select v-model="searchDbform.DbType" clearable placeholder="请选数据库类型">
              <el-option v-for="item in selectDbTypes" :key="item.Id" :label="item.Title" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item label="数据库端口" prop="DbPort">
            <el-input v-model="searchDbform.DbPort" placeholder="请输入数据库端口" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDbConn()">链接</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div> -->
    <el-card>
      <div class="list-btn-container">
        <el-form ref="codeform" :inline="true" :rules="rules" :model="codeform" class="demo-form-inline" size="small">
          <el-form-item label="数据库" prop="dbName">
            <el-select v-model="codeform.dbName" clearable placeholder="请选择" @change="handleShowTable">
              <el-option v-for="item in selectedDataBase" :key="item.Id" :label="item.dbName" :value="item.dbName" />
            </el-select>
          </el-form-item>
          <el-form-item label="表名">
            <el-input v-model="searchform.tableName" clearable placeholder="输入要查询的表名" />
          </el-form-item>
          <!-- <el-form-item label="项目命名空间：" prop="baseSpace">
            <el-tooltip class="item" effect="dark" content="系统会根据项目命名空间自动生成IService、Service、Models等子命名空间" placement="bottom">
              <el-input v-model="codeform.baseSpace" clearable placeholder="如Zr" />
            </el-tooltip>
          </el-form-item> -->
          <el-form-item label="去掉表名前缀：">
            <el-tooltip class="item" effect="dark" content="表名直接变为类名，去掉表名前缀。多个前缀用“;”隔开和结束" placement="bottom">
              <el-input v-model="codeform.replaceTableNameStr" clearable width="300" placeholder="多个前缀用“;”隔开" />
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch()">查询</el-button>
            <!-- <el-button type="primary" icon="iconfont icon-code" @click="handleGenerate()">生成代码</el-button> -->
            <el-button type="default" icon="el-icon-refresh" size="small" @click="loadTableData()">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table ref="gridtable" v-loading="tableloading" :data="tableData" border stripe highlight-current-row style="width: 100%" @selection-change="handleSelectChange">
        <!-- <el-table-column type="selection" width="50" /> -->
        <el-table-column prop="name" label="表名" sortable="custom" width="380" />
        <el-table-column prop="description" label="表描述" />
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view">预览</el-button>
            <el-button type="text" icon="el-icon-download" @click="handleGenerate(scope.row)">生成代码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background :current-page="pagination.pageNum" :page-sizes="[5,10,20,50,100, 200, 300, 400]" :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  createGetDBConn,
  codeGetDBList,
  codeGetTableList,
  codeGenerator,
} from "@/api/tool/gen";
import { downloadFile } from "@/utils/index";
import { Loading } from "element-ui";

import defaultSettings from "@/settings";
import template from "../../../document/template.vue";
export default {
  components: { template },
  name: "CodeGenerator",
  data() {
    return {
      searchDbform: {
        DbName: "",
        DbAddress: "",
        DbPort: "1433",
        DbUserName: "",
        DbPassword: "",
        DbType: "",
      },
      searchform: {
        dbName: "",
        tableName: "",
      },
      codeform: {
        baseSpace: "",
        replaceTableNameStr: "",
      },
      rules: {
        // baseSpace: [
        //   { required: true, message: "请输入项目名称", trigger: "blur" },
        //   {
        //     min: 2,
        //     max: 50,
        //     message: "长度在 2 到 50 个字符",
        //     trigger: "blur",
        //   },
        // ],
        dbName: [
          { required: true, message: "请选择数据库名称", trigger: "blur" },
        ],
        replaceTableNameStr: [
          { min: 0, max: 50, message: "长度小于50个字符", trigger: "blur" },
        ],
      },
      selectDbTypes: [
        {
          Id: "SqlServer",
          Title: "SqlServer",
        },
        {
          Id: "MySql",
          Title: "MySql",
        },
      ],
      tableData: [],
      tableloading: false,
      pagination: {
        pageNum: 1,
        pagesize: 20,
        pageTotal: 0,
      },
      sortableData: {
        order: "",
        sort: "",
      },
      currentSelected: [],
      selectedDataBase: [],
    };
  },
  created() {
    this.pagination.pageNum = 1;
    this.loadData();
    // this.loadTableData();
  },
  methods: {
    loadData: function () {
      codeGetDBList().then((res) => {
        this.selectedDataBase = res.data;
      });
    },
    /**
     * 加载页面table数据
     */
    loadTableData: function () {
      if (this.codeform.dataBaseName !== "") {
        this.tableloading = true;
        var seachdata = {
          pageNum: this.pagination.pageNum,
          PageSize: this.pagination.pagesize,
          tableName: this.codeform.tableName,
          dbName: this.codeform.dbName,
        };
        codeGetTableList(seachdata).then((res) => {
          this.tableData = res.data.result;
          this.pagination.pageTotal = res.data.totalNum;
          this.tableloading = false;
        });
      }
    },
    /**
     * 点击查询
     */
    handleSearch: function () {
      this.$refs["codeform"].validate((valid) => {
        if (valid) {
          this.tableloading = true;
          this.pagination.pageNum = 1;
          this.loadTableData();
        }else{
          return false;
        }
      });
    },
    handleShowTable: function () {
      this.pagination.pageNum = 1;
      // this.loadTableData();
    },
    handleDbConn: function () {
      var dataInfo = {
        DbAddress: this.searchDbform.DbAddress,
        DbPort: this.searchDbform.DbPort,
        DbName: this.searchDbform.DbName,
        DbUserName: this.searchDbform.DbUserName,
        DbPassword: this.searchDbform.DbPassword,
        DbType: this.searchDbform.DbType,
      };
      createGetDBConn(dataInfo).then((res) => {
        this.selectedDataBase = res.ResData;
        this.searchform.DbName = this.searchDbform.DbName;
      });
      this.pagination.pageNum = 1;
      this.loadTableData();
    },
    /**
     * 点击生成服务端代码
     */
    handleGenerate: async function (row) {
      console.log(JSON.stringify(row));
      // if (this.currentSelected.length === 0 || this.currentSelected.length > 3) {
      //   this.msgError("请先选择要生成代码的数据表", "提示");
      //   return false;
      // } else {
      this.$refs["codeform"].validate((valid) => {
        if (valid) {
          var loadop = {
            lock: true,
            text: "正在生成代码...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          };
          const pageLoading = Loading.service(loadop);

          var seachdata = {
            dbName: this.codeform.dbName,
            tables: row.name, // this.currentSelected.toString(),
            baseSpace: this.codeform.baseSpace,
            replaceTableNameStr: this.codeform.replaceTableNameStr,
          };
          codeGenerator(seachdata)
            .then((res) => {
              if (res.code == 200) {
                // downloadFile(
                //   defaultSettings.fileUrl + res.ResData[0],
                //   res.ResData[1]
                // );

                this.msgSuccess("恭喜你，代码生成完成！");
              } else {
                this.msgError(res.msg);
              }
              pageLoading.close();
            })
            .catch((erre) => {
              pageLoading.close();
            });
        } else {
          return false;
        }
      });
      // }
    },
    /**
     * 当用户手动勾选checkbox数据行事件
     */
    handleSelectChange: function (selection, row) {
      console.log(JSON.stringify(selection));
      this.currentSelected = selection.map((item) => item.name);
    },
    /**
     * 选择每页显示数量
     */
    handleSizeChange(val) {
      this.pagination.pagesize = val;
      this.pagination.pageNum = 1;
      this.loadTableData();
    },
    /**
     * 选择当页面
     */
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.loadTableData();
    },
  },
};
</script>
