<template>
    <div>

        <el-row :gutter="20" class="el-row" type="flex" align="middle">
<!--            <el-col :span="8" class="el-col">-->
<!--                <div class="text item">-->
<!--                    <span>是否启用接口</span>-->
<!--                    <el-radio-group v-model="inputDetailQuery.enabled" style="margin-right: 20px;margin-left: 20px">-->
<!--                        <el-radio-button :label="true" size="mini">启用</el-radio-button>-->
<!--                        <el-radio-button :label="false" size="mini">禁用</el-radio-button>-->
<!--                    </el-radio-group>-->
<!--                </div>-->
<!--            </el-col>-->

            <el-col :span="12" class="el-col">
                <div class="text item">
                    <el-radio-group v-model="inputDetailQuery.fromType" :disabled="!inputDetailQuery.enabled"
                                    style="margin-right: 20px" @change="agreeChange">
                        <el-radio-button :label="0" size="mini" disabled>接口实时获取</el-radio-button>
                        <el-radio-button :label="3" size="mini">接口方式</el-radio-button>
                        <el-radio-button :label="2" size="mini" disabled>第三方上传缓存</el-radio-button>
                        <el-radio-button :label="1" size="mini">文件方式</el-radio-button>

                    </el-radio-group>
                    <!--<el-checkbox :disabled="inputDetailQuery.fromType!=0 || !inputDetailQuery.enabled"-->
                    <!--v-model="inputDetailQuery.itrCache">是否启用接口缓存-->
                    <!--</el-checkbox>-->
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex" align="middle">
            <el-col :span="12" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>接口名称:&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 200px"
                        size="mini"
                        splaceholder="请输入内容"
                        :disabled="true"
                        v-model="inputDetailQuery.name"
                    ></el-input>
                </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>接口地址:&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 80%"
                        size="mini"
                        splaceholder="请输入内容"
                        v-model="inputDetailQuery.value"
                    ></el-input>
                </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>API接口地址:&nbsp;</span>-->
        <!--</div>-->

        <!--<el-input-->
        <!--style="width: 80%"-->
        <!--size="mini"-->
        <!--splaceholder="请输入内容"-->
        <!--v-model="inputDetailQuery.guideUrl"-->
        <!--&gt;</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="inputDetailQuery.remark"
                        @input="change()"
                    ></el-input>
                </div>
            </el-col>

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

<script>
export default {
    name: "inputDetailQuery",
    props: {
        inputDetailQuery: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            temp: null,
        }
    },
    methods: {
        agreeChange() {
            this.$confirm('请咨询系统技术支持方，否则可能导致基础数据缺失，系统无法正常运行。是否继续', '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {

                this.temp = this.inputDetailQuery.fromType;
            }).catch(() => {
                this.inputDetailQuery.fromType = this.temp;
            });
        },
    },
    created() {
        this.temp = this.inputDetailQuery.fromType;
    },
};
</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>
