<template>
  <div class="project-page-content">
    <el-tabs v-model="activeName" class="projectNav" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in menuList"
        :key="index"
        :name="item.url"
        :label="item.name"
      >
        <div slot="label" >
          <span v-if="item.name !== '资源文件'">{{ item.name }}</span>
          <el-dropdown v-else @command="handleCommand" trigger="click" >
            <span class="el-dropdown-link">
              {{ dropdown || 'WSDL文档'
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item 
                v-for="(items, index) in item.subNodes"
                :keys="index"
                :command="items"
              >
                {{ items.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="project-name">
      <p>{{ projectName }}</p>
    </div>
    <el-row v-show="activeNames === '/project_list/project_page'">
      <!-- <el-col :span="12" class="content-title">{{ projectName }}</el-col> -->
      <el-col :span="12" class="content-title">
        <!-- <p>{{ projectName }} - {{ $route.matched[1].meta.title }}</p> -->
      </el-col>
      <el-col :span="12" class="content-add">
        <!--<el-button type="primary" @click="userHandle('add')"  >新增服务</el-button>-->
      </el-col>
      <!-- 头部 -->
      <el-col :span="24" class="content-header">
        <div class="content-box" style="{'background-color':'red'}">
          <el-row>
            <el-row :span="6" class="box-box">
              <el-col :span="6">
                <div class="right-box color-e85b33">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dailishezhi"></use>
                  </svg>
                </div>
              </el-col>
              <el-col :span="14" class="">
                <el-row>
                  <el-col :span="24" class="left-top">代理服务数量</el-col>
                  <el-col :span="24" class="left-bottom">{{
                    countStatistics.proxyServiceCount
                  }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <div class="img-right" @click="toTabs('agend')">
                  <img
                    src="../../../assets/img/button-right.png"
                    width="100%"
                    alt=""
                  />
                </div>
              </el-col>
            </el-row>
          </el-row>
        </div>
        <div class="content-box1">
          <el-row :span="6" class="box-box">
            <el-col :span="6">
              <div class="right-box color-e85b33">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyeyewu"></use>
                </svg>
              </div>
            </el-col>
            <el-col :span="14" class="">
              <el-row>
                <el-col :span="24" class="left-top">业务服务数量</el-col>
                <el-col :span="24" class="left-bottom">{{
                  countStatistics.businessServiceCount
                }}</el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <div class="img-right" @click="toTabs('business')">
                <img
                  src="../../../assets/img/button-right.png"
                  width="100%"
                  alt=""
                />
              </div>
            </el-col>
          </el-row>
        </div>



        <!-- <div class="content-box2">
          <el-row :span="6" class="box-box">
            <el-col :span="6">
              <div class="right-box color-e85b33">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-notification"></use>
                </svg>
              </div>
            </el-col>
            <el-col :span="14" class="">
              <el-row>
                <el-col :span="24" class="left-top">消息流数量</el-col>
                <el-col :span="24" class="left-bottom">{{
                  countStatistics.flowCount
                }}</el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <div class="img-right" @click="toTabs('flow')">
                <img
                  src="../../../assets/img/button-right.png"
                  width="100%"
                  alt=""
                />
              </div>
            </el-col>
          </el-row>
        </div> -->

        <div class="content-box2">
          <el-row :span="6" class="box-box">
            <el-col :span="6">
              <div class="right-box color-e85b33">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-notification"></use>
                </svg>
              </div>
            </el-col>
            <el-col :span="14" class="">
              <el-row>
                <el-col :span="24" class="left-top">消息流数量</el-col>
                <el-col :span="24" class="left-bottom">{{
                     countStatistics.flowCount
                }}</el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <div class="img-right" @click="toTabs('flow')">
                <img
                  src="../../../assets/img/button-right.png"
                  width="100%"
                  alt=""
                />
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="content-box3">
          <el-row :span="6" class="box-box">
            <el-col :span="6">
              <div class="right-box color-e85b33">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan"></use>
                </svg>
              </div>
            </el-col>
            <el-col :span="14" class="">
              <el-row>
                <el-col :span="24" class="left-top">资源文件数量</el-col>
                <el-col :span="24" class="left-bottom">{{
                  countStatistics.resourceCount
                }}</el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <div class="img-right" @click="toTabs('resource')">
                <img
                  src="../../../assets/img/button-right.png"
                  width="100%"
                  alt=""
                />
              </div>
            </el-col>
          </el-row>
        </div>

      </el-col>
      <!-- 常用服务 -->
      <el-col :span="24" class="commonlyUsed">
        <el-row class="title-border">
          <el-col :span="24" class="title-padding">
            <div class="title">已开发服务列表</div>
          </el-col>
          <el-col :span="24" class="commonlyUsed-right">
            <el-table
            ref="singleTable"
              :data="tableData"
              v-loading="loadingS"
              style="width: 100%"
          highlight-current-row
          type="selection"
            >
              <el-table-column type="index" label="序号"> </el-table-column>
              <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" 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="updatebyname"
                align="center"
                show-overflow-tooltip
                label="修改者"
              >
              </el-table-column>
              <el-table-column
                prop="updateon"
                align="center"
                show-overflow-tooltip
                label="最后修改日期"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width="220"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
              <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="debug" :enterable="false" placement="top">
                   <el-button class="icon-button" type="text" icon="el-icon-more" @click.native.prevent="operate(scope.row, 'debug')">
                   </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>
            <!-- <el-dialog :close-on-click-modal="false" title="代理服务定义" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="72%">
        <agency-info v-model="dialogFormVisible" :currentRow="currentRow" @confirm="handleSubmit()" />
      </el-dialog> -->
          </el-col>
        </el-row>
        <!-- <div class="block">
          <span class="demonstration"></span>
          <el-pagination background layout="prev, pager, next" :total="100">
          </el-pagination>
        </div> -->
      </el-col>
      <el-col :span="24" class="content-type">
        <el-row :gutter="18">
          <el-col :span="12" class="content-type-left">
            <el-row class="title-border">
              <el-col :span="24" class="title-padding">
                <div class="title">服务类型</div>
              </el-col>
            </el-row>
            <div class="content-type-echart">
              <echarts-Bin :list="connectorTypeStatistics" :id="'echartBin'" />
            </div>
          </el-col>
          <el-col :span="12" class="content-type-left">
            <el-row class="title-border">
              <el-col :span="24" class="title-padding">
                <div class="title">资源类型</div>
              </el-col>
            </el-row>
            <div class="content-type-echart">
              <echarts-Z :list="resourceTypeStatistics" :id="'echartZ'" />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div v-show="activeNames === '/project_list/agency_service'">
      <agency />
    </div>
    <div v-show="activeNames === '/project_list/business_service'">
      <business />
    </div>
    <div v-show="activeNames === '/project_list/message_flow'">
      <flow />
    </div>
    <!-- <div v-show="activeNames === '/project_list/project_page'">
      <connector />
    </div> -->
    <div v-show="activeNames.includes('/project_list/resource_file')">
      <resource :type="activeNames" />
    </div>
    <div v-show="activeNames === '/project_list/sql_builder'">
      <sqlbuilder />
    </div>
    <div v-show="activeNames === '/project_list/account'">
      <account />
    </div>
    <edit-dialog :type="type" :currentRow="currentRow" :title="titleR" @confirm="handleSubmit"></edit-dialog>
    <cloneSouce :type="cloneType" v-model="dialogClone" :row="rows" @confirm="cloneEnd" />
    <!-- <debugSouce v-model="dialogDebug" :row="rows" @confirm="debugEnd" :type="cloneType" /> -->
  </div>
</template>

<script>
import {
  getCountStatistics,
  getProxyService,
  getConnectorTypeStatistics,
  getResourceTypeStatistics,
  exportDatas
} from '@/api/project_list'
import echartsZ from './components/echartsZ.vue'
import echartsBin from './components/echartsBin.vue'
import agency from '../agency_service'
import sqlbuilder from '../sql_builder'
import account from '../account'
import business from '../business_service'
import debugSouce from '@/components/debug'
import flow from '../message_flow'
import connector from '../connector'
import resource from '../resource_file'
import editDialog from '../../search/searchEdit.vue'
import cloneSouce from '@/components/clone'
import {deleteSqlBuilder,querySqlBuilderList} from '@/api/esb_global_management'
import { getFormateDate } from '@/utils/common'
import { getAllGroups2, getNavAll3 } from '@/api/system_manage'
import { createNamespacedHelpers } from 'vuex'
import {
  queryBusinessService, queryProxyService, queryConnector, queryFlow, listFiles,
  deleteFlow, deleteBusinessService, deleteProxyService, deleteConnector, deleteResource,
  proxyservicedepent, businessservicedependent, listflowdependenet,
  proxyservicedepend, businessservicedependend, listflowdependened, resourcefiledepend,
} from '@/api/esb_service'

const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  components: {
    echartsBin,
    echartsZ,
    agency,
    business,
    flow,
    connector,
    sqlbuilder,
    account,
    resource,
    editDialog,
    cloneSouce,
    debugSouce,
  },
  data() {
    return {
      dialogDebug:false,
      rows: {},
      dialogClone:false,
      loadingS: false,
      dialogFormVisible: false,
      cloneType:'',
      dropdown: '',
      menuList: [],
      activeName: '/project_list/project_page',
      activeNames: '/project_list/project_page',
      currentPage3: 5,
      // activeName: 'first',
      countStatistics: {},
      proxyServiceList: [],
      connectorTypeStatistics: [],
      resourceTypeStatistics: [],
      tableData: [],
      dialogVisible: false,
      types: '',
      type:'',
      titleR: '',
      currentRow: {},
      loadingT: false,
      loadingS: false
    }
  },
  watch: {
    $route: {
      handler: function (to, from, next) {
        console.log(to, from, next, '!login')
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['projectID', 'projectName'])
  },
  created() {
    this.setProjectID(localStorage.getItem('projectID'))
    this.setProjectName(localStorage.getItem('projectName'))
  },
  mounted() {
    this.getNavigationMenu()
    this.getCountStatistics() // 获取头部统计数据
    this.getProxyService() // 常用服务
    this.getConnectorTypeStatistics() // 服务类型统计
    this.getResourceTypeStatistics() // 资源类型统计
    this.getTreeData()
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    handleCommand(command,nav) {
      console.log(command,nav, '?/?')
      this.dropdown = command.name
   
      document.getElementById('projectNames').textContent = command.name
      this.activeNames = command.url
      // this.resourceType = command.url.split('=')[1]
    },
    cloneEnd(statu) {
      this.dialogClone = false
      this.rows = {}
      this.cloneType = ''
      if (statu) {
        this.quickSearch()
      }
    },
    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
    },
    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
        }
      }
    },
    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()
      }
    },
    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'
            }
          })
          break
        case '消息流':
          queryFlow({ filters: filter }).then(res => {
            if (res.status === '200') {
              vm.currentRow = res.data.list[0]
              vm.type = 'flow'
            }
          })
          break
        case '代理服务':
          queryProxyService({ filters: filter }).then(res => {
            if (res.status === '200') {
              vm.currentRow = res.data.list[0]
              vm.type = 'agency'
            }
          })
          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 => {
            console.log('123',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
      }
    },
    toTabs(type) {
     console.log('打印类型',type)
      switch (type) {
        case 'agend':
          this.activeName = '/project_list/agency_service'
          this.activeNames = '/project_list/agency_service'
          document.getElementById('projectNames').textContent = '代理服务'
          break
        case 'business':
          this.activeName = '/project_list/business_service'
          this.activeNames = '/project_list/business_service'
          document.getElementById('projectNames').textContent = '业务服务'
          break
        case 'flow':
          this.activeName = '/project_list/message_flow'
          this.activeNames = '/project_list/message_flow'
          document.getElementById('projectNames').textContent = '消息流'
          break
        case 'resource':
          this.activeName = '/project_list/resource_file'
          this.activeNames = '/project_list/resource_file'
          document.getElementById('projectNames').textContent = '资源文件'
          break
      }
  
    },
    handleClick(tab, event) {
      document.getElementById('projectNames').textContent = tab.label
      if (this.activeNames !== tab.name) {
        this.activeNames = tab.name
      }
      this.getTreeData()
      this.getCountStatistics()
      this.getConnectorTypeStatistics()
    },
    // 获取头部统计数据
    getCountStatistics() {
      getCountStatistics(this.projectID)
        .then((rt) => {
          if (rt.status === '200') {
            console.log(this.countStatistics.proxyServiceCount,'获取头部数据')
            this.countStatistics = rt.data
          }
        })
        .catch((e) => {})
    },
    getNavigationMenu() {
      getAllGroups2().then((res) => {
        if (!res) return false
        var that = this
        getNavAll3(res.data[0].id).then((rt) => {
          console.log(rt, 'rt')
          rt.data.forEach((item) => {
            if (item.url === '/project_list') {
              // 首页
              that.menuList = item.subNodes || []
              console.log(that.menuList, '?.?')
            }
          })
        })
      })
    },
    // 常用服务
    getProxyService() {
      getProxyService(this.projectID, 8)
        .then((rt) => {
          if (rt.status === '200') {
            this.proxyServiceList = rt.data
          }
        })
        .catch((e) => {})
    },
    // 获取服务类型统计数据
    getConnectorTypeStatistics() {
      getConnectorTypeStatistics(this.projectID)
        .then((rt) => {
          if (rt.status === '200') {
            this.connectorTypeStatistics = rt.data
          }
        })
        .catch((e) => {})
    },
    // 获取资源类型统计数据
    getResourceTypeStatistics() {
      getResourceTypeStatistics(this.projectID)
        .then((rt) => {
          if (rt.status === '200') {
            this.resourceTypeStatistics = rt.data
          }
        })
        .catch((e) => {})
    },
  
    delData(name, item) {
      const vm = this
      switch (name) {
        case '代理服务':
          deleteProxyService(item.id).then(res => {
            console.log(res.status,'123')
            if(res.status==200){
              this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            })
            }
            vm.quickSearch()
            this.getCountStatistics()
            this.getConnectorTypeStatistics()
          }).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('资源被依赖，无法删除')
            } else {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1000
              })
            }
            vm.quickSearch()
            this.getCountStatistics()
            this.getConnectorTypeStatistics()
          }).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 => {
            if(res.status==200){
              this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            })
            }else{
              this.$message({
              message: '删除失败,资源文件被依赖',
              type: 'error',
              duration: 1000
            })
            }
            vm.quickSearch()
            this.getCountStatistics()
            this.getConnectorTypeStatistics()
          }).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()
            this.getResourceTypeStatistics()
            this.getCountStatistics()
          }).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: '资源被依赖，无法删除',
                type: 'error'
              })
            }
          })
          break
      }
    
    },
    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
        }
      ]
      vm.getTreeData(filters)
    },
    getTreeData(Efilters, row, col) {
      const vm = this
      Efilters = [
        {
          key: 'level',
          opt: 'LIKE',
          type: 'S',
          value: 2
        },
        {
          key: 'project_id',
          opt: 'LIKE',
          type: 'S',
          value: this.projectID
        },
      ]
      vm.loadingS = true
      exportDatas({
        filters: Efilters,
        orderby: 'updateon',
        sort: 'desc',
        pageNum: 1,
        pageSize: 10000
      })
        .then((res) => {
          vm.loadingS = false
          res.data.list.forEach((item) => {
            item.updateon = getFormateDate(item.updateon, 'yyyy-MM-dd hh:mm:ss')
          })
          vm.tableData = res.data.list
        })
        .catch((e) => {
          vm.loadingS = false
        })
    },
    operate(row, name) {
      const vm = this
      switch (name) {
        case 'refs':
          vm.refs(row, true)
          break
        case 'ref':
          vm.refs(row, false)
          break
        case 'edit':
          vm.editData(row)
          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 'debug':
          //   this.dialogDebug=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
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.img-right {
  transform: translateY(15px);
  cursor: pointer;
}
.round {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgb(79, 109, 229);
}
.project-page-content {
  // padding-bottom: 20px;
  position: relative;
  padding: 10px 10px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  // overflow: hidden;
  .projectNav /deep/ .el-tabs__nav-scroll {
    float: right;
  }
  .project-name {
    position: absolute;
    top: 0;
    left: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
  }
  .content-title {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 12px;
  }

  .content-add {
    text-align: right;
    margin-bottom: 18px;
  }

  .content-header {
    text-align: center;
    color: #fff;
    .mar-left-l {
      margin-left: 1.25%;
    }
    .content-box2,
    .content-box3,
    .content-box1,
    .content-box {
      border-radius: 4px;
      width: 19%;
      background-color: rgb(31, 179, 180);
      float: left;
      margin-left: 10px;
      .box-box {
        padding: 20px;
        text-align: left;
        .left-top {
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          width: 110px;
        }
        .left-bottom {
          text-align: center;
          font-weight: bold;
          font-size: 28px;
          margin-top: 6px;
          color: #fff;
        }
        .right-box {
          width: 42px;
          height: 42px;
          margin: 8px auto;
          border-radius: 50%;
          color: #fff;
          text-align: center;
          font-size: 42px;
          line-height: 42px;
        }
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        // .color-e85b33 {
        //   background: #e85b33;
        // }
      }
    }
    .content-box3 {
      background-color: rgb(232, 130, 43);
    }
    .content-box1 {
      background-color: rgb(65, 136, 244);
    }
    .content-box {
      background-color: #5770e9;
    }
  }

  .commonlyUsed {
    margin-top: 18px;
    background: #fff;

    .commonlyUsed-content {
      padding: 12px;

      .commonlyUsed-info {
        .info-box {
          background: #f7f7f7;
          margin-bottom: 12px;
          padding: 22px;

          .info-word {
            font-size: 17px;
            font-weight: bold;
            margin-top: 5px;
          }

          .info-icon {
            text-align: center;
            font-size: 20px;
            width: 28px;
            height: 28px;
            background: #fff;
            border-radius: 5px;
            line-height: 28px;
            color: #0f16ea;
          }

          .info-describe {
            height: 28px;
            color: #9a9393;
            font-size: 13px;
            padding: 8px 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .info-name {
            font-size: 14px;
            font-weight: bold;
          }

          .mar-top-10 {
            margin-top: 10px;
          }
        }
      }
    }
  }

  .content-type {
    margin-top: 18px;

    .content-type-left {
      height: 360px;
      float: left;

      .content-type-echart {
        width: 100%;
        height: 300px;
        background: #fff;
      }

      .resources {
        background: #fff;

        .resources-box {
          padding: 0 24px;

          .resources-box-border {
            border-bottom: 1px solid #f1f5ff;
            padding: 19px 0px;
          }
        }

        .resources-left {
          font-size: 15px;
          font-weight: 500;

          .resources-icon {
            color: #3457d8;
            font-size: 20px;
            margin-right: 8px;
          }
        }

        .resources-right {
          text-align: right;
          font-size: 15px;
          color: #b7aeae;
        }
      }

      .resources :hover {
        background: #f1f5ff;
        color: #5473e8;
      }

      .resources :hover .resources-right {
        color: #5473e8;
      }

      .record {
        padding: 15px 0px;
        background: #fff;

        .record-box {
          padding: 0 24px;

          .record-box-border {
            border: 1px solid #efefef;
            padding: 10px 0px;
            margin-bottom: 12px;
          }
        }

        .record-left {
          font-size: 15px;
          font-weight: 500;
          padding-left: 12px;
        }

        .record-user {
          font-size: 15px;
          color: #b7aeae;
        }

        .record-right {
          text-align: right;
          font-size: 15px;
          color: #b7aeae;
          padding-right: 12px;
        }

        .record-box :hover {
          border-color: #5473e8 !important;
        }

        .record-box :hover .record-user {
          color: #5473e8;
        }

        .record-box :hover .record-left {
          color: #5473e8;
        }

        .record-box :hover .record-right {
          color: #5473e8;
        }
      }
    }

    .mar-left {
      margin-left: 18px;
    }
  }

  .title-border {
    border-bottom: 1px solid #efefef;
    background: #fff;
  }

  .title-padding {
    padding: 16px 18px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #1536da;
    padding-left: 10px;

    .title-right {
      float: right;
      color: #b7aeae;
      font-size: 15px;
      //cursor: pointer;
    }
  }
}
</style>
