<template>
  <el-tabs v-model="activeName" @tab-click="tabClick">
    <el-tab-pane label="被依赖" name="rely" class="pane" >
      <span>该资源被以下资源依赖</span>
      <el-tabs v-model="activeName1" type="card"  width="20px"  >
        <el-tab-pane label="消息流" name="third" v-if="type !== 'connect'"  >
          <ul class="ulList" v-if="agencyListRelyProxy.length !== 0 ">
            <li v-for="item in agencyListRelyProxy" :key="item.id" >{{item.name }}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
        <el-tab-pane label="代理服务" name="two1" v-if="type !== 'agency'" >
          <ul class="ulList" v-if="flowRelyPROXY.length !== 0 ">
            <li v-for="item in flowRelyPROXY" :key="item.id">{{item.name}}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
        <el-tab-pane label="业务服务" name="three2" v-if="type === 'connect' || type ==='resource'">
          <ul class="ulList" v-if="agencyListQuoteBusiness.length !== 0 ">
            <li v-for="item in agencyListQuoteBusiness" :key="item.id">{{item.name}}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

    <!-- <el-tab-pane  label="依赖于" name="quote" v-if="type !== 'resource' && type !== 'connect' && showDependOtherFlag" > -->
    <el-tab-pane  label="依赖于" name="quote"  >
      <span>该资源依赖于以下资源</span>
      <el-tabs v-model="activeName2" type="card" >
        <el-tab-pane label="消息流" name="third" v-if="type !== 'business'" >
          <ul class="ulList" v-if="agencyListRelyProxy.length !== 0 ">
            <li v-for="item in agencyListRelyProxy" :key="item.id">{{item.name }}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
        <el-tab-pane label="业务服务" name="two" v-if="type !== 'business'">
          <ul class="ulList" v-if="agencyListQuoteBusiness.length !== 0 ">
            <li v-for="item in agencyListQuoteBusiness" :key="item.id">{{item.name}}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
        <el-tab-pane label="资源文件" name="three" v-if="type !== 'resource' && type !== 'connect'" >
          <ul class="ulList" v-if="agencyListQuoteRESOURCE.length !== 0">
            <li v-for="item in agencyListQuoteRESOURCE" :key="item.id">{{item.name}}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
        <el-tab-pane label="代理服务" name="five" v-if="type === 'flow'">
          <ul class="ulList" v-if="flowRelyPROXY.length !== 0 ">
            <li v-for="item in flowRelyPROXY" :key="item.id">{{item.name}}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
        <el-tab-pane label="适配器" name="four" v-if="type !== 'flow'">
          <ul class="ulList" v-if="agencyListQuoteCONNECTOR.length !== 0 ">
            <li v-for="item in agencyListQuoteCONNECTOR" :key="item.id">{{item.name}}</li>
          </ul>
          <p v-else>暂无数据</p>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { proxyservicedepent,
  proxyservicedepend,
  businessservicedependent,
  businessservicedependend,
  listflowdependened,
  listflowdependenet,
  connectordependened,
  resourcefiledepend } from '@/api/esb_service'
