<template>
  <div class="wraaap">
    <div class="left">
      <BaseMenuTree
        :menuData="treeData"
        :filterShow="true"
        :Allshow="false"
        :filterButtonShow="false"
        style="width: 80%; height: 100%"
        @handleNodeClick="homeHandleNodeClick"
        ref="menuTree"
      ></BaseMenuTree>
    </div>
    <div class="right">
      <header style="background: #fff; padding: 20px">
        <div class="search">
          <!-- 搜索输入框 -->
          <!-- <BaseForm :list="SearchformRow"></BaseForm> -->
          <BaseNewForm
            :spanNumber="8"
            refName="searchForm"
            :formRow="SearchformRow"
            :formRule="false"
            :ruleForm="searchForm"
            :newFlag="true"
            :isFunBtn="false"
            @onSelect="selectChangeHandle"
            @PageChange="PageChangeHandle"
          ></BaseNewForm>
        </div>
        <div class="btn">
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button @click="resizeSearchHandle">重置</el-button>
        </div>
      </header>
      <main style="background: #fff; padding: 20px">
        <div style="margin: 0 0 10px 0">
          <el-button type="primary" @click="newPage">新增</el-button>
        </div>
        <div>
          <BaseTable
            ref="mainTable"
            :tableData="tableData"
            :tableColumn="tableColumn"
            :funData="funData"
            :funWidth="funWidth"
            :showIndex="true"
            :tabLoading="mainTabLoading"
            @onFunc="tableButtonHandle"
            :tableHeight="'54vh'"
            :border="false"
          >
            <template v-slot:source_api_app="{ row }">
              <baseSelectView :id="row['source_api_app']"></baseSelectView>
            </template>
            <template v-slot:target_api_app="{ row }">
              <baseSelectView :id="row['target_api_app']"></baseSelectView>
            </template>
          </BaseTable>
        </div>
      </main>
      <footer>
        <basePage
          :pageModel="pageModel"
          @update:pageModel="currentChangeHandle"
        ></basePage>
      </footer>
    </div>
  </div>
</template>

