
<template>
  <base-dialog
    :closeEscape="true"
    :showClose="true"
    :closeModal="false"
    @handleConfirmClick="apiConfirmClick"
    :dialogVisible.sync="personDialog"
    @handleClose="handleClose"
    class="userDialog"
    title="API配置"
    width="1200px"
    top="10vh"
    :footerShow="true"
  >
    <div class="organizationBody">
      <div style="display: flex">
        <base-layout
          style="
            width: 20%;
            border-radius: 5px;
            height: calc(100vh - 360px);
            overflow: auto;
          "
          :operateButtonSwitch="false"
          :bottonShow="false"
          :isPage="false"
          :mainColor="mainColor"
        >
          <div slot="main">
            <base-tree
              ref="baseTree"
              :isCenter="false"
              :isSaveBtn="false"
              :Allshow="false"
              :showCheckbox="false"
              :menuData="menuData"
              @handleNodeClick="handleNodeClick"
            ></base-tree>
          </div>
        </base-layout>
        <div style="width: 78%">
          <base-table
            ref="personpersonCustomtable"
            :border="true"
            :showIndex="true"
            :showSelect="true"
            :tabLoading.sync="personLoading"
            :tableData="personTableData"
            :tableColumn="tableColumn"
            :tableHeight="'calc(100vh - 400px)'"
            @onSelectionChange="getSelect"
            @select="getOneSelectChange"
            :currentType="'apiCode'"
          >
          </base-table>
          <basePage
            :pageModel="pageModel"
            @update:pageModel="currentChangeHandle"
          ></basePage>
        </div>
      </div>

      <!--    多选模块-->
      <div class="multipleChoice" v-if="selectTableShow.length > 0">
        <div class="title">已选</div>
        <div
          class="checkBoxlist"
          style="display: flex; margin-left: 5px; margin-top: 10px"
        >
          <div
            class="chunkItem"
            v-for="(item, index) in selectTableShow"
            :key="index"
            style="display: flex; align-items: center"
          >
            <div class="name">{{ item.apiName }}</div>
            <div class="btn" @click="removeCheckItem(item, index)">x</div>
          </div>
        </div>
      </div>
    </div>
  </base-dialog>
</template>

<script>
import basePage from "@/views/intergrationTask/compoments/basePage.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseLayout from "@/components/base/baseNewLayout";
import baseTable from "@/components/base/baseTable";
import { getApiModuleApi } from "@/api/apiChunks/index.js";
export default {
  components: {
    baseLayout,
    baseTree,
    baseDialog,
    baseTable,
    basePage,
  },
  data() {
    return {
      personDialog: false,
      mainColor: "#f8f8f8",
      personMainHight: "calc(100% - 39px)", //人员弹框高度
      personHight: "350px", //人员选择高度
      personLoading: false, //人员加载
      personTableHeight: "440px", //人员表格高度
      personTableData: [],
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 100,
        appId: "",
      },
      personData: [],
      menuData: [],
      tableColumn: [
        {
          label: "应用编码",
          prop: "appId",
          tooltip: true,
        },
        {
          label: "应用名称",
          prop: "appName",
          tooltip: true,
        },
        {
          label: "接口编码",
          prop: "apiCode",
          tooltip: true,
        },
        {
          label: "接口名称",
          prop: "apiName",
          tooltip: true,
        },
      ],
      selectTableShow: [],
      currentresult: [],
    };
  },
  watch: {
    personTableData: {
      deep: true, //深度监听设置为 true
      handler(newV, oldV) {
        this.checkHandle();
      },
    },
  },
  methods: {
    openDialog(apiStr, menuData = [], result = []) {
      this.pageModel.appId = apiStr;
      this.personDialog = true;
      this.menuData = menuData;
      this.currentresult = result;
      this.getAPIList("first");
    },
    //删除已选单个
    removeCheckItem(item, index) {
      this.selectTableShow.splice(index, 1);
      this.checkHandle();
    },
    //复选多选框专用方法
    checkHandle() {
      let tempArr = [];
      this.personTableData.forEach((item) => {
        this.selectTableShow.forEach((ele) => {
          if (ele.apiCode === item.apiCode) {
            tempArr.push(item);
          }
        });
      });
      this.$refs.personpersonCustomtable.clearSelect();
      this.$nextTick(() => {
        this.$refs.personpersonCustomtable.toggleSelection(tempArr, true);
      });
    },
    // 菜单树选中
    handleNodeClick(data) {
      this.pageModel.appId = data.id;
      this.$refs.personpersonCustomtable.clearRadioIndex();
      this.$nextTick(() => {
        this.getAPIList();
      });
    },
    // 页面
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.getAPIList();
    },
    // 获得人员列表
    async getAPIList(type = null) {
      this.personLoading = true;
      setTimeout(() => {
        this.personLoading = false;
      }, 3000);
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationApiService",
          as: "",
          dj: "queryMultiAppPage",
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          appId: this.pageModel.appId,
        }
      );
      if (res.status == 200) {
        this.personTableData = res.attribute.list;
        this.pageModel.total = res.attribute.total;
        this.personLoading = false;
        if(type == "first"){
          this.$nextTick(() => {
            if (this.currentresult.length > 0) {
              this.selectTableShow = this.currentresult;
              this.checkHandle();
            }
          });
        }
      }
    },
    // 分页变化
    handlePageChange(val) {
      this.pageModel.pageIndex = val.pageIndex;
      this.pageModel.limit = val.pageSize;
      this.getAPIList();
    },
    // 表格多选
    getSelect(selectTable) {
      const mergedData = this.selectTableShow.concat(selectTable);
      const uniqueData = Array.from(
        new Set(
          mergedData.map((item) => {
            return item.apiCode;
          })
        )
      )
        .filter((apiCode) => apiCode !== undefined)
        .map((apiCode) => {
          return mergedData.find((item) => {
            return item.apiCode == apiCode;
          });
        });
      this.selectTableShow = uniqueData;
    },
    getOneSelectChange(list, row, flag) {
      if (!flag) {
        let index = this.selectTableShow.findIndex((item) => {
          if (item.apiCode === row.apiCode) {
            return true;
          }
        });
        this.selectTableShow.splice(index, 1);
      }
    },
    apiConfirmClick() {
      if (this.selectTableShow.length == 0) {
        this.$vmNews("请选择数据");
        return;
      }
      this.$emit("apiConfirmClick", this.selectTableShow);
      this.handleClose();
    },
    handleClose() {
      this.selectTableShow = [];
      this.personTableData = [];
      this.$refs.personpersonCustomtable.clearRadioIndex();
      this.personDialog = false;
    },
  },
};
</script>

<style scoped>
.organizationBody {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
::v-deep .tableHeight {
  background-color: #ffffff;
}
.multipleChoice {
  margin-top: 5px;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #eeeeee;

  .title {
    color: #333;
  }

  .checkBoxlist {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .chunkItem {
      padding: 5px 2px;
      margin-right: 10px;
      display: flex !important;
      justify-content: flex-start;
      align-items: center;
      background: #f5f5f5;
      border-radius: 4px;
      margin-bottom: 5px;

      .name {
        margin-left: 10px;
        font-size: 12px;
        white-space: nowrap;
      }

      .btn {
        text-align: center;
        width: 20%;
        cursor: pointer;
        margin-left: 5px;
        padding-right: 10px;
      }
    }
  }
}
</style>
