<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" @click="targetVisible = true">{{stageData.name ? stageData.name : 'SAP适配器'}}</el-link>
          <i class="el-icon-arrow-right"></i>
        </span>
        <span class="isrequired">*</span>
        <b class="ml-5">的SAP适配器</b>
      </el-row>
    </div>
    <choose-target-dialog :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 ChooseTargetDialog from '@/components/target/ChooseTargetDialog'
import { getBusinessServiceDetail } from '@/api/esb_service'
export default {
  name: 'Report',
  components: {
    ChooseTargetDialog
  },
  data() {
    return {
      icon: icon,
      enable: enable,
      targetVisible: false
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    },
    flowId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  watch: {
    stageData: {
      handler: function(val) {
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleTarget(data) {
      getBusinessServiceDetail(data.id).then(res => {
        console.log(res)
        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, 'connectorId', data.connectorId)
        this.$set(this.stageData, 'functionName', res.data.connectorSrvParamsMap.sapFunNamePath)
      })
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
  .service {
    display: inline-block;
    line-height: 20px;
  }
  .el-icon-arrow-left, .el-icon-arrow-right {
    vertical-align: middle;
  }
</style>
