<template>
  <!-- 集成应用模块 -->
  <div class="integration">
    <div class="aside" v-loading="treeLoading">
      <BaseMenuTree
        v-if="treeFlag"
        :menuData="treeData"
        :filterShow="true"
        :Allshow="false"
        :filterButtonShow="false"
        style="width: 80%; height: 100%"
        @handleNodeClick="homeHandleNodeClick"
        ref="menuTree"
      ></BaseMenuTree>
    </div>
    <div class="content" style="" v-loading="contentLoading">
      <template>
        <div>
          <header>
            <div class="left">
              <!-- 搜索输入框 -->
              <!-- <BaseForm :list="SearchformRow"></BaseForm> -->
              <BaseNewForm
                v-loading="searchLoading"
                v-if="SearchformRow.length"
                :spanNumber="treeFlag ? 12 : 6"
                refName="searchForm"
                :formRow="SearchformRow"
                :formRule="false"
                :ruleForm="searchForm"
                :tableColumn="tableColumn"
                :newFlag="true"
                :isFunBtn="false"
                @resetForm="resetFormHandele"
                @onSubmit="onSubmitHandele"
                @closeDialog="closeDialogHandle"
              ></BaseNewForm>
            </div>
            <div class="right" v-if="searchButton.length">
              <!-- 搜索功能按钮 -->
              <el-button
                type="primary"
                v-if="SearchformRow.length || item.type === 'new'"
                v-for="item in searchButton"
                @click="buttonHandle(item)"
                :icon="item.icon"
                :key="item.id"
                :type="item.style"
                size="mini"
                :loading="item.loading"
                >{{ item.title }}</el-button
              >
            </div>
          </header>
          <!-- 表格主体 -->
          <main style="height: 65vh">
            <BaseTable
              v-if="tableColumn.length"
              ref="mainTable"
              :tableData="tableData"
              :tableColumn="tableColumn"
              :funData="funData"
              :funWidth="funWidth"
              :showIndex="true"
              :tabLoading="mainTabLoading"
              @onFunc="tableButtonHandle"
              @sortChange="sortChangeHandle"
              @mainTableMounted="mainTableMounted"
              @selectValueGeT="selectValueGeTHandle"
              :tableHeight="'60vh'"
              :border="false"
            >
            </BaseTable>
            <!-- :tableHeight="tableData ? tableData.length * 60 + 51 : 'auto'" -->
            <!-- <el-empty :image-size="200" v-else></el-empty> -->
          </main>
        </div>
        <!-- 搜索 -->
        <footer>
          <BasePage
            :pageModel="pageModel"
            @update:pageModel="currentChangeHandle"
          ></BasePage>
        </footer>
        <BaseDialog
          class="dialog"
          :loading="dialogCommitLoading"
          v-if="dialogSwitch"
          v-model="dialogSwitch"
          :fullscreen="true"
          @close="dialogCloseHandle"
          @confirm="dialogconfirmHandle"
          :footerShow="Boolean(dialogTabaleInfo.length)"
          :lookFlag="lookFlag"
        >
          <h1 style="margin: 20px 0; font-size: 20px; font-weight: 700">
            基本信息
          </h1>
          <BaseNewForm
            :isFunBtn="!dialogTabaleInfo.length"
            :spanNumber="12"
            :loading="dialogCommitLoading"
            :formRow="formRow"
            :ruleForm="ruleForm"
            :tableColumn="dialogFormData"
            :lookFlag="lookFlag"
            :newFlag="newFlag"
            @selectFormSearch="selectFormSearchHandle"
            @resetForm="resetFormHandele"
            @onSubmit="onSubmitHandele"
            @closeDialog="closeDialogHandle"
            ref="dialogForm"
          ></BaseNewForm>
          <template v-for="(item, index) in dialogTabaleInfo">
            <h1 style="margin: 20px 0; font-size: 20px; font-weight: 700">
              {{ item.title }}
            </h1>
            <BaseTableForm
              :formIndex="index"
              :key="index"
              :showIndex="true"
              :indexOperate="true"
              @clickBox="clickBoxHandle"
              :lookflag="lookFlag"
              :funData="DialogfunData"
              :tableInfo="item"
              :tabLoading="dialogTableLoading"
              :tableHeight="
                item.tableData.length ? item.tableData.length * 60 + 40 : 150
              "
              @newRow="dialogTableAddHandle"
              @onFunc="dialogTableDeleHandle"
            ></BaseTableForm>
          </template>
        </BaseDialog>
        <!-- 档案对照专用 -->
        <BaseDialog
          title="档案对照"
          class="dialog"
          :loading="contrastdialogCommitLoading"
          v-if="contrastDialogSwitch"
          v-model="contrastDialogSwitch"
          :fullscreen="true"
          @close="contrastDialogCloseHandle"
          @confirm="contrastDialogconfirmHandle"
          :footerShow="true"
        >
          <BaseContrastForm
            v-if="contrastDialogSwitch"
            ref="contrastForm"
            v-loading="contrastLoading"
            :spanNumber="treeFlag ? 12 : 6"
            refName="searchForm"
            :formRow="contrastformRow"
            :ruleForm="contrastForm"
            :newFlag="true"
            :isFunBtn="false"
            @onSubmit="contrastonSubmitHandele"
            @onSelect="onSelectHanlde"
          >
          </BaseContrastForm>
        </BaseDialog>
      </template>
    </div>
  </div>
