<template>
  <div class="module-cont">
    <div class="add-perate-icon" @click.stop="addPerate">
      <img :src="icon" alt="" title="服务标注">
      <img v-if="typeof(stageData.enable) != 'undefined' && stageData.enable === false" class="perate-enable"
        :src="enable" alt="" title="禁用">
    </div>
    <div class="row-content">
      <el-row class="mt-5">
        <span class="service">
          <i class="el-icon-arrow-left"></i>
          <el-link type="primary" class="dis-inline" :nameId="this.nameId" @click="targetVisible = true">{{this.namesList.length > 0 ?
          this.namesList : '服务'}}</el-link>
          <i class="el-icon-arrow-right"></i>
        </span>
        <span class="isrequired">*</span>
        <b class="ml-5">广播式路由</b>
        <el-select v-if="isNames" v-model="names" clearable placeholder="请选择" style="width: 60%;">
          <el-option v-for="item in namesList" :key="item.name" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-row>
    </div>
    <choose-target-dialog1  :flowId="flowId" v-model="targetVisible" @confirm="handleTarget" />
  </div>
</template>

<script>
import icon from '@/assets/img/webservice_callout.gif'
import enable from '@/assets/img/enable.gif'
import ChooseTargetDialog1 from '@/components/target/ChooseTargetDialog1'
export default {
  name: 'Report',
  components: {
    ChooseTargetDialog1
  },
  data() {
    return {
      icon: icon,
      enable: enable,
      namesList: [],
      nameId: '',
      names: null,
      isNames: false,
      targetVisible: false
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    },
    flowId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  mounted(){
    // handeleName()
  },
  watch: {
    // names: {
    //   handler: function (val) {

    //     this.namesList.forEach(item => {
    //       if (item.operationName === val) {
    //         const items = {
    //           operationNamespace: item.nameSpace,
    //           operationName: item.operationName
    //         }
    //         console.log(items, '1244')
    //         this.$set(this.stageData, 'operation', items)
    //       }
    //     })
    //     // console.log(this.namesList,'打印namelist')
    //   },
    //   deep: true,
    //   immediate: true
    // },
    stageData: {
      handler: function (val) {
        console.log(val.routes, '打印数组')
        if (val.routes) {
          this.isNames = false
          if (val.routes.length > 0) {
            this.namesList = val.routes.map((item => item.name)).join(',')
          }

        } else { this.namesList = [] }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handeleName(){
       this.stageData.map(
        (item=>{this.nameId=item.id})
       )
    },
    handleTarget(data, name) {
      console.log(this.stageData,'打印this.stageData')
      let Arrays = []
      data.map((item => {
        let filter = {
          id: item.id,
          name: item.name,
          uri: item.uri,
          type: item.type,
          protocol: item.protocol,
          connectorSrvParamsMap: item.connectorSrvParamsMap,
          securityConfId: item.securityConfId,
          securityConf: item.securityConf,
          serviceType: item.serviceType,
          messageType: item.messageType
        }
        Arrays.push(filter)
      }))
      // console.log(data, name,1231244)
      if (data.messageType && data.messageType.toLowerCase() === 'soap' && name === 'business') {
        this.isNames = true
      }
      else {
        this.isNames = false
      }
      if (data.length > 0) {
        this.namesList = data.map(item => item.name).join(',')
        this.nameId = data.map(item => item.id).join(',')
        console.log(this.nameId,'打印nameid')

        // this.names = data.serviceParamsMap.operationList[0].operationName
        // console.log(this.namesList)
      }
 
      this.$set(this.stageData, 'name', data.name)
      this.$set(this.stageData, 'refId', data.id)
      this.$set(this.stageData, 'serviceType', data.type)
      this.$set(this.stageData, 'routes', Arrays)
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index)
    }
  }
}
</script>
)
<style lang="scss" scoped>
.service {
  display: inline-block;
  line-height: 20px;
}
.mt-5{
  width: 200px;
}
.el-icon-arrow-left,
.el-icon-arrow-right {
  vertical-align: middle;
}
</style>