export default {
  data() {
    return {
      activeName: 'rely',
      activeName1: 'third',
      activeName2: 'third',
      agencyListQuote: '',
      businessRely: '',
      title: '',
      // <!-- 消息流 代理服务 业务服务  资源文件  适配器 -->
      flowRelyPROXY: [],
      agencyListRelyProxy: [],
      agencyListQuoteRESOURCE: [],
      agencyListQuoteCONNECTOR: [],
      agencyListQuoteBusiness: []
    }
  },
  mounted(){
  
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    titleName: {
      type: String,
      default: ''
    },
    showDependOtherFlag: {
      type: Boolean,
      default: true
    },
    dialogVisible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.activeName1 = this.type === 'connect' ? 'two1' : 'third'
        this.activeName2 = this.type === 'business' ? 'three' : 'third'
        this.tabClick({
          name: this.activeName
        })
      }
    },
    dialogVisible: {
      handler(val) {
        console.log('val1111', val)
        if (val) {
          setTimeout(() => {
            this.tabClick({
              name: 'rely'
            })
            this.tabClick({
              name: 'quote'
            })
          }, 500)
        }
      },
      immediate: true
    }
  },
  created() {
    // const table = {
    //   name: 'rely'
    // }
    // this.tabClick(table)
  },
  methods: {
    // 退出 隐藏
    cancel() {
      this.dialogVisible = false
    },
    tabClick(tab) {
      console.log('tab name2222', tab.name)
      console.log('type333', this.type)
      // type connect:适配器    agency: 代理服务     business:业务服务     resource:资源文件    flow:消息流
      if (tab.name === 'rely') {
        if (this.type === 'connect') {
          this.connectordependened()
        } else if (this.type === 'agency' ) {
          this.proxyservicedepend()
        } else if (this.type === 'business') {
          this.businessservicedependend()
        } else if (this.type === 'resource') {
          this.resourcefiledepend()
        } else if (this.type === 'flow') {
          this.listflowdependened()
        }
      } else {
        if (this.type === 'agency') {
          this.proxyservicedepent()
        } else if (this.type === 'business') {
          this.businessservicedependent()
        } else if (this.type === 'flow') {
          this.listflowdependenet()
        }
      }
    },
    // 代理服务页面  被依赖检测 数据
    proxyservicedepend() {
      console.log(this.formData.id, this.formData.id.length > 0)
      if (this.formData.id && this.formData.id.length > 0) {
        proxyservicedepend(this.formData.id)
          .then((res) => {
          // 消息流
            if (res.status === '200' && res.data) {
              this.agencyListRelyProxy = res.data.FLOW || []
            }
          })
      }
    },

    // 代理服务页面  依赖检测 数据
    proxyservicedepent() {
      if (this.formData.id && this.formData.id.length > 0) {
        proxyservicedepent(this.formData.id)
          .then((res) => {
            // 代理服务的 业务服务  适配器  资源文件
            if (res.status === '200' && res.data) {
              this.agencyListRelyProxy = res.data.FLOW || []
              this.agencyListQuoteBusiness = res.data.BUSINESS || []
              this.agencyListQuoteCONNECTOR = res.data.CONNECTOR || []
              this.agencyListQuoteRESOURCE = res.data.RESOURCE || []
            }
          }).catch((err) => {})
      }
    },

    // 业务服务   被依赖
    businessservicedependend() {
      businessservicedependend(this.formData.id)
        .then((res) => {
          if (res.status === '200' && res.data) {
            this.flowRelyPROXY = res.data.PROXY || []
            this.agencyListRelyProxy = res.data.FLOW || []
          }
        })
    },

    // 业务服务 依赖检测 数据
    businessservicedependent() {
      businessservicedependent(this.formData.id)
        .then((res) => {
        // 业务代理的 适配器    资源文件
          if (res.status === '200' && res.data) {
            this.agencyListQuoteCONNECTOR = res.data.CONNECTOR || []
            this.agencyListQuoteRESOURCE = res.data.RESOURCE || []
          // this.agencyListQuoteRESOURCE = this.agencyListQuoteRESOURCE.filter(item => item.id)
          }
        })
    },

    // 消息流 被依赖
    listflowdependened() {
      listflowdependened(this.formData.id)
        .then((res) => {
        // 消息流的 消息流   代理服务
          if (res.status === '200' && res.data) {
            this.agencyListRelyProxy = res.data.FLOW || []
            this.flowRelyPROXY = res.data.PROXY || []
            console.log(22222, this.flowRelyPROXY)
          }
        })
    },

    // 消息流  依赖
    listflowdependenet() {
      listflowdependenet(this.formData.id)
        .then((res) => {
        // 消息流的业务服务  代理服务   资源文件
          if (res.status === '200' && res.data) {
            this.agencyListQuoteBusiness = res.data.BUSINESS || []
            this.flowRelyPROXY = res.data.PROXY || []
            this.agencyListQuoteRESOURCE = res.data.RESOURCE || []
          }
        }).catch((err) => {
        })
    },

    // 资源文件 被依赖的 消息流 代理服务 业务服务
    resourcefiledepend() {
      console.log(999999, this.formData)
      resourcefiledepend(this.formData.id)
        .then((res) => {
          if (res.status === '200' && res.data) {
            this.agencyListRelyProxy = res.data.FLOW || []
            this.flowRelyPROXY = res.data.PROXY || []
            this.agencyListQuoteBusiness = res.data.BUSINESS || []
          }
        })
    },

    // 适配器页面  依赖检测 数据
    connectordependened() {
      connectordependened(this.formData.id)
        .then((res) => {
        // 适配器 代理服务  业务服务
          if (res.status === '200' && res.data) {
            this.flowRelyPROXY = res.data.PROXY || []
            this.agencyListQuoteBusiness = res.data.BUSINESS || []
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.ulList {
  width: 80%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
  color: rgb(0,153,249);
  li {
    height: 40px;
    line-height: 40px;
  }
}
/deep/ .el-tabs__item{
  text-align: center;
  padding: 0 10px;
  height:30px;
  line-height: 30px;
}
/deep/ .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item{
  padding: 0 10px;
}
/deep/ #tab-rely,/deep/ #tab-quote{
  font-size: 16px;
}
// p{
//   margin-right: 20px;
// }
</style>
