<template>
  <div class="agencyinfo">
    <el-form ref="formData" :model="formData" :rules="rules" label-width="120px">
      <h3 style="z-index: 999;position: relative;">
        <el-button type="primary" @click="submit" class="float-r" v-if="isShowSubmit">提交</el-button>
        <!-- <el-button type="primary" @click="showMsg" class="float-r mr-15" v-if="currentRow.id">依赖检测</el-button> -->
      </h3>
      <!-- 信息tab页 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="一般信息" name="first">
          <div class="formGroup">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="名称：" prop="name">
                  <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="说明：">
                  <el-input type="textarea" v-model="formData.description"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消息定义" name="second">
          <div class="formGroup">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="消息类型：" prop="messageType">
                  <el-select v-model="formData.messageType" clearable placeholder="请选择" @change="messageTypeChange"
                    style="width: 100%;" :disabled="!!currentRow.id">
                    <el-option v-for="item in messageList" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="报文格式：" prop="payloadType" v-if="formData.messageType">
                  <el-radio-group v-model="formData.payloadType" @change="payloadTypeChange"
                    :disabled="!!currentRow.id">
                    <el-radio v-for="item in payloadTypeList" :label="item.value" :key="item.value"
                      v-show="item.isShow">
                      {{  item.name  }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="定义文件类型：" prop="defineFileType" v-if="formData.payloadType">
                  <el-select v-model="formData.defineFileType" disabled placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in defineFileTypeList" :key="item.name" :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="请求报文：" prop="objname" v-if="formData.defineFileType">
                  <!-- <el-input v-model="formData.objname" suffix-icon="el-icon-search" @focus="chooseDefineFile">
                  </el-input> -->
                  <span v-if="formData.objname">{{  formData.objname  }}</span>
                  <span v-else style="color:#D3D3D3;">选择请求报文</span>
                  <el-button @click="chooseDefineFile" type="primary" style="margin-left:60px;">选择文件</el-button>
                </el-form-item>
                <!-- <el-form-item v-if="fileList1.length > 0 && formData.payloadType === 'json'">
               <div>字段名</div>
               <el-tree :data="fileList1" :props="defaultProps" @node-click="handleNodeClick">
                 <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;" slot-scope="{ node, data }">
                   <div>{{ data.name }}</div>
                 </div>
               </el-tree>
             </el-form-item> -->
                <el-form-item label="响应报文：" prop="objname1" v-if="formData.defineFileType === 'jsd'">
                  <!-- <el-input v-model="formData.objname1" suffix-icon="el-icon-search" @focus="chooseDefineFile2">
                  </el-input> -->
                  <span v-if="formData.objname1" class="changgename">{{  formData.objname1  }}</span>
                  <span v-else style="color:#D3D3D3;">选择响应报文</span>
                  <el-button @click="chooseDefineFile2" type="primary" style="margin-left:60px;">选择文件</el-button>
                </el-form-item>
                <!-- <el-form-item v-if="fileList2.length > 0 && formData.payloadType === 'json'">
               <div>字段名</div>
               <el-tree :data="fileList2" :props="defaultProps" @node-click="handleNodeClick">
                 <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;" slot-scope="{ node, data }">
                   <div>{{ data.name }}</div>
                 </div>
               </el-tree>
             </el-form-item> -->
                <el-form-item label="端点：" prop="serviceParamsMap.binding"
                  v-if="formData.defineFileType && formData.messageType.toUpperCase() !== 'REST'">
                  <el-select v-model="formData.serviceParamsMap.binding" clearable placeholder="请选择"
                    style="width: 100%;">
                    <el-option v-for="item in ports" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="formData.objname || formData.objname1" label="服务参数" name="seven">
          <div v-if="formData.payloadType === 'json'">
            <div>
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-form-item label="请求报文：">
                    <div>字段名</div>
                    <el-tree :data="fileList1" :props="defaultProps">
                      <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;"
                        slot-scope="{ node, data }">
                        <div>{{  data.name  }}</div>
                      </div>
                    </el-tree>
                  </el-form-item>
                  <el-form-item label="响应报文：">
                    <div>字段名</div>
                    <el-tree :data="fileList2" :props="defaultProps">
                      <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;"
                        slot-scope="{ node, data }">
                        <div>{{  data.name  }}</div>
                      </div>
                    </el-tree>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-if="formData.payloadType === 'xml'">
            <el-tabs v-model="activeNamesss" type="card" @tab-click="handleClicks">
              <el-tab-pane v-for="(it, indx) in typeList" :key="indx" :label="it.type" :name="it.type" />
            </el-tabs>
            <el-form-item>
              <div>字段名</div>
              <el-tree :data="fileList1" :props="defaultProps">
                <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;"
                  slot-scope="{ node, data }">
                  <div>{{  data.name  }}</div>
                </div>
              </el-tree>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="currentRow.id" label="依赖检测" name="third">
          <depend-onthe-test type="flow" :formData="formData" :titleName="titleName" :dialogVisible="dialogVisible" />
        </el-tab-pane>
      </el-tabs>
      <!--消息定义-->
      <!--      <message-definition ref="messageDefinition" :formData="formData" :httpMethodArr="httpMethod" />-->

      <choose-resourcefile-dialog v-model="resourcefileVisible" :seleted-id="chickId1" :defineFileType="defineFileType"
        @confirm="handleResourcefile(arguments)" />
      <choose-resourcefile-dialog v-model="resourceFileVisible2" :seleted-id="chickId2" :defineFileType="defineFileType"
        @confirm="handleResourceFile2(arguments)" />
    </el-form>
    <!-- <depend-onthe-test v-model="flowVisible" :showDependOtherFlag="showDependOtherFlag" type="flow" :formData="formData" :titleName="titleName">
    </depend-onthe-test> -->
  </div>
</template>

<script>
import DependOntheTest from '@/components/Dependonthetest/Dependonthetest'
import ChooseResourcefileDialog from '@/components/resourcefile/ChooseResourcefileDialog'
import { saveFlow, getFlowDetail } from '@/api/esb_service'
import { checkFormData } from '@/utils/common'
// import MessageDefinition from '@/components/messageDefinition'
import EsbServiceInfoMixins from '@/mixins/esb_service_info_mixins'
import { createNamespacedHelpers } from 'vuex'

const { mapMutations, mapGetters } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceInfoMixins],
  components: {
    // MessageDefinition,
    ChooseResourcefileDialog,
    DependOntheTest
  },
  data() {
    return {
      showDependOtherFlag: true, // 是否显示依赖项
      formData: {
        serviceParamsMap: {}
      },
      dialogVisible: false,
      flowVisible: false,
      activeName: 'first',
      titleName: '消息流'
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {
      }
    }
  },
  watch: {

    value: {
      immediate: true,
      handler: function (val) {
        this.dialogVisible = val
        this.$nextTick(() => {
          this.$refs.formData.clearValidate()
        })
        this.formData = {
          messageType: 'REST',
          payloadType: 'json',
          serviceParamsMap: {},
          connectorSrvParamsMap: {}
        }
        this.httpMethod = ['POST']
        this.analysisData = ''
        this.$set(this.currentRow, 'changetime', Date.parse(new Date()))
      },
      deep: true
    },
    dialogVisible(val) {
      this.$emit('input', val)
    },
    currentRow: {
      immediate: true,
      handler: function (val) {
        if (val && val.id) {
          console.log('打印重复调用接口的数据',val)
          this.getFlowDetail(val.id)
        }
      },
      // deep: true
    }
  },
  computed: {
    ...mapGetters(['projectID'])
  },
  methods: {
    // 切换
    handleClicks(tab) {
      this.fileList1 = []
      this.typeList.map(item => {
        if (item.type === tab.name) {
          this.fileList1.push(item.content)
        }
      })
    },
    ...mapMutations(['setPayloadType']),
    getFlowDetail(id) {
      const vm = this
      getFlowDetail(id).then((rt) => {
        console.log(rt)
        if (rt.status === '200' && rt.data) {
          vm.formData = rt.data
          if (rt.data.defineFileInfo) {
            vm.formData.objname = rt.data.defineFileInfo.name
          }
          vm.formData.messageType = rt.data.messageType.toUpperCase()
          if (!vm.formData.serviceParamsMap) {
            vm.$set(this.formData, 'serviceParamsMap', {})
          }
          this.setPayloadType(this.formData.payloadType)
        }
      }).catch(() => {
      })
    },
    async submit() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          delete this.formData.connectorSrvParamsMap

          this.formData.projectId = this.projectID
          this.formData.messageType = this.formData.messageType.toLowerCase()
          saveFlow(this.formData).then((rt) => {
            if (rt.status === '200') {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$emit('confirm')
            }
          }).catch(err => {
            const data = err.data || []
            const hint = [
              { fieName: '名称', field: 'name' },
              { fieName: '说明', field: 'description' },
              { fieName: '目标', field: 'targetService.name' },
              { fieName: '消息类型', field: 'messageType' },
              { fieName: 'Http Method', field: 'serviceParamsMap.httpMethod' },
              { fieName: '报文格式', field: 'payloadType' },
              { fieName: '定义文件类型', field: 'defineFileType' },
              { fieName: '请求报文', field: 'defineFile' },
              { fieName: '响应报文', field: 'secondDefineFile' },
              { fieName: '端点', field: 'serviceParamsMap.binding' },
              { fieName: '协议', field: 'protocol' },
              { fieName: '适配器', field: 'connector.name' },
              { fieName: '端点uri', field: 'uri' }
            ]
            this.formData.messageType = this.formData.messageType.toUpperCase()
            checkFormData(data, hint)
          })
        }
      })
    },
    showMsg(showDependOther) {
      this.flowVisible = true
      if (!showDependOther) {
        this.showDependOtherFlag = false
      }
    }

  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.changgename {
  cursor: pointer;
}
</style>