</template>

<script>
import BaseRightDialog from "@/components/base/baseRightDialog";
import BaseTableForm from "./compoments/baseTableForm_v2";
import BaseMenuTree from "./compoments/baseMenuTree";
import baseNewSelect from "./compoments/baseNewSelect.vue";
import { deepClone } from "@/utils/index.js";
import BaseNewForm from "./compoments/baseNewForm";
import BaseDialog from "./compoments/baseDialog.vue";
import BasePage from "./compoments/basePage";
import BaseForm from "./compoments/baseForm.vue";
import BaseTable from "./compoments/baseTable";
import BaseContrastSelect from "./compoments/contrast/baseContrastSelect.vue";
import BaseContrastForm from "./compoments/contrast/baseContrastForm.vue";
import {
  getPagesApi,
  getUserModuleApi,
} from "@/api/integrationOption/integrationOption.js";
export default {
  data() {
    return {
      // 档案对照提交按钮
      contrastdialogCommitLoading: false,
      contrastDialogSwitch: false,
      templateTypes: [],
      contrastLoading: false,
      contrastformRow: [
        // 左应用 左接口
        {
          elCol: [
            {
              id: "leftAppId",
              type: "newSelect",
              title: "左应用",
              required: true,
              apiInfo: {
                tl: "sysAppService",
                as: "app",
                dj: "queryPageApp",
              },
              row: 12,
              prop: {
                label: "name",
                id: "id",
              },
            },
            {
              id: "rightAppId",
              type: "newSelect",
              title: "右应用",
              required: true,
              row: 12,
              apiInfo: {
                tl: "sysAppService",
                as: "app",
                dj: "queryPageApp",
              },
              prop: {
                label: "name",
                id: "id",
              },
            },
          ],
        },
        {
          elCol: [
            {
              foucus: false,
              refName: "sourceApiId",
              type: "newSelect",
              title: "左接口",
              required: true,
              id: "leftApiId",
              apiInfo: {
                tl: "appApiService",
                as: "appApi",
                dj: "queryPage",
              },
              row: 12,
              options: [],
              prop: {
                label: "apiName",
                id: "id",
              },
            },
            {
              foucus: false,
              refName: "targetApiId",
              prop: {
                label: "apiName",
                id: "id",
              },
              type: "newSelect",
              title: "右接口",
              required: true,
              id: "rightApiId",
              apiInfo: {
                tl: "appApiService",
                as: "appApi",
                dj: "queryPage",
              },
              row: 12,
              options: [],
            },
          ],
        },
        {
          elCol: [
            {
              id: "matchMode",
              type: "radio",
              title: "匹配方式",
              required: true,
              options: [
                {
                  id: "1",
                  label: "按名称匹配",
                },
                {
                  id: "2",
                  label: "按编码匹配",
                },
              ],
            },
          ],
        },
      ],
      contrastForm: {
        matchMode: "1",
      },
      // dialog提交按钮
      dialogCommitLoading: false,
      // 搜索框loading
      searchLoading: false,
      // dialog表格loading
      dialogTableLoading: false,
      // dialog表格功能按钮
      DialogfunData: [{ text: "删除", type: "dele" }],
      // 右边dialog
      rightDialogVisible: false,
      // 侧边栏是否有树
      treeFlag: true,
      // 树的假数据
      treeData: [],
      // 新建模式(点击新建)
      newFlag: false,
      // 查看编辑新建模式切换
      lookFlag: false,
      // dialog显示
      dialogSwitch: false,
      res: [],
      // 全局loading
      treeLoading: false,
      contentLoading: false,
      // tableloading
      mainTabLoading: false,
      testes: [
        {
          type: "input",
          title: "数据源名称",
          id: "test02",
          search: true,
          table: true,
          searchSort: "2",
          tableSort: "2",
          disabled: true,
          required: true,
        },
        {
          type: "input",
          title: "数据源编码",
          id: "test01",
          search: true,
          table: true,
          searchSort: "1",
          tableSort: "1",
          required: true,
          pattern: "^[0-9a-zA-Z_]{1,}$",
          message: "正则不对自定义对话",
        },
        {
          type: "select",
          title: "数据源类型",
          id: "test03",
          search: true,
          table: true,
          searchSort: "3",
          tableSort: "3",
          required: true,
          options: [
            {
              id: 1,
              label: "黄金糕",
            },
            {
              id: 2,
              label: "双皮奶",
            },
            {
              id: 3,
              label: "蚵仔煎",
            },
            {
              id: 4,
              label: "龙须面",
            },
            {
              id: 5,
              label: "北京烤鸭",
            },
          ],
        },
        {
          type: "radio",
          title: "数据库地址",
          id: "test04",
          search: true,
          table: true,
          searchSort: "4",
          tableSort: "4",
          required: true,
          placeholder: "数据库地址",
          options: [
            {
              id: "选择11",
              label: "选择1",
            },
            {
              id: "选择22",
              label: "选择2",
            },
          ],
        },
        {
          type: "datepick",
          title: "项目日期",
          id: "test07",
          span: "12",
          search: true,
          table: true,
          searchSort: "5",
          tableSort: "7",
          required: true,
          disabled: true,
        },
        {
          type: "textrea",
          title: "备注",
          id: "test08",
          table: true,
          tableSort: "8",
          span: 24,
          required: false,
        },
        {
          id: "test06",
          type: "input",
          title: "数据库端口",
          sortable: "custom",
          table: true,
          tableSort: "6",
          required: true,
        },
        {
          id: "test05",
          type: "treeselect",
          title: "实例ODBC",
          search: true,
          table: true,
          searchSort: "6",
          tableSort: "5",
          required: true,
          options: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 1111,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 111,
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              label: "一级 2",
              children: [
                {
                  id: 222,
                  label: "二级 2-1",
                  children: [
                    {
                      id: 2222,
                      label: "三级 2-1-1",
                    },
                  ],
                },
                {
                  id: 2223,
                  label: "二级 2-2",
                  children: [
                    {
                      id: 2224,
                      label: "三级 2-2-1",
                    },
                  ],
                },
              ],
            },
            {
              id: 2221,
              label: "一级 3",
              children: [
                {
                  id: 222324,
                  label: "二级 3-1",
                  children: [
                    {
                      id: 22234,
                      label: "三级 3-1-1",
                    },
                  ],
                },
                {
                  id: 222434,
                  label: "二级 3-2",
                  children: [{ id: 23242, label: "三级 3-2-1" }],
                },
              ],
            },
          ],
        },
        {
          id: 1,
          tag: "searchButton",
          type: "search",
          title: "搜索",
          style: "success",
          sort: "2",
          icon: "el-icon-search",
          loading: false,
        },
        {
          id: 2,
          tag: "searchButton",
          type: "resize",
          title: "重置",
          style: "primary",
          sort: "3",
          icon: "el-icon-refresh",
          loading: false,
        },
        {
          id: 3,
          tag: "searchButton",
          type: "new",
          title: "新建",
          style: "primary",
          sort: "1",
          icon: "el-icon-edit",
          loading: false,
        },
        {
          id: 4,
          tag: "searchButton",
          type: "contrast",
          title: "档案对照",
          style: "primary",
          sort: "1",
          icon: "el-icon-edit",
          loading: false,
        },
        {
          id: 2,
          tag: "funData",
          text: "查看",
          type: "view",
          color: "#5a9cf8",
          sort: "2",
        },
        {
          id: 3,
          tag: "funData",
          text: "编辑",
          type: "edit",
          color: "#5a9cf8",
          sort: "1",
        },
        {
          id: 1,
          tag: "funData",
          text: "删除",
          type: "dele",
          color: "#e47470",
          sort: "3",
        },
        {
          tag: "tableData",
          data: [
            {
              test01: 1.1,
              test02: 1.2,
              test03: 1.3,
              test04: "选择1",
              test05: 1,
              test06: 898989,
              test07: "2023-05-01",
              test08: "999",
            },
            {
              test01: "717k8bccc",
              test02: 2.2,
              test03: 2.3,
              test04: "选择2",
              test05: 1,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
            {
              test01: 2.1,
              test02: 2.2,
              test03: 2.3,
              test04: 2.4,
              test05: 2.5555555555565656565656,
              test06: 2898989,
              test07: 2898989,
              test08: 2898989,
            },
          ],
        },
      ],
      // 搜索框信息收集
      searchBox: [],
      // 搜索模块功能按键
      searchButton: [],
      // 表单列数据（表头）
      tableColumn: [],
      // 表单行数据
      tableData: [],
      // 表单操作列数据
      funData: [],
      // 分页器
      pageModel: {
        total: 0,
        pageIndex: 1,
        limit: 10,
      },
      // dialog表单显示
      formRow: [],
      // dialog表单内容
      ruleForm: [],
      SearchformRow: [],
      searchForm: {},
      // 当前模块名
      service: "",
      // dialog里的表格表单
      dialogTabaleInfo: [],
      // dialog表单数据（未整理）
      dialogFormData: [],
      // 点击搜索后搜索内容保存
      tempSearchdata: [],
    };
  },
  methods: {
    async contrastonSubmitHandele() {
      if (this.contrastForm.leftApiId === this.contrastForm.rightApiId) {
        this.$message({
          type: "error",
          message: "左右接口不能相同！",
        });
      } else {
        this.$confirm("此操作将清空当前数据并重新对照, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await getUserModuleApi(
              {
                tl: "optionService",
                as: "sys_template",
                dj: "controlData",
              },
              {
                service: this.service,
                ...this.contrastForm,
              }
            );
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "提交成功！请稍后查看任务表是否对照完成！",
              });
              this.contrastDialogCloseHandle();
            }
          })
          .catch(() => {});
      }
    },
    onSelectHanlde(id, val) {
      if (id == "leftAppId") {
        if (this.contrastForm.leftApiId) {
          this.contrastForm.leftApiId = "";
        }
        if (val) {
          let obj = {};
          obj["appId"] = val;
          this.$refs.contrastForm.$refs.sourceApiId[0].getUserModuleHandle(
            null,
            obj
          );
        } else {
          this.$refs.contrastForm.$refs.sourceApiId[0].clearOptions();
        }
      } else if (id == "rightAppId") {
        if (this.contrastForm.rightApiId) {
          this.contrastForm.rightApiId = "";
        }
        if (val) {
          let obj = {};
          obj["appId"] = val;
          this.$refs.contrastForm.$refs.targetApiId[0].getUserModuleHandle(
            null,
            obj
          );
        } else {
          this.$refs.contrastForm.$refs.targetApiId[0].clearOptions();
        }
      }
    },
    contrastDialogCloseHandle() {
      this.contrastDialogSwitch = false;
      this.contrastForm = {};
      this.$refs.contrastForm.$refs.sourceApiId[0].clearOptions();
      this.$refs.contrastForm.$refs.targetApiId[0].clearOptions();
    },
    contrastDialogconfirmHandle() {
      this.$refs.contrastForm.submitForm();
    },
    async selectFormSearchHandle(row) {
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryTemplateData",
        },
        {
          service: row.service,
          id: this.ruleForm[row.id],
          label: row.label,
          value: row.value,
        }
      );
      if (res.attribute.length) {
        let str = res.attribute[0][row.label];
        this.$set(this.ruleForm, row.id, str);
        this.$set(this.ruleForm, "selectflag", true);
      }
    },
    selectValueGeTHandle(item, row, data) {
      this.$set(this.tableData[row.index], item.id, data);
      this.$set(this.tableData[row.index], "selectflag", true);
    },
    clickBoxHandle(tableInfo, rowIndex, rowId, index) {
      // this.clickTable = tableInfo;
      // this.clickRowIndex = rowIndex;
      // this.clickRowId = rowId;
      // this.dialogSwitch = true;
    },
    //获取用户模块方法
    async getUserModuleHandle(str) {
      this.treeLoading = true;
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryUserTemplate",
        },
        { templateTypes: str }
      );
      if (res.status == "200") {
        this.treeLoading = false;
        this.treeData = res.attribute;
        this.$nextTick(() => {
          this.$refs.menuTree.clickFirst();
        });
      }
    },
    // 首页侧边树被点击
    async homeHandleNodeClick(data) {
      this.pageModel.pageIndex = 1;
      this.pageModel.total = 0;
      this.pageModel.limit = 10;
      this.searchForm = {};
      this.tempSearchdata = [];
      this.tableData = [];
      this.ruleForm = {};
      this.lookFlag = false;
      this.newFlag = false;
      this.searchLoading = true;
      this.mainTabLoading = true;
      this.service = data.service;
      this.pageInitSearchBox();
      this.pageInitTable();
      this.searchButtonInit();
    },
    // 请求首页表格体数据
    async getTableDataHandle(search = {}) {
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryPageData",
        },
        {
          service: this.service,
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          ...search,
        }
      );
      if (res.status == "200") {
        this.pageModel.total = res.attribute.total;
        this.tableData = res.attribute.list;
        if (
          this.pageModel.pageIndex * this.pageModel.limit >
          this.pageModel.total + this.pageModel.limit
        ) {
          this.pageModel.pageIndex = Math.ceil(
            this.pageModel.total / this.pageModel.limit
          );
        }
        this.$nextTick(() => {
          this.$refs.mainTable.setTableKey();
          this.mainTabLoading = false;
        });
        return true;
      }
    },
    // 初始化搜索框
    async pageInitSearchBox() {
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryUserTemplateFields",
        },
        { service: this.service, templateViewType: "1" }
      );
      if (res.status == "200") {
        this.searchBox = [];
        this.SearchformRow = [];
        let searchtempArr = [];
        let searchSpan = 0;
        this.searchBox = res.attribute;
        this.searchLoading = false;
        // res.attribute.forEach((item) => {
        //   this.searchBox.push(item);
        //   // this.$set(this.searchBox, item.searchSort * 1 - 1, item);
        // });
        this.searchBox.forEach((item, index) => {
          let spanNum = item.row * 1 || 12;
          searchSpan += spanNum;
          if (searchSpan > 24) {
            this.SearchformRow.push({ elCol: searchtempArr });
            searchSpan = spanNum;
            searchtempArr = [];
            searchtempArr.push(item);
          } else {
            searchtempArr.push(item);
          }
        });
        if (searchtempArr.length) {
          this.SearchformRow.push({ elCol: searchtempArr });
        }
      }
    },
    // 初始化表单数据(列)
    async pageInitTable() {
      this.tableColumn = [];
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryUserTemplateFields",
        },
        { service: this.service, templateViewType: "2" }
      );
      if (res.status == "200") {
        res.attribute.forEach((item) => {
          if (!item.hidden) {
            this.$set(this.tableColumn, item.tableSort - 1, item);
            // this.tableColumn.push(item);
          }
        });
        this.getTableDataHandle();
        this.testes.forEach((item) => {
          if (item.tag === "funData") {
            this.$set(this.funData, item.sort * 1 - 1, item);
          }
        });
      }
    },
    // 初始化新建、编辑、查看模块
    async pageInitNew(num) {
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryUserTemplateFields",
        },
        { service: this.service, templateViewType: num }
      );
      if (res.status == "200") {
        this.dialogFormData = [];
        this.dialogTabaleInfo = [];
        this.formRow = [];
        let tempArr = [];
        let span = 0;
        res.attribute.forEach((item, index) => {
          if (!item.detailFields && item.id != "id") {
            this.dialogFormData.push(item);
            let spanNum = item.span * 1 || 12;
            span += spanNum;
            if (span > 24) {
              this.formRow.push({ elCol: tempArr });
              span = spanNum;
              tempArr = [];
              tempArr.push(item);
            } else {
              tempArr.push(item);
            }
          } else if (item.id != "id") {
            item.tableData = [{}];
            if (num == 3) {
              item.tableData.push({});
            }
            this.dialogTabaleInfo.push(item);
          }
        });
        if (tempArr.length) {
          this.formRow.push({ elCol: tempArr });
        }
        return true;
      }
    },
    // 主页表格初始化
    pageInitHandle(res) {
      this.searchButtonInit();
      this.searchBox = [];
      this.tableColumn = [];
      // 表格列数据、搜索框收集框
      this.testes.forEach((item, index) => {
        if (item.tag === "funData") {
          this.$set(this.funData, item.sort * 1 - 1, item);
        }
        if (item.search) {
          this.searchBox.push(item);
          // this.$set(this.searchBox, item.searchSort * 1 - 1, item);
        }
        if (item.table) {
          this.tableColumn.push(item);
          // this.$set(this.tableColumn, item.tableSort * 1 - 1, item);
        }
      });
      this.SearchformRow = [];
      this.formRow = [];
      let searchtempArr = [];
      let searchSpan = 0;
      // 搜索框整理
      let tempArr = [];
      let span = 0;
      this.tableColumn.forEach((item, index) => {
        let spanNum = item.span * 1 || 12;
        span += spanNum;
        if (span > 24) {
          this.formRow.push({ elCol: tempArr });
          span = spanNum;
          tempArr = [];
          tempArr.push(item);
        } else {
          tempArr.push(item);
        }
      });
      if (tempArr.length) {
        this.formRow.push({ elCol: tempArr });
      }
    },
    // 新增、编辑函数
    async newCommitHandle(num, type, data) {
      try {
        const res = await getUserModuleApi(
          {
            tl: "optionService",
            as: "sys_template",
            dj: type,
          },
          { service: this.service, templateViewType: num, data }
        );
        if (res.state == 200) {
          return res;
        }
      } catch (error) {
        this.dialogCommitLoading = false;
        return Promise.reject(error);
      }
    },
    // dialog表格点击删除
    dialogTableDeleHandle(row, item, tableInfo, index) {
      if (item.type === "dele") {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogTabaleInfo[index].tableData.splice(row.index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch((error) => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    // dialog表格增加row
    dialogTableAddHandle(info, index) {
      this.dialogTabaleInfo[index].tableData.push({});
    },
    // dialog表单取消
    closeDialogHandle() {
      if (this.lookFlag) {
        this.dialogSwitch = false;
      } else {
        this.$confirm("是否关闭表单?", "提示", {
          confirmButtonText: "关闭",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogSwitch = false;
          })
          .catch(() => {});
      }
    },
    // dialog表单数据提交
    onSubmitHandele() {
      this.dialogCommitLoading = true;
      let obj = {};
      let num = 3;
      if (this.ruleForm.id) num = 4;
      this.dialogTabaleInfo.forEach((item) => {
        let arr = [];
        // item.tableData.forEach((ele) => {
        //   let ddd = Object.keys(ele).forEach((ele02) => {
        //     if (ele[ele02] === "") {
        //       delete ele[ele02];
        //     }
        //   });
        //   if (Object.keys(ele).length > 1) {
        //     arr.push(ele);
        //   }
        // });
        arr = deepClone(item.tableData);
        arr.pop();
        obj[item.id] = arr;
      });
      let result = { ...this.ruleForm, ...obj };
      let type =
        num === 3 ? "addTemplateServiceData" : "updateTemplateServiceData";
      // if (num === 3) {
      //   this.pageModel.pageIndex = 1;
      // }
      this.newCommitHandle(3, type, result).then((res) => {
        this.$message({
          type: "success",
          message: "保存成功！",
        });
        this.dialogCommitLoading = false;
        this.buttonHandle({ type: "search" });
        this.dialogSwitch = false;
      });
    },
    // dialog表单数据数据重置
    resetFormHandele(data) {
      this.ruleForm = data;
    },
    // dialog表格数据提交
    dialogconfirmHandle() {
      this.$refs["dialogForm"].submitForm();
    },
    // 搜索功能按钮初始化
    async searchButtonInit() {
      // 搜索框功能按钮
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryUserTemplateButtons",
        },
        {
          service: this.service,
        }
      );
      if (res.status == 200) {
        res.attribute.forEach((item) => {
          item.loading = false;
          this.$set(this.searchButton, item.sort * 1 - 1, item);
        });
      }
      // this.testes.forEach((item) => {
      //   if (item.tag === "searchButton") {
      //     this.$set(this.searchButton, item.sort * 1 - 1, item);
      //   }
      // });
    },
    mainTableMounted() {},
    // 搜索框按钮方法
    buttonHandle(item) {
      // 搜索按钮方法
      if (item.type === "search") {
        this.tempSearchdata = [];
        this.mainTabLoading = true;
        Object.keys(this.searchForm).forEach((item) => {
          let obj = {};
          if (this.searchForm[item]) {
            obj["fields"] = item;
            obj["values"] = this.searchForm[item];
            obj["fieldsType"] =
              this.searchForm[item] instanceof Array &&
              this.searchForm[item].length === 2
                ? 4
                : 1;
            this.tempSearchdata.push(obj);
          }
        });
        if (this.tempSearchdata.length) {
          this.getTableDataHandle({ queryCondition: this.tempSearchdata });
        } else {
          this.getTableDataHandle();
        }
        // 重置按钮方法
      } else if (item.type === "resize") {
        this.tempSearchdata = [];
        this.searchForm = {};
      } else if (item.type === "new") {
        item.loading = true;
        this.ruleForm = {};
        this.pageInitNew(3).then(() => {
          this.dialogSwitch = true;
          this.lookFlag = false;
          this.newFlag = true;
          item.loading = false;
        });
      } else if (item.type === "contrast") {
        this.contrastDialogSwitch = true;
      }
    },
    // 点击编辑、查看后数据处理
    async tableEditHandle(num, id) {
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "queryTemplateServiceData",
        },
        { service: this.service, templateViewType: num, id }
      );
      if (res.status == 200) {
        let obj = {};
        Object.keys(res.attribute).forEach((item) => {
          // 判断是表格数据还是输入框数据
          if (res.attribute[item] instanceof Array) {
            this.dialogTabaleInfo.forEach((table) => {
              if (table.id === item) {
                table.tableData = res.attribute[item];
                // 如果是编辑状态tableData多给一行
                if (num == 4) table.tableData.push({});
              }
            });
          } else {
            obj[item] = res.attribute[item];
          }
        });
        this.ruleForm = obj;
        return true;
      }
    },
    // 删除处理方法
    async tableDataRowDelHanlde(id) {
      const res = await getUserModuleApi(
        {
          tl: "optionService",
          as: "sys_template",
          dj: "deleteTemplateServiceData",
        },
        { service: this.service, id }
      );
      if (res.status == 200) {
        return true;
      }
    },
    // 表格操作按钮触发
    tableButtonHandle(row, item) {
      if (item.type === "dele") {
        this.$confirm("确认删除？")
          .then(() => {
            this.tableDataRowDelHanlde(row.id).then(() => {
              this.$message({
                type: "success",
                message: "数据删除成功！",
              });
              if (this.tableData.length <= 1 && this.pageModel.pageIndex > 1) {
                this.pageModel.pageIndex--;
              }
              this.buttonHandle({ type: "search" });
            });
          })
          .catch(() => {});
      } else if (item.type === "edit") {
        this.pageInitNew(4).then(() => {
          this.tableEditHandle(4, row.id).then(() => {
            this.lookFlag = false;
            this.dialogSwitch = true;
            this.newFlag = false;
          });
        });
      } else if (item.type === "view") {
        this.pageInitNew(5).then(() => {
          this.tableEditHandle(5, row.id).then(() => {
            this.lookFlag = true;
            this.dialogSwitch = true;
            this.newFlag = false;
          });
        });
      }
    },
    // 请求页面数据
    async getPagesHandel() {
      // 请求按钮
      this.mainLoading = true;
      let p1 = getPagesApi({
        tl: "optionService",
        as: "sys_user",
        dj: "queryButton",
      });
      let p2 = getPagesApi({
        tl: "optionService",
        as: "sys_user",
        dj: "queryColumn",
      });
      let p3 = getPagesApi({
        tl: "optionService",
        as: "sys_user",
        dj: "queryTableButton",
      });
      const res = await Promise.all([p1, p2, p3]);
      this.mainLoading = false;
      this.pageInitHandle(res);
    },
    // 表格点击排序
    sortChangeHandle(column) {
      if (column.order === "descending") {
        console.log("发送降序请求", column.prop);
      } else if (column.order === "ascending") {
        console.log("发送升序请求", column.prop);
      } else {
        console.log("无序恢复数据", column.prop);
      }
    },
    // 分页器更新数据
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
        this.buttonHandle({ type: "search" });
      });
    },
    // 分页器更新请求数据
    onPageChangeHandle() {
      if (this.tempSearchdata.length) {
        this.getTableDataHandle({ queryCondition: this.tempSearchdata });
      } else {
        this.getTableDataHandle();
      }
    },
    // dialog关闭方法
    dialogCloseHandle() {
      this.ruleForm = {};
      this.lookFlag = false;
      this.newFlag = false;
    },
  },
  computed: {
    funWidth() {
      return this.funData.length * 70;
    },
  },
  created() {
    this.templateTypes = this.$route.meta.templateTypes;
    this.getUserModuleHandle(this.templateTypes);
  },
  components: {
    BaseForm,
    BaseTable,
    BasePage,
    BaseDialog,
    BaseNewForm,
    baseNewSelect,
    BaseMenuTree,
    BaseTableForm,
    BaseRightDialog,
    BaseContrastForm,
    BaseContrastSelect,
  },
};
</script>

<style scoped lang='scss'>
.integration {
  position: relative;
  margin: 0 10px;
  display: flex;
  height: 100vh;
  background-color: #fafafa;
  .aside {
    flex: 2;
    background-color: #fff;
    border-radius: 20px;
  }
  .content {
    height: 100%;
    margin-left: 10px;
    flex-direction: column;
    flex: 11;
    border-radius: 20px;
    overflow: auto;
    header {
      background-color: #fff;
      border-radius: 20px;
      width: 99%;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      padding-top: 20px;
      .right {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
      }
    }
    main {
      margin-top: 10px;
      background-color: #fff;
      border-radius: 20px;
      width: 99%;
      padding: 20px;
      height: 67vh !important;
    }
    footer {
      width: 100%;
    }
  }
}
</style>