<el-main>
  <!--面包屑-->
  <breadcrumb-component ></breadcrumb-component>

  <el-container class="detail-container">

    <el-form label-width="200px" label-position="right" class="create-form-outline-full-screen"  :class="readonly?'readonly':''"    :model="database"    ref="database" >

        <el-form-item label="资源名称" prop="resourceName"  :rules="[{ required: true, message: '资源名称不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input   class="normal-width"  :disabled="readonly"  v-model="database.resourceName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="资源类型" prop="resourceType"  :rules="[{ required: true, message: '资源类型不能为空', trigger: 'change'  }]">
          <el-select   class="normal-width"  :disabled="readonly"  v-model="database.resourceType" placeholder="请选择" filterable>
            <el-option
              v-for="item in resourceTypeOptions"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="资源IP"  prop="ip"  :rules="[{ required: true, message: '资源IP不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input   class="normal-width" :disabled="readonly"  v-model="database.ip" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="资源端口" prop="resourcePort"  :rules="[{ required: true, message: '资源端口不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input   class="normal-width" :disabled="readonly"  v-model="database.resourcePort" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input   class="normal-width" :disabled="readonly"  v-model="database.username" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input class="normal-width" type="password" :disabled="readonly" v-model="database.password" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="数据库名称" prop="databaseName" :rules="[{ required: true, message: '数据库名称不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input   class="normal-width" :disabled="readonly" v-model="database.databaseName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="字符集" prop="charset" :rules="[{ required: true, message: '字符集不能为空', trigger: 'change'  }]">
          <el-select  class="normal-width"   :disabled="readonly"  v-model="database.charset" placeholder="请选择">
            <el-option
              v-for="item in charsetOptions"
              :key="item.id"
              :label="item.charsetName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数据仓库类型" prop="databaseType"  :rules="[{ required: true, message: '数据仓库不能为空', trigger: 'change'  }]">
          <el-select   class="normal-width"  :disabled="readonly"  v-model="database.databaseType" placeholder="请选择" filterable>
            <el-option
              v-for="item in databaseTypeOptions"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="getTestConnection" >测试连接</el-button>
            <el-button type="primary" @click="add"  v-show="dialogState==0"  >确定</el-button>
            <el-button type="primary" @click="update"  v-show="dialogState==2"  >确定</el-button>
            <el-button   @click="goBack">取消并返回</el-button>
        </el-form-item>

    </el-form>
  </el-container>
</el-main>








