<template>
  <el-dialog :close-on-click-modal="false" @close="closeDialog" title="克隆资源" class="scrollbar-dialog" :visible.sync="dialog" width="900px" top="5vh" append-to-body>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="当前资源名">
        <p>{{ruleForm.oldname}}</p>
      </el-form-item>
      <el-form-item label="新资源名" prop="newname">
        <el-input v-model="ruleForm.newname" @input="$forceUpdate()"></el-input>
      </el-form-item>
      <el-form-item v-if="cloneRow.hasOwnProperty('uri')" label="端口uri" prop="uri">
        <el-input v-model="ruleForm.uri" @input="$forceUpdate()"></el-input>
      </el-form-item>
      <el-form-item label="位置">
        <el-row>
          <el-col :span="12">
              <el-tree class="autoH" :data="treeData" node-key="id" :props="props" @node-click="handleNodeClick"></el-tree>
          </el-col>
          <el-col :span="12">
              <el-tree class="autoH" :data="tableList" node-key="id" :props="props" @node-click="handleNodeClicks"></el-tree>
          </el-col>
        </el-row>
        <!-- <el-tree :data="treeData" node-key="id" :props="props" @node-click="handleNodeClick"></el-tree> -->
        <!-- <el-tree :data="treeData" node-key="id" :default-expanded-keys="[0]" :key="loadingT" :props="props" @node-click="handleNodeClick"></el-tree> -->
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="confirm('ruleForm')">克隆资源</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getBusinessServiceDetail, getServicePermission, getProxyServiceDetail, getFlowDetail, parseFile, saveNodeListForFlow,
  saveBusinessService, saveProxyService, saveFlow, saveFiles, getNodeListForFlow, kongInfosGet
} from '@/api/esb_service'
import { exportDatas } from '@/api/project_list'
export default {
  data() {
    return {
      dialog: false,
      treeData: [],
      tableList: [],
      flowStageList: [],
      errorHandler: [],
      ruleForm: {},
      cloneRow: {},
      pRow: {},
      rules: {
        newname: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        uri: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ]
      },
      props: {
        children: 'children',
        label: 'name'
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.dialog = val
        this.getTreeData()
      }
    },
    row(val) {
      if (val) {
        console.log(val)
        if (this.row.hasOwnProperty('name')) {
          this.ruleForm.oldname = this.row.name
          this.ruleForm.newname = this.row.name
        }
      }
    },
    type(val) {
      if (val) {
        const vm = this
        switch (val) {
          case 'business':
            getBusinessServiceDetail(this.row.id).then(res => {
              vm.cloneRow = res.data
            })
            getServicePermission(this.row.id).then(res => {
              vm.cloneRow.authAccountsMap = res.data
              // .filter(item => {
              //   return [item.name, item.name]
              // })
            })
            break
          case 'flow':
            getFlowDetail(this.row.id).then(res => {
              vm.cloneRow = res.data
            })
            getNodeListForFlow(this.row.id).then((rt) => {
              if (rt.status === '200' && rt.data) {
                this.flowStageList = rt.data.nodes || []
                this.errorHandler = rt.data.errorHandleNode || {
                  name: 'errorHandler',
                  flowId: this.flowId,
                  type: 'ErrorHandlerDTO'
                }
              }
            }).catch(() => {
            })
            break
          case 'agency':
            getProxyServiceDetail(this.row.id).then(res => {
              vm.cloneRow = res.data
            })
            kongInfosGet(this.row.id).then(res => {
              if (res.status === '200') {
                this.httpLL = res.data
              }
            })
            break
          case 'resource':
            parseFile(this.row.id).then(res => {
              vm.cloneRow = res.data
            })
            break
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    handleNodeClicks() {
    },
    handleNodeClick(row, column) {
      const vm = this
      vm.pRow = row
      const filters = [
        {
          key: 'level',
          opt: 'LIKE',
          type: 'S',
          value: 2
        },
        {
          key: 'project_id',
          opt: 'LIKE',
          type: 'S',
          value: row.id
        }
      ]
      vm.getTreeData(filters, row, column)
    },
    getTreeData(Efilters, row, col) {
      const vm = this
      if (!Efilters) {
        Efilters = [{
          key: 'level',
          opt: 'LIKE',
          type: 'S',
          value: 1
        }]
      }
      exportDatas({
        filters: Efilters,
        orderby: 'updateon',
        sort: 'desc',
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        if (Efilters.length > 1) {
          vm.tableList = res.data.list
        } else {
          vm.treeData = res.data.list
        }
      }).catch((e) => {
      })
    },
    closeDialog() {
      this.dialog = false
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
      this.$emit('confirm', false)
    },
    confirm(name) {
      this.$refs[name].validate((valid, obj) => {
        if (!this.pRow['projectId']) {
          this.$message.warning('请选择位置')
          return
        }
        if (this.ruleForm['uri']) {
          this.cloneRow.uri = this.ruleForm.uri
        }
        this.cloneRow.projectId = this.pRow.projectId
        this.cloneRow.name = this.ruleForm.newname
        this.cloneRow.id = ''
        switch (this.type) {
          case 'business':
            saveBusinessService(this.cloneRow).then(res => {
              if (res.data['id']) {
                this.dialog = false
                this.$emit('confirm', true)
              } else {
                this.$message.warning(res.data[0].message)
              }
            }).catch((e) => {
              this.$message.warning(e.data[0].message)
            })
            break
          case 'flow':
            saveFlow(this.cloneRow).then(res => {
              if (res.data['id']) {
                this.errorHandler.flowId = res.data['id']
                saveNodeListForFlow({
                  common: this.flowStageList.filter(item => {
                    item.flowId = res.data['id']
                    return item
                  }),
                  errorHandler: this.errorHandler
                }, res.data.id).then((rt) => {
                  if (rt.status === '200') {
                    this.dialog = false
                    this.$emit('confirm', true)
                  }
                }).catch((e) => {
                  this.$message.warning(e.data[0].message)
                })
              }
            })
            break
          case 'agency':
            saveProxyService(this.cloneRow).then(res => {
              console.log(1)
              if (res.data['id']) {
                this.dialog = false
                this.$emit('confirm', true)
              }
            }).catch((e) => {
              this.$message.warning(e.data[0].message)
            })
            break
          case 'resource':
            saveFiles(this.cloneRow).then(res => {
              if (res.data['id']) {
                this.dialog = false
                this.$emit('confirm', true)
              }
            }).catch((e) => {
              this.$message.warning(e.data[0].message)
            })
            break
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.autoH{
  height: 200px;
  overflow: auto;
}
</style>
