<template>
  <div class="fullheight">
    <el-dialog
      width="60%"
      title="服务编排"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <el-form :model="formData" v-form data-vv-scope="eipServiceForm">
        <el-row :gutter="0" justify="start" align="top" type="flex">
          <el-button
            icon="el-icon-plus"
            size="mini"
            @click="addRows()"
            style="margin-bottom:5px;"
            plain
            >添加</el-button
          >
        </el-row>
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-tr">
              <td>接口名称</td>
              <td>输入参数</td>
              <td>输出参数</td>
              <td>操作</td>
            </tr>
            <tr v-for="(column, index) in nodeList" :key="index">
              <td width="190px">
                <ht-select
                  v-model="column.alias"
                  :filterable="true"
                  :options="serviceList"
                  :props="serviceProps"
                  @change="serviceChange(column, column.alias)"
                  :validate="{required: true}"
                  placeholder="请选择接口"
                />
              </td>
              <td>
                <table cellspacing="0" cellpadding="0" border="0">
                  <tr v-for="(input, index1) in column.inputs" :key="index1">
                    <td width="30%">
                      <span>{{ input.key }}</span>
                    </td>
                    <td>
                      <ht-select
                        v-model="input.value"
                        class="ht"
                        :options="inputData"
                        :props="{key: 'id', value: 'desc'}"
                        :clearable="true"
                        filterable
                      >
                        <template slot-scope="{options}">
                          <el-option-group
                            v-for="group in options"
                            :key="group.id"
                            :label="group.desc"
                          >
                            <div
                              v-if="
                                group.children[0] && group.children[0].children
                              "
                            >
                              <el-option-group
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                              >
                                <el-option
                                  v-for="field in item.children"
                                  :key="field.id"
                                  :label="field.desc"
                                  :value="field.name"
                                >
                                </el-option>
                              </el-option-group>
                            </div>
                            <div v-else>
                              <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                                :value="item.name"
                              >
                              </el-option>
                            </div>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <table cellspacing="0" cellpadding="0" border="0">
                  <tr v-for="(output, index2) in column.outputs" :key="index2">
                    <td width="30%">
                      <span>{{ output.key }}</span>
                    </td>
                    <td>
                      <ht-select
                        v-model="output.value"
                        class="ht"
                        :options="outputData"
                        :props="{key: 'id', value: 'desc'}"
                        :clearable="true"
                        filterable
                      >
                        <template slot-scope="{options}">
                          <el-option-group
                            v-for="group in options"
                            :key="group.id"
                            :label="group.desc"
                          >
                            <div
                              v-if="
                                group.children[0] && group.children[0].children
                              "
                            >
                              <el-option-group
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                              >
                                <el-option
                                  v-for="field in item.children"
                                  :key="field.id"
                                  :label="field.desc"
                                  :value="field.name"
                                >
                                </el-option>
                              </el-option-group>
                            </div>
                            <div v-else>
                              <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                                :value="item.name"
                              >
                              </el-option>
                            </div>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </td>
                  </tr>
                </table>
              </td>
              <td width="80px" style="text-align: center;">
                <el-button
                  icon="el-icon-delete"
                  class="btn-padding"
                  @click="nodeList.remove(column)"
                ></el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
      <div slot="footer" style="text-align: right;">
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <el-button type="primary" @click="saveData">{{
          $t('eip.common.save')
        }}</el-button>
       
      </div>
    </el-dialog>
  </div>
</template>
<script>
import req from '@/request.js'

