<template>
  <el-dialog :title="(dialogForm.id ? '修改' : '添加') + '全局变量'" :visible.sync="dialogVisible" @close="closeDialog">
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="100px" 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="属性名">
            <el-input v-model="dialogForm.description"></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.host" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="类型">
            <el-select v-model="dialogForm.type">
              <el-option v-for="(item, index) in options" :label="item.name" :value="item.value" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="提供方">
            <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="变量值">
            <el-input v-model="dialogForm.domainInfoDTO.name" readonly></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: {}
      },
      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' }
        ]
      },
      options: [
        { name: '静态变量', value: '1' },
        { name: '外部变量', value: '2' }
      ]
    }
  },
  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
          })
        } else {
          this.dialogForm = {
            domainInfoDTO: {}
          }
        }
      }
    },
    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() {
      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 {

            }
          }).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>
