<template>
  <div class="serach">
    <div class="tree">
      <el-input
        class="searchinput"
        v-model="treeSearchKey"
        @keyup.enter.native="treeSearch"
        :title="placeholders"
        :placeholder="placeholders"
      >
      </el-input>

      <el-tree
        v-if="this.listen === false"
        v-model="typet"
        :data="treeData"
        node-key="id"
        :default-expanded-keys="[0]"
        :key="loadingT"
        :props="props"
        @node-click="handleNodeClick"
      ></el-tree>

      <el-tree
        empty-text=""
        v-model="typet"
        :data="treeDatas"
        node-key="id"
        :key="loadingT"
        :props="props"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="list">
      <div class="search-header">
        <div class="tool-common-wrap">
          <div class="search-wrap">
            <div class="QuickQuery">
              <el-select
                v-model="types"
                @change="typeChange"
                placeholder="全部类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                clearable
                v-model="searchKey"
                @keyup.enter.native="quickSearch"
                :title="placeholder"
                :placeholder="placeholder"
              >
                <span slot="append" @click="quickSearch">搜索</span>
              </el-input>
            </div>
          </div>
          <div class="btn-wrap">
            <!-- <el-button type="primary" @click="addcode('add')" >添加</el-button> -->
            <!-- <el-button type="primary" @click="rest()" > 刷新 </el-button> -->
          </div>
        </div>
      </div>
      <div class="tableHeight">
        <el-table
          ref="singleTable"
          :data="tableList"
          border
          v-loading="loadingS"
          highlight-current-row
          type="selection"
        >
          <el-table-column
            prop="name"
            align="center"
            show-overflow-tooltip
            label="名称"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="operate(scope.row, 'edit')">{{
                scope.row.name
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="ftype" align="center" width="100" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.stype">{{ scope.row.stype }}</span>
              <span v-else>{{ scope.row.ftype }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectName"
            align="center"
            show-overflow-tooltip
            label="项目"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="projectDetail(scope.row)">{{
                scope.row.projectName
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="updatebyname"
            align="center"
            width="100"
            show-overflow-tooltip
            label="修改者"
          >
          </el-table-column>
          <el-table-column
            prop="updateon"
            width="120"
            align="center"
            show-overflow-tooltip
            label="最后修改日期"
          >
          </el-table-column>
          <el-table-column
            prop="operate"
            align="center"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
              <!-- <el-tooltip class="item" effect="dark" content="历史" placement="top">
                <el-button v-if="scope.row.ftype === '代理服务'" icon="el-icon-tickets" class="icon-button" type="text" @click="operate(scope.row, 'old')">
                </el-button>
              </el-tooltip> -->
              <el-tooltip
                class="item"
                effect="dark"
                content="被依赖"
                placement="top"
              >
                <el-button
                  class="icon-button"
                  type="text"
                  @click="operate(scope.row, 'refs')"
                >
                  <svg
                    t="1654158377941"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6958"
                    width="14"
                    height="14"
                  >
                    <path
                      d="M576 256H1024v64H576zM0 704h448V768H0zM256 960h768v64H256zM0 0h768v64H0z"
                      p-id="6959"
                      fill="#2d42af"
                    ></path>
                    <path
                      d="M704 0H768v192h-64zM256 832h64V1024H256zM0 0h64v768H0zM960 256h64v768h-64zM301.252267 256L781.917867 736.682667l-45.252267 45.252266L256 301.2608z"
                      p-id="6960"
                      fill="#2d42af"
                    ></path>
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="依赖于"
                placement="top"
              >
                <el-button
                  class="icon-button"
                  type="text"
                  @click="operate(scope.row, 'ref')"
                  style="margin-left: 10px"
                >
                  <svg
                    t="1654158419796"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7250"
                    width="14"
                    height="14"
                  >
                    <path
                      d="M410.996 101.004v65.629h431.011v713.076h-431.01v65.63h496.64V101.003h-496.64z"
                      p-id="7251"
                      fill="#2d42af"
                    ></path>
                    <path
                      d="M174.08 440.785v-50.734H56.785l3.259-4.655L210.85 189.44l154.065 200.61H247.622v75.405a227.607 227.607 0 0 0 56.32 139.636 192.233 192.233 0 0 0 144.756 52.13h269.964v73.543H449.164a264.844 264.844 0 0 1-197.353-74.008 303.01 303.01 0 0 1-76.8-181.061z"
                      p-id="7252"
                      fill="#2d42af"
                    ></path>
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="克隆"
                placement="top"
              >
                <el-button
                  v-if="
                    scope.row.ftype === '消息流' ||
                    scope.row.ftype === '业务服务' ||
                    scope.row.ftype === '代理服务' ||
                    scope.row.ftype === '资源文件'
                  "
                  class="icon-button"
                  type="text"
                  @click="operate(scope.row, 'clone')"
                  style="margin-left: 10px"
                  icon="el-icon-document-copy"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="消息流"
                placement="top"
              >
                <el-button
                  v-if="scope.row.ftype === '消息流'"
                  class="icon-button"
                  type="text"
                  @click="operate(scope.row, 'editflow')"
                  icon="el-icon-set-up"
                  style="margin-left: 10px"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <el-button
                  class="icon-button"
                  type="text"
                  @click="operate(scope.row, 'edit')"
                  style="margin-left: 10px"
                  icon="el-icon-edit-outline"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  class="icon-button"
                  type="text"
                  @click="operate(scope.row, 'del')"
                  style="margin-left: 10px"
                  icon="el-icon-delete"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :page-size="page.pageSize"
        :current-page.sync="page.pageNum"
        background
        @current-change="quickSearch"
        :total="page.total"
      />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="编辑"
      :visible.sync="dialogFormVisible"
      width="50%"
    >
      <el-form :model="formData" label-width="50px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称">
              <el-input clearable v-model="formData.name" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型">
              <el-input clearable v-model="formData.ftype" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目">
              <el-input clearable v-model="formData.projectName" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="修改者">
              <el-input clearable v-model="formData.updatebyname" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="最后修改时间">
              <el-input clearable v-model="formData.updateon" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="引用"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
      top="5vh"
      append-to-body
      @close="closeDialog"
    >
      <div class="">
        <el-table
          :data="relyTableList"
          border
          highlight-current-row
          height="400"
          style="width: 100%; margin-bottom: 10px"
          size="mini"
        >
          <el-table-column
            prop="name"
            label="名称"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="项目"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
    <oldDialog :visibles="oldDialog" :rowData="oldData" @confirm="closeOld" />
    <edit-dialog
      :type="type"
      :currentRow="currentRow"
      :title="titleR"
      @confirm="handleSubmit"
    ></edit-dialog>
    <cloneSouce
      :type="cloneType"
      v-model="dialogClone"
      :row="rows"
      @confirm="cloneEnd"
    />
    <el-dialog
      :title="ftype + '定义'"
      :visible.sync="isShowEditDailog"
      width="40%"
    >
      <showEditDailog
        :showDailogData="showDailogData"
        @changeIsShowEditDailog="changeIsShowEditDailog(false)"
      />
    </el-dialog>
  </div>
</template>

<script>
import oldDialog from '@/components/clone/versionOld.vue'
import editDialog from './searchEdit'
import cloneSouce from '@/components/clone'
import { exportDatas } from '@/api/project_list'
import { getFormateDate } from '@/utils/common'
import {
  deleteFlow,
  deleteBusinessService,
  deleteProxyService,
  deleteConnector,
  deleteResource,
  queryBusinessService,
  queryProxyService,
  queryConnector,
  queryFlow,
  listFiles,
  proxyservicedepent,
  businessservicedependent,
  listflowdependenet,
  connectordependened,
  proxyservicedepend,
  businessservicedependend,
  listflowdependened,
  resourcefiledepend
} from '@/api/esb_service'
import { versionQuery } from '@/api/system_manage'
import {
  querySqlBuilderList,
  deleteSqlBuilder
} from '@/api/esb_global_management'
import showEditDailog from '../../components/showDailog'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('app')
export default {
  components: {
    editDialog,
    oldDialog,
    cloneSouce,
    showEditDailog
  },
  data() {
    return {
      oldDialog: false,
      oldData: [],
      listen: false,
      treedialog: 'false',
      rows: {},
      cloneType: '',
      dialogClone: false,
      options: [
        {
          value: '',
          label: '全部类型'
        },
        {
          value: '代理服务',
          label: '代理服务'
        },
        {
          value: '消息流',
          label: '消息流'
        },
        {
          value: '业务服务',
          label: '业务服务'
        },
        {
          value: 'WSDL',
          label: 'WSDL'
        },
        {
          value: 'XSLT',
          label: 'XSLT'
        },
        {
          value: 'JSLT',
          label: 'JSLT'
        },
        // {
        //   value: '连接器',
        //   label: '连接器'
        // },
        {
          value: 'SQL构建器',
          label: 'SQL构建器'
        }
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      rules: {},
      dialogFormVisible: false,
      dialogVisible: false,
      formData: {},
      treeData: [],
      tableList: [],
      relyTableList: [],
      treeDatas: [],
      searchKey: '',
      typet: '',
      placeholder: '代理服务/消息流/业务服务/资源文件',
      placeholders: '搜索项目',
      treeSearchKey: '',
      types: '',
      project: {},
      props: {
        children: 'children',
        label: 'name'
      },
      type: '',
      titleR: '',
      currentRow: {},
      loadingT: false,
      loadingS: false,
      isShowEditDailog: false,
      ftype: '',
      showDailogData: {}
    }
  },
  watch: {
    treeSearchKey: {
      handler(newName, oldName) {
        if (this.treeSearchKey == '') {
          this.getTreeData()
        }
        if (newName != oldName) {
          this.listen = true
          this.treeData.map((item) => {
            this.treeDatas = item.children.filter((item) => {
              return item.name.indexOf(this.treeSearchKey) > -1
            })
          })
        }
      }
    }
  },
  mounted() {
    this.getTreeData()
    this.typeChange()
    // console.log(this.treeData,123123)
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    closeOld() {
      this.oldDialog = false
    },
    cloneEnd(statu) {
      this.dialogClone = false
      this.rows = {}
      this.cloneType = ''
      if (statu) {
        this.quickSearch()
      }
    },

    treeSearch() {},

    projectDetail(val) {
      this.setProjectID(val.projectId)
      this.setProjectName(val.projectId)
      localStorage.setItem('projectID', val.projectId)
      localStorage.setItem('projectName', val.projectName)
      this.$router.push({
        path: '/project_list/project_page'
      })
    },
    handleSubmit(name) {
      this.type = ''
      console.log(name)
      if (name === 'ok') {
        console.log(name)
        this.quickSearch()
      }
    },
    closeDialog() {
      this.dialogVisible = false
    },
    submit() {
      this.dialogFormVisible = false
    },
    cancel() {
      this.dialogFormVisible = false
    },
    concatRef(data) {
      let datas = []
      Object.keys(data).forEach((item) => {
        data[item].forEach((items) => {
          switch (item) {
            case 'BUSINESS':
              items.type = '业务服务'
              break
            case 'FLOW':
              items.type = '消息流'
              break
            case 'PROXY':
              items.type = '代理服务'
              break
            // case 'CONNECTOR':
            //   items.type = '连接器'
            //   break
          }
        })
        datas = datas.concat(data[item])
      })
      return datas
    },
    refs(row, isB) {
      const vm = this
      if (isB) {
        switch (row.ftype) {
          case '业务服务':
            businessservicedependend(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
          case '代理服务':
            proxyservicedepend(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
          case '消息流':
            listflowdependened(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
          // case '连接器':
          //   connectordependened(row.id).then(res => {
          //     vm.dialogVisible = true
          //     vm.relyTableList = vm.concatRef(res.data)
          //   })
          //   break
          case '资源文件':
            resourcefiledepend(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
        }
      } else {
        switch (row.ftype) {
          case '业务服务':
            businessservicedependent(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
          case '代理服务':
            proxyservicedepent(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
          case '消息流':
            listflowdependenet(row.id).then((res) => {
              vm.dialogVisible = true
              vm.relyTableList = vm.concatRef(res.data)
            })
            break
        }
      }
    },
    changeIsShowEditDailog(condition) {
      this.isShowEditDailog = condition
    },
    // 表格操作，弹出框
    handleDailog(row) {
      console.log('row', row)
      this.ftype = row.ftype
      this.showDailogData = row
      console.log(this.showDailogData)
      // console.log('res.data.list[0]', res.data.list[0])
      // 展示dailog组件
      this.isShowEditDailog = true
    },
    editData(row) {
      const vm = this
      const filter = [
        {
          key: 'id',
          value: row.id
        }
      ]
      switch (row.ftype) {
        case '业务服务':
          queryBusinessService({ filters: filter }).then((res) => {
            if (res.status === '200') {
              // vm.currentRow = res.data.list[0]
              // vm.type = 'business'
              vm.handleDailog(row)
            }
          })
          break
        case '消息流':
          queryFlow({ filters: filter }).then((res) => {
            if (res.status === '200') {
              // vm.currentRow = res.data.list[0]
              // vm.type = 'flow'
              vm.handleDailog(row)
            }
          })
          break
        case '代理服务':
          queryProxyService({ filters: filter }).then((res) => {
            if (res.status === '200') {
              // vm.currentRow = res.data.list[0]
              // vm.type = 'agency'
              vm.handleDailog(row)
            }
          })
          break
        // case '连接器':
        //   queryConnector({ filters: filter }).then(res => {
        //     if (res.status === '200') {
        //       vm.currentRow = res.data.list[0]
        //       vm.type = 'connector'
        //     }
        //   })
        //   break
        case 'SQL构建器':
          querySqlBuilderList({ filters: filter }).then((res) => {
            if (res.status === '200') {
              vm.currentRow = res.data.list[0]
              vm.type = 'sql'
            }
          })
          break
        case '资源文件':
          if (['wsdl', 'jslt', 'xslt'].indexOf(row.stype) !== -1) {
            filter.push({
              key: 'type',
              value: row.stype
            })
            listFiles({ filters: filter }).then((res) => {
              if (res.status === '200') {
                vm.currentRow = res.data.list[0]
                vm.type = 'resource'
              }
            })
          } else if (row.stype === 'sql构建器') {
            querySqlBuilderList({ filters: filter }).then((res) => {
              if (res.status === '200') {
                vm.currentRow = res.data.list[0]
                vm.type = 'sql'
              }
            })
          }
          break
      }
    },

    delData(name, item) {
      const vm = this
      switch (name) {
        case '代理服务':
          deleteProxyService(item.id)
            .then((res) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1000
              })
              vm.quickSearch()
            })
            .catch((e) => {
              if (e.status === '500') {
                const errData = e
                const proxyData = errData.data[0].PROXY || []
                const arr = []
                for (var i = 0; i < proxyData.length; i++) {
                  arr.push(proxyData[i].name)
                }
                const businessData = errData.data[0].BUSINESS || []
                const businessArr = []
                for (var l = 0; l < businessData.length; l++) {
                  businessArr.push(businessData[l].name)
                }

                const flowData = errData.data[0].FLOW || []
                const flowArr = []
                for (var n = 0; n < flowData.length; n++) {
                  flowArr.push(flowData[n].name)
                }
                this.$message({
                  message: `删除失败,正被以下资源依赖：${arr}、${businessArr}、${flowArr}`,
                  type: 'error'
                })
              }
            })
          break
        case '业务服务':
          deleteBusinessService(item.id)
            .then((res) => {
              if (res.status === '500') {
                this.$message.error(res.message)
              } else {
                this.$message({
                  message: '删除成功',
                  type: 'success',
                  duration: 1000
                })
              }
              vm.quickSearch()
            })
            .catch((e) => {
              if (e.status === '500') {
                const errData = e
                const proxyData = errData.data[0].PROXY || []
                const arr = []
                for (var i = 0; i < proxyData.length; i++) {
                  arr.push(proxyData[i].name)
                }
                const businessData = errData.data[0].BUSINESS || []
                const businessArr = []
                for (var l = 0; l < businessData.length; l++) {
                  businessArr.push(businessData[l].name)
                }

                const flowData = errData.data[0].FLOW || []
                const flowArr = []
                for (var n = 0; n < flowData.length; n++) {
                  flowArr.push(flowData[n].name)
                }
                this.$message({
                  message: `删除失败,正被以下资源依赖：${arr}、${businessArr}、${flowArr}`,
                  type: 'error'
                })
              }
            })
          break
        case '消息流':
          deleteFlow(item.id)
            .then((res) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1000
              })
              vm.quickSearch()
            })
            .catch((e) => {
              if (e.status === '500') {
                const errData = e
                const proxyData = errData.data[0].PROXY || []
                const arr = []
                for (var i = 0; i < proxyData.length; i++) {
                  arr.push(proxyData[i].name)
                }
                const businessData = errData.data[0].BUSINESS || []
                const businessArr = []
                for (var l = 0; l < businessData.length; l++) {
                  businessArr.push(businessData[l].name)
                }

                const flowData = errData.data[0].FLOW || []
                const flowArr = []
                for (var n = 0; n < flowData.length; n++) {
                  flowArr.push(flowData[n].name)
                }
                this.$message({
                  message: `删除失败,正被以下资源依赖：${arr}、${businessArr}、${flowArr}`,
                  type: 'error'
                })
              }
            })
          break
        // case '连接器':
        //   deleteConnector(item.id).then(res => {
        //     this.$message({
        //       message: '删除成功',
        //       type: 'success'
        //     })
        //     vm.quickSearch()
        //   }).catch(e => {
        //   })
        //   break
        case '资源文件':
          deleteResource(item.id)
            .then((res) => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              vm.quickSearch()
            })
            .catch((e) => {
              if (e.status === '500') {
                const errData = e
                const proxyData = errData.data[0].PROXY || []
                const arr = []
                for (var i = 0; i < proxyData.length; i++) {
                  arr.push(proxyData[i].name)
                }
                const businessData = errData.data[0].BUSINESS || []
                const businessArr = []
                for (var l = 0; l < businessData.length; l++) {
                  businessArr.push(businessData[l].name)
                }
                const flowData = errData.data[0].FLOW || []
                const flowArr = []
                for (var n = 0; n < flowData.length; n++) {
                  flowArr.push(flowData[n].name)
                }
                this.$message({
                  message: `删除失败,正被以下资源依赖：${arr}、${businessArr}、${flowArr}`,
                  type: 'error'
                })
              }
            })
          break
        case 'SQL构建器':
          deleteSqlBuilder(item.id)
            .then((res) => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              vm.quickSearch()
            })
            .catch((e) => {
              if (e.status === '500') {
                this.$message({
                  message: e.message,
                  type: 'error'
                })
              }
            })
          break
      }
    },
    typeChange(val) {
      this.loadingS = true
      const vm = this
      let filters = []
      if (
        ['消息流', '连接器', '业务服务', '代理服务', 'SQL构建器'].indexOf(
          val
        ) === -1
      ) {
        filters = [
          {
            key: 'level',
            opt: 'LIKE',
            type: 'S',
            value: 2
          },
          {
            key: 'stype',
            opt: 'LIKE',
            type: 'S',
            value: val
          }
        ]
      } else {
        filters = [
          {
            key: 'level',
            opt: 'LIKE',
            type: 'S',
            value: 2
          },
          {
            key: 'ftype',
            opt: 'LIKE',
            type: 'S',
            value: val
          }
        ]
      }
      if (vm.project.id && vm.project.id !== 0) {
        filters.push({
          key: 'project_id',
          opt: 'LIKE',
          type: 'S',
          value: vm.project.id
        })
      }
      vm.getTreeData(filters)
      console.log('123', filters)
    },
    quickSearch() {
      this.loadingS = true
      const vm = this
      const filters = [
        {
          key: 'level',
          opt: 'LIKE',
          type: 'S',
          value: 2
        },
        {
          key: 'project_id',
          opt: 'LIKE',
          type: 'S',
          value: vm.project.id
        },
        {
          key: 'name',
          opt: 'LIKE',
          type: 'S',
          value: vm.searchKey
        },
        {
          key: 'ftype',
          opt: 'LIKE',
          type: 'S',
          value: vm.types
        }
        // {
        //   key: 'projectName',
        //   opt: 'LIKE',
        //   type: 'S',
        //   value: this.treeData.projectName
        // },
      ]
      vm.getTreeData(filters)
      console.log('123', filters)
    },
    operate(row, name) {
      // row为当前行数据，name为操作类型
      const vm = this
      switch (name) {
        case 'refs':
          vm.refs(row, true)
          break
        case 'old':
          const filters = [
            {
              key: 'proxy_service_id',
              opt: 'LIKE',
              type: 'S',
              value: row.id
            }
          ]
          versionQuery({
            filters: filters,
            orderby: 'updateon',
            pageNum: 1,
            pageSize: 1000,
            sort: 'desc'
          }).then((res) => {
            res.data.list.forEach((item) => {
              item.updateon = getFormateDate(
                item.updateon,
                'yyyy-MM-dd hh:mm:ss'
              )
            })
            this.oldData = res.data.list
            this.oldDialog = true
          })
          break
        case 'ref':
          vm.refs(row, false)
          break
        case 'edit':
          vm.editData(row, false)
          break
        case 'editflow':
          vm.currentRow = row
          vm.type = 'flows'
          break
        case 'clone':
          this.rows = row
          this.cloneType =
            row.ftype === '消息流'
              ? 'flow'
              : row.ftype === '代理服务'
              ? 'agency'
              : row.ftype === '业务服务'
              ? 'business'
              : 'resource'
          this.dialogClone = true
          break
        case 'del':
          this.$confirm('是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let names
            if (['WSDL', 'JSLT', 'XSLT'].indexOf(row.stype) !== -1) {
              names = '资源文件'
            } else if (row.stype === 'sql构建器') {
              names = row.stype
            } else {
              names = row.ftype
            }
            // 调用删除函数
            vm.delData(names, row)
          })
          break
      }
    },
    handleNodeClick(row, column) {
      this.types = this.options[0].value
      if (row.ftype === '项目') {
        this.project = row
      }
      if (
        (row.children && row.ftype === '项目' && row.name !== '所有项目') ||
        row.ftype !== '项目'
      ) {
        this.tableList = []
        if (row.children) {
          this.tableList = row.children.filter(
            (item) => item.ftype !== '连接器'
          )
        } else {
          if (row.ftype !== '连接器') this.tableList.push(row)
        }
        return
      }
      this.loadingS = true
      const vm = this
      const filters = [
        {
          key: 'level',
          opt: 'LIKE',
          type: 'S',
          value: 2
        },
        {
          key: 'project_id',
          opt: 'LIKE',
          type: 'S',
          value: row.id
        }
      ]
      vm.getTreeData(filters, row, column)
    },
    getTreeData(Efilters, row, col) {
      const vm = this
      if (!Efilters) {
        Efilters = [
          {
            key: 'level',
            opt: 'LIKE',
            type: 'S',
            value: 1
          }
        ]
      }
      let pageSize
      if (Efilters.length === 1) {
        pageSize = 1000
      } else {
        pageSize = vm.page.pageSize
      }
      vm.loadingS = true
      exportDatas({
        filters: Efilters,
        orderby: 'updateon',
        sort: 'desc',
        pageNum: vm.page.pageNum,
        pageSize: pageSize
      })
        .then((res) => {
          console.log('打印数据', res)
          vm.loadingS = false
          if (Efilters.length > 1) {
            res.data.list.forEach((item) => {
              item.updateon = getFormateDate(
                item.updateon,
                'yyyy-MM-dd hh:mm:ss'
              )
            })
            if (vm.project.id && !vm.project.children) {
              row.children = res.data.list.filter(
                (item) => item.ftype !== '适配器'
              )
              vm.loadingT = !vm.loadingT
            }
            vm.tableList = res.data.list.filter(
              (item) => item.ftype !== '适配器'
            )
            vm.page.total = res.data.total
          } else {
            const trees = [
              {
                ftype: '项目',
                name: '所有项目',
                id: 0,
                children: []
              }
            ]
            trees[0].children = res.data.list.filter(
              (item) => item.ftype !== '连接器'
            )
            vm.treeData = trees
          }
        })
        .catch((e) => {
          vm.loadingS = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.serach {
  .tree {
    height: calc(100vh - 40px);
    background: #fff;
    overflow-y: auto;
    width: 15%;
    min-width: 100px;
    min-height: 500px;
    display: inline-block;
    float: left;
  }

  .searchinput {
    // border: 1px solid #2d42af;
    margin-top: 20px;
    width: 90%;
    margin-left: 10px;
  }

  .list {
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    margin-left: 10px;
    min-width: 700px;
    width: calc(85% - 10px);
    height: calc(100vh - 40px);
    display: inline-block;
    float: right;
    min-height: 500px;

    .tableHeight {
      min-height: 400px;
      height: calc(100% - 140px);
      margin-bottom: 5px;
    }
  }
}
</style>
