<template>
  <el-dialog :close-on-click-modal="false" :title="(dialogForm.id ? '修改' : '添加') + '节点信息'" :visible.sync="dialogVisible" @close="closeDialog">
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px" v-loading="dialogLoading">
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dialogForm.name"></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.description" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="主机" prop="host">
            <el-input v-model="dialogForm.host"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="端口" prop="port" required>
            <el-input v-model="dialogForm.port" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="所属域" prop="domainInfoDTO.name">
            <el-input @click.native="showAreaDialog" v-model="dialogForm.domainInfoDTO.name" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="JDK目录">
            <el-input v-model="dialogForm.serverConfigDto.javaHome"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="日志路径" prop="logPath">
            <el-input v-model="dialogForm.serverConfigDto.logPath"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="应用jar路径">
            <el-input v-model="dialogForm.serverConfigDto.jarPath"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="节点管理器ip">
            <el-input v-model="dialogForm.serverConfigDto.nodeManager_ip"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="节点管理器端口">
            <el-input v-model="dialogForm.serverConfigDto.nodeManager_port"></el-input>
          </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>
    <SelectArea v-model="areaDialog" :connectorId="dialogForm.domainInfoDTO.id" @confirm="getArea" />
  </el-dialog>
</template>

<script>
import { saveServer, getServerDetails } from '@/api/esb_service'
import { checkFormData } from '@/utils/common'
import SelectArea from './SelectArea'
export default {
  components: {
    SelectArea
  },
  data() {
    var checkPort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('端口不能为空'))
      }
      if (!Number(value)) {
        callback(new Error('端口必须为数值'))
      } else {
        if (value < 0 || value > 65536) {
          callback(new Error('请输入0`65536整数字值'))
        } else {
          callback()
        }
      }
    }
    // var validateName = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('名称不能为空'));
    //   }else if (value.length >= 100) {
    //     callback(new Error('长度必须0到100'));
    //   } else  {
    //     callback();
    //   }
    // };
    //  var descriPtion = (rule, value, callback) => {
    //    if (value.length >= 255) {
    //     callback(new Error());
    //   } else  {
    //     callback();
    //   }
    // };
    return {
      dialogVisible: this.value,
      dialogLoading: false,
      areaDialog: false,
      dialogForm: {
        domainInfoDTO: {},
        serverConfigDto: {
          nodeManager_port: '',
          nodeManager_ip: '',
          jarPath: '',
          javaHome: '',
          logPath: ''
        }
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: ['blur', 'change'] }
        ],
        host: [
          { required: true, message: '主机不能为空', trigger: ['blur', 'change'] }
        ],
        // port: [
        //   { required: true, message: '端口不能为空', trigger: ['blur', 'change'] }
        // ],
        'domainInfoDTO.name': [
          { required: true, message: '所属域不能为空', trigger: ['blur', 'change'] }
        ],
        port: [
          { validator: checkPort, trigger: 'blur' }
        ],
        description: [
          { trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    checkItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        if (this.checkItem.id) {
          getServerDetails(this.checkItem.id).then(rt => {
            this.dialogForm = rt.data
            if (!this.dialogForm.domainInfoDTO) {
              this.dialogForm.domainInfoDTO = {}
            }
            if (!this.dialogForm.serverConfigDto) {
              this.dialogForm.serverConfigDto = {
                nodeManager_port: '',
                nodeManager_ip: '',
                jarPath: '',
                javaHome: '',
                logPath: ''
              }
            }
          })
        } else {
          this.dialogForm = {
            domainInfoDTO: {},
            serverConfigDto: {
              nodeManager_port: '',
              nodeManager_ip: '',
              jarPath: '',
              javaHome: '',
              logPath: ''
            }
          }
        }
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    getArea(data) {
      this.$set(this.dialogForm, 'domainInfoDTO', data)
      this.$set(this.dialogForm, 'domainId', data.id)
      this.$forceUpdate()
    },
    showAreaDialog() {
      this.areaDialog = true
    },
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    async submit() {
      console.log(this.dialogForm)
      // return
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          const canshu = Object.assign({}, this.dialogForm)
          delete canshu.domainInfoDTO

          this.dialogLoading = true
          saveServer(canshu).then((rt) => {
            this.dialogLoading = false
            if (rt.status === '200') {
              this.$emit('confirm', true)
              this.dialogVisible = false
              this.$message({
                message: `${this.dialogForm.id ? '修改' : '添加'}成功`,
                type: 'success'
              })
            } else {
              // console.log(rt)
            }
          }).catch(err => {
            this.dialogLoading = false
            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: '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>