export default {
  name: 'eip-service-dialog',
  props: ['defId', 'value'],
  data() {
    return {
      dialogVisible: false,
      thisDefId: '',
      nodeId: '',
      data: [],
      inputData: [],
      outputData: [],
      serviceProps: {key: 'alias', value: 'name'},
      formData: {},
      nodeList: [],
      serviceList: [],
      valueList: []
    }
  },
  mounted() {
    this.loadServiceList()
    this.$validator = this.$root.$validator
  },
  methods: {
    loadServiceList() {
      req
        .get(
          window.context.portal + '/portal/portalServiceChoreography/v1/getList'
        )
        .then(resp => {
          this.serviceList = resp.data
        })
    },
    showDialog() {
      this.dialogVisible = true
    },
    beforeCloseDialog() {
      this.nodeList = []
      this.dialogVisible = false
    },
    addRows() {
      let item = {
        alias: '',
        type: 'service',
        inputs: [],
        outputs: []
      }
      this.nodeList.push(item)
    },
    serviceChange(row, change) {
      let _this = this
      row.inputs = []
      row.outputs = []
      if (change && change != '') {
        for (let i = 0; i < this.serviceList.length; i++) {
          let item = this.serviceList[i]
          if (change == item.alias) {
            let service = JSON.parse(JSON.stringify(item))
            let flowData = JSON.parse(service.flowDataJson)
            let nodeList = flowData.nodeList
            if (nodeList && nodeList.length > 0) {
              //输入参数
              let inputData = nodeList[0]
              let inputAry = inputData.params.input
              if (inputAry && inputAry.length > 0) {
                for (let j = 0; j < inputAry.length; j++) {
                  let obj = inputAry[j]
                  if (obj.type == '4') {
                    let input = {}
                    input.key = obj.key
                    input.value = ''
                    row.inputs.push(input)
                  }
                }
              }
              //输出参数
              let outputData = nodeList[nodeList.length - 1]
              let outputAry = outputData.params.output
              if (outputAry && outputAry.length > 0) {
                for (let j = 0; j < outputAry.length; j++) {
                  let obj = outputAry[j]
                  let output = {}
                  output.key = obj.key
                  output.value = ''
                  row.outputs.push(output)
                }
              }
            }
            break
          }
        }
      }
    },
    saveData() {
      let _this = this
      this.$validator.validateAll('eipInterfaceForm').then(result => {
        if (result) {
          let formData = JSON.parse(JSON.stringify(this.nodeList))
          let result =
            'scriptImpl.executeServiceJob(' +
            "'" +
            JSON.stringify(formData) +
            "'" +
            ')'
          this.$emit('input', result)
          this.$emit('onConfirm', result)
          this.beforeCloseDialog()
        } else {
          let arr = this.$validator.errors.items.filter(
            item => item.scope == 'eipInterfaceForm'
          )
          let errorLength = arr.length
          this.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    }
  },
  created() {
    let this_ = this
    this.thisDefId = this.defId
    let isRemoveSub = true
    let includeBpmConst = true
    let bpmForm = true
    req
      .post(window.context.bpmModel + '/flow/node/v1/varTree', {
        defId: this.thisDefId,
        nodeId: this.nodeId,
        includeBpmConstants: includeBpmConst,
        removeSub: isRemoveSub,
        bpmForm: bpmForm
      })
      .then(response => {
        let data = response.data
        if (data && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            let obj = data[i]
            if (obj.id == '0') {
              //表单变量
              let arys = obj.children
              if (arys && arys.length > 0) {
                for (let j = 0; j < arys.length; j++) {
                  let table = arys[j]
                  let boDefAlias = table.boDefAlias
                  let filedAry = table.children
                  if (filedAry && filedAry.length > 0) {
                    for (let k = 0; k < filedAry.length; k++) {
                      let field = filedAry[k]
                      field.name = boDefAlias + '.' + field.name
                    }
                  }
                }
              }
            }
          }
        }
        let outputData = JSON.parse(JSON.stringify(data))
        if (outputData && outputData.length > 0) {
          for (let i = 0; i < outputData.length; i++) {
            let obj = outputData[i]
            if (obj.id != '0') {
              //流程变量
              let vars = obj.children
              if (vars && vars.length > 0) {
                for (let j = 0; j < vars.length; j++) {
                  let item = vars[j]
                  if (item.nodeId || item.nodeId == '') {
                    continue
                  } else {
                    vars.splice(j, 1)
                    j--
                  }
                }
              }
            }
          }
        }

        this_.inputData = data
        this_.outputData = outputData
      })
  }
}
</script>

<style lang="scss" scoped>
.typeBtn {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}

.btn-padding {
  padding: 5px;
}
.linkageTable-tr td {
  text-align: center;
}
.ht {
  margin-top: 10px;
}
</style>