<template>
  <el-dialog
   :close-on-click-modal="false"
    :title="(dialogForm.id ? '修改' : '添加') + '域信息'"
    :visible.sync="dialogVisible"
    width="80%"
    @close="closeDialog"
    v-loading="dialogLoading">
    <div style="text-align:right;">
      <el-button type="primary" @click="checkDomaininfoServiceList()">已部署服务</el-button>
    </div>
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dialogForm.name" placeholder="请输入域名称" style="width:50%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="描述" placeholder="请输入描述文本" prop="description">
            <el-input v-model="dialogForm.description" style="width:50%;" type="textarea" :autosize="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="代理服务器" prop="description">
            <el-input
              v-model="dialogForm.proxyAddress"
              style="width:50%;"
              placeholder="请输入代理服务器地址"
              :autosize="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="所属节点">
            <div style="text-align:right;">
              <el-button type="primary" @click="add()">添加</el-button>
            </div>
            <el-table
              :data="dialogForm.servers"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              style="width: 100%; margin: 15px 0">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="name" label="名称" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="host" label="地址" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="port" label="端口" show-overflow-tooltip>
              </el-table-column>
              <!-- <el-table-column prop="type" label="所属域" show-overflow-tooltip>
              </el-table-column> -->
              <el-table-column label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="删除" :enterable="false" placement="top">
                    <el-button
                      class="icon-button"
                      type="text"
                      icon="el-icon-delete"
                      @click.native.prevent="handleDelete(scope.row.id, scope.$index)">
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
    <SelectNode v-model="nodeDialog" @confirm="getNode" :checkLists="dialogForm.servers" />
    <ServiceList
      :serviceListDialog="serviceListDialog"
      :domainId="domainId"
      @closeDialog="closeServiceListDialog"></ServiceList>
  </el-dialog>
</template>

<script>
import { saveDomaininfo, getDomaininfoDetails } from '@/api/esb_service'
import { removeServer } from '@/api/system_manage'
import SelectNode from './SelectNode'
import ServiceList from './ServiceList'
import { checkFormData } from '@/utils/common'

export default {
  components: {
    SelectNode,
    ServiceList
  },
  data() {
    return {
      dialogVisible: this.value,
      dialogLoading: false,
      nodeDialog: false,
      serviceListDialog: false,
      domainId: '',
      pointMessage: '',
      dialogForm: {},
      tableList: [],
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '代理服务器不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    checkItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.dialogForm = {}
        if (this.checkItem.id) {
          getDomaininfoDetails(this.checkItem.id).then(rt => {
            this.dialogForm = rt.data
          })
        }
      }
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    add() {
      this.nodeDialog = true
    },
    checkDomaininfoServiceList() {
      this.domainId = this.checkItem.id
      this.serviceListDialog = true
    },
    closeServiceListDialog() {
      this.serviceListDialog = false
    },
    getNode(data) {
      this.pointMessage = ''
      data.forEach(element => {
        if (element.domainId && element.domainId != this.checkItem.id) {
          this.pointMessage = this.pointMessage + element.name + '已经归属其它域，'
        }
      })
      this.dialogForm.servers = data
    },
    handleDelete(id, i) {
      console.log('id', id)
      removeServer(id).then(res => {
        console.log(res)
        if (res.status === '200') {
          this.dialogForm.servers.splice(i, 1)
          this.$message.success('删除成功')
        }
      })
    },
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    async submit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          if (this.pointMessage !== '') {
            this.$confirm(this.pointMessage + '继续操作会切换至此域', '提示', {
              type: 'info'
            }).then(() => {
              this.saveData()
            }).catch(_ => {
            })
          } else {
            this.saveData()
          }
        }
      })
    },
    saveData() {
      this.dialogLoading = true
      if (this.dialogForm.servers) {
        this.dialogForm.servers.forEach(item => {
          item.domainId = this.checkItem.id
        })
      }
      saveDomaininfo(this.dialogForm).then((rt) => {
        this.dialogLoading = false
        if (rt.status === '200') {
          this.$emit('confirm', true)
          this.dialogVisible = false
          this.$message({
            message: `${this.dialogForm.id ? '修改' : '添加'}成功`,
            type: 'success'
          })
        }
      }).catch((err) => {
        this.dialogLoading = false
        const data = err.data || []
        const hint = [
          { fieName: '名称', field: 'name' },
          { fieName: '说明', field: 'description' },
          { fieName: '代理服务器', field: 'proxyAddress' },
          { fieName: '目标', field: 'targetService.name' },
          { fieName: '消息类型', field: 'messageType' },
          { fieName: 'Http Method', field: 'serviceParamsMap.httpMethod' },
          { fieName: '报文格式', field: 'payloadType' },
          { fieName: '定义文件类型', field: 'defineFileType' },
          { fieName: '定义文件', field: 'defineFile' },
          { fieName: '端点', field: 'serviceParamsMap.binding' },
          { fieName: '协议', field: 'protocol' },
          { fieName: '适配器', field: 'connector.name' },
          { fieName: '端点uri', field: 'uri' }
        ]
        checkFormData(data, hint)
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
</style>
