<template>
  <div>
    <el-form>
      <el-card  style="margin-top: -10px;padding-top:10px ">
        <el-row :gutter="20" type="flex">
          <el-col :span="10">
            <el-form-item label="系统标识" label-width="120px">
              <el-input
                size="mini"
                splaceholder="请输入内容"
                :disabled="true"
                v-model="inputQuery.thirdId"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="系统名称" label-width="120px">
              <el-input
                size="mini"
                splaceholder="请输入内容"
                :disabled="true"
                v-model="inputQuery.thirdName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex">
          <el-col :span="10">
            <el-form-item label="系统状态" label-width="120px">
              <el-radio-group v-model="inputQuery.enabled">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="设为主系统" label-width="120px">
              <el-radio-group v-model="inputQuery.mainSys">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
        <!--        <el-row :gutter="20" class="el-row" type="flex">-->
        <!--          <el-col :span="10">-->
        <!--            <el-form-item label="API说明文档" label-width="100px">-->
        <!--              <div>-->
        <!--                <a :href="inputQuery.guideUrl" target="_blank">{{ inputQuery.thirdName }}接口说明文档</a>-->
        <!--              </div>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        inputQuery.thirdName-->
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="18">
            <el-form-item label="第三方服务IP地址:" label-width="120px">
              <el-input
                size="mini"
                splaceholder="请输入内容"
                v-model="inputQuery.thridUrl"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left: 5px;" type="primary" @click="testThirdService">测试连通性</el-button>
          </el-col>
        </el-row>

      </el-card>
      <el-card style="padding-top: 10px">
        <el-row>
          <el-col :span="18">
            <el-form-item :label="inputQuery.thirdName+'接口地址'" label-width="200px">
              <el-input
                size="mini"
                splaceholder="请输入内容"
                v-model="inputQuery.thirdSysUrl"
              ></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left: 5px;" type="primary" @click="testThirdInter">测试连通性</el-button>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="18">

            <el-form-item :label="inputQuery.thirdName+'接口授权'" label-width="200px">
            </el-form-item>

          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="18">
            <el-form-item label="apikey:" label-width="100px">
              <el-input
                style="width: 50%;"
                size="mini"
                splaceholder="请输入内容"
                v-model="inputQuery.apikey"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="secretkey:" label-width="100px">
              <el-input
                style="width: 50%"
                size="mini"
                splaceholder="请输入内容"
                v-model="inputQuery.secretkey"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="24">
            <el-form-item label="备注说明">
              <el-input
                style="width: 80%"
                type="textarea"
                size="mini"
                rows="3"
                splaceholder="请输入内容"
                v-model="inputQuery.remark"
                @input="change()"
              ></el-input>
            </el-form-item>

          </el-col>

        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {testThirdInter, testThirdService} from "@/api/thrsys/basicThirdSys";

export default {
  name: "inputQuery",
  props: {
    inputQuery: {
      type: Object,
      required: true,
    },
  },
  methods: {
    testThirdService() {
      testThirdService(this.inputQuery).then((res) => {
        if (res.code === 20000) {
          this.$message.success("连接成功");
        } else
          this.$message.error(res.message);
      });
    },

    testThirdInter() {
      testThirdInter(this.inputQuery).then((res) => {
        if (res.code === 20000) {
          this.$message.success("连接成功");
        } else {
          this.$message.error(res.message);
        }
      });
    }

  }
};
</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 5px;

}

.text {
  font-size: 13px;
  font-family: "Microsoft YaHei";
}


</style>
