<template>
    <div>
        <el-row :gutter="20" class="el-row" type="flex" align="middle">
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>系统ID:&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 200px"
                        size="mini"
                        splaceholder="请输入内容"
                        :disabled="true"
                        v-model="inputQuery.thirdId"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>系统名称:&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 200px"
                        size="mini"
                        splaceholder="请输入内容"
                        v-model="inputQuery.thirdName"
                    ></el-input>
                </div>
            </el-col>

        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>API说明文档:&nbsp;</span>
                    </div>
                    <div style="padding-top: 5px">
                        <a :href="inputQuery.guideUrl"  target="_blank">{{inputQuery.thirdName}}接口说明文档</a>
                    </div>


                </div>
            </el-col>
            <el-col :span="4" class="el-col">
                <div class="text item">
                    <el-checkbox v-model="inputQuery.enabled">是否启用</el-checkbox>
                </div>
            </el-col>
            <el-col :span="4" class="el-col">
                <div class="text item">
                    <el-checkbox v-model="inputQuery.mainSys">是否设为主系统</el-checkbox>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="18" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>第三方服务IP地址:&nbsp;</span>
                    </div>

                    <el-input
                        style="width: 80%"
                        size="mini"
                        splaceholder="请输入内容"
                        v-model="inputQuery.thridUrl"
                    ></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="24" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>备注说明:&nbsp;</span>
                    </div>

                    <el-input
                        style="width: 80%"
                        type="textarea"
                        size="mini"
                        rows="6"
                        splaceholder="请输入内容"
                        v-model="inputQuery.remark"
                        @input="change()"
                    ></el-input>
                </div>
            </el-col>

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

<script>
    export default {
        name: "inputQuery",
        props: {
            inputQuery: {
                type: Object,
                required: true,
            },
        },
    };
</script>
<style scoped>
    .itemTag {
        float: left;
        text-align: left;
        margin-top: 5px;

    }

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


    .el-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;

    }

    .el-col {
        border-radius: 4px;
        flex-wrap: wrap;

    }
</style>