<script>
import baseSelectView from "@/views/intergrationOptionScene/compoments/baseSelectView";
import basePage from "./compoments/basePage.vue";
import BaseMenuTree from "./compoments/baseMenuTree";
import BaseNewForm from "./compoments/baseNewForm";
import BaseTable from "./compoments/baseTable";
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
export default {
  // name: "scenneAdmin",
  data() {
    return {
      lookFlag: false,
      newFlag: false,
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10,
      },
      mainTabLoading: false,
      treeData: [
        {
          label: "测试",
          id: 1,
        },
      ],
      searchForm: {},
      SearchformRow: [
        {
          elCol: [
            {
              type: "input",
              title: "场景编码",
              id: "ref_code",
              row: 8,
            },
            {
              type: "input",
              title: "场景名称",
              id: "ref_name",
              row: 8,
            },
            {
              type: "select",
              title: "场景分类",
              id: "ref_type",
              row: 8,
              options: [
                {
                  label: "测试",
                  id: 1,
                },
              ],
            },
          ],
        },
        {
          elCol: [
            {
              type: "select",
              title: "源应用",
              id: "source_api_app",
              row: 8,
              options: [],
            },
            {
              type: "select",
              title: "标应用",
              id: "target_api_app",
              row: 8,
              total: 0,
              options: [],
            },
          ],
        },
      ],
      funData: [
        {
          type: "edit",
          text: "编辑",
          color: "#5a9cf8",
        },
        {
          type: "view",
          text: "查看",
          color: "#5a9cf8",
        },
        {
          type: "dele",
          text: "删除",
          color: "#e47470",
        },
      ],
      tableData: [],
      tableColumn: [
        {
          id: "ref_code",
          title: "场景编码",
        },
        {
          id: "ref_name",
          title: "场景名称",
        },
        {
          id: "ref_type",
          title: "场景分类",
        },
        {
          id: "source_api_app",
          title: "源应用",
        },
        {
          id: "target_api_app",
          title: "标应用",
        },
        {
          id: "description",
          title: "场景描述",
        },
        {
          id: "remark",
          title: "备注",
        },
      ],
    };
  },
  methods: {
    // 没用
    PageChangeHandle(index) {
      this.SearchformRow[1]["elCol"][1]["options"] = [];
      this.getApiModuleHandle(
        {
          appId: this.searchForm["source_api_app"],
        },
        index
      ).then((val) => {
        this.SearchformRow[1]["elCol"][1]["total"] = val.total;
        val.list.forEach((item) => {
          this.SearchformRow[1]["elCol"][1]["options"].push({
            id: item.id,
            label: item.apiCode,
          });
        });
      });
    },
    // 没用
    selectChangeHandle(val = false, index, indexRow, row, flag = false) {
      return;
      this.SearchformRow[1]["elCol"][1]["options"] = [];
      this.SearchformRow[1]["elCol"][1]["total"] = 0;
      if (this.searchForm["target_api_app"]) {
        this.searchForm["target_api_app"] = "";
      }
      if (val) {
        if (row.id == "source_api_app") {
          this.getApiModuleHandle({ appId: val }).then((val) => {
            this.SearchformRow[1]["elCol"][1]["total"] = val.total;
            val.list.forEach((item) => {
              this.SearchformRow[1]["elCol"][1]["options"].push({
                id: item.id,
                label: item.apiCode,
              });
            });
          });
        }
      }
    },
    // 表单数据
    async getApiModuleHandle(obj = {}, index = 1) {
      const res = await getUserModuleApi(
        {
          tl: "appApiService",
          as: "appApi",
          dj: "queryPage",
        },
        {
          pageNum: index,
          pageSize: 10,
          ...obj,
        }
      );
      if (res.status == 200) {
        return res.attribute;
      }
    },
    // 初始化select
    async initSysSelect() {
      const res = await getUserModuleApi({
        tl: "sysAppService",
        as: "app",
        dj: "queryList",
      });
      if (res.status == 200) {
        this.appSelectOptions = res.attribute;
        res.attribute.forEach((item) => {
          this.SearchformRow[1]["elCol"][0]["options"].push({
            id: item.id,
            label: item.name,
          });
          this.SearchformRow[1]["elCol"][1]["options"].push({
            id: item.id,
            label: item.name,
          });
        });
      }
    },
    // 数据请求
    async getTableDataHandle(obj = {}) {
      this.mainTabLoading = true;
      const res = await getUserModuleApi(
        {
          tl: "apiReflectionService",
          as: "sys_api_reflectionService",
          dj: "queryPagedJson",
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          ...obj,
        }
      );
      if (res.status == 200) {
        this.pageModel.total = res.attribute.total;
        this.tableData = res.attribute.list;
      }
      this.mainTabLoading = false;
    },
    // 搜索按钮
    searchHandle() {
      this.getTableDataHandle(this.searchForm);
    },
    // 重置按钮
    resizeSearchHandle() {
      this.searchForm = {};
    },
    newPage() {
      this.$router.push({ name: "sceneAdd" });
    },
    homeHandleNodeClick(data) {
      this.pageModel.pageIndex = 1;
      this.pageModel.total = 0;
      this.pageModel.limit = 10;
      this.searchForm = {};
      this.tableData = [];
      this.lookFlag = false;
      this.newFlag = false;
    },
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
        this.getTableDataHandle(this.searchForm);
      });
    },
    tableButtonHandle(val, item) {
      if (item.type === "debug") {
      } else if (item.type === "dele") {
        this.$confirm("确认删除？")
          .then(async () => {
            const res = await getUserModuleApi(
              {
                tl: "apiReflectionService",
                as: "sys_api_reflectionService",
                dj: "deleteApiReflection",
              },
              { id: val.id }
            );
            if (res.status == 200) {
              if (
                this.pageModel.total + this.pageModel.limit - 1 <=
                this.pageModel.pageIndex * this.pageModel.limit
              ) {
                this.pageModel.pageIndex--;
              }
              this.$nextTick(() => {
                this.getTableDataHandle();
              });
            }
          })
          .catch(() => {});
      } else if (item.type === "edit") {
        this.$router.push({
          name: "sceneAdd",
          query: { id: val.id },
        });
      } else if (item.type === "view") {
        this.$router.push({
          name: "sceneAdd",
          query: { id: val.id, lookFlag: true },
        });
      }
    },
  },
  components: {
    BaseMenuTree,
    BaseNewForm,
    BaseTable,
    basePage,
    baseSelectView,
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70;
    },
  },
  mounted() {
    this.initSysSelect();
    // this.$refs.menuTree.clickFirst();
    this.getTableDataHandle();
  },
  activated() {
    this.getTableDataHandle(this.searchForm);
  },
};
</script>

<style scoped lang="scss">
.wraaap {
  position: relative;
  margin: 0 10px;
  display: flex;
  height: 100vh;
  background-color: #fafafa;
  .left {
    width: 15%;
    background-color: #fff;
    border-radius: 20px;
  }
  .right {
    // background-color: #fff;
    // flex: 11;
    width: 85%;
    height: 100%;
    margin-left: 10px;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  main {
    padding: 20px;
    border-radius: 20px;
    margin-top: 10px;
  }
  header {
    border-radius: 20px;
  }
  footer {
    margin-top: 10px;
  }
}
</style>