<template>
    <div>
        <el-form
            :model="inputQuery"
            :rules="rules"
            ref="inputQuery"
            label-width="100px"
        >
            <el-card class="el-card">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="20" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>机构名称:&nbsp;</span>
                            </div>

                            <el-form-item prop="name">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="inputQuery.name"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="20" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>地址:&nbsp;</span>
                            </div>
                            <el-form-item prop="addr">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="inputQuery.addr"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <!--                    <el-col :span="20" class="el-col">-->
                    <!--                        <div class="text item">-->
                    <!--                            <div class="itemTag">-->
                    <!--                                <span>生产地址:&nbsp;</span>-->
                    <!--                            </div>-->
                    <!--                            <el-form-item prop="productAddr">-->
                    <!--                                <el-input-->
                    <!--                                    style="width: 80%"-->
                    <!--                                    size="small"-->
                    <!--                                    splaceholder="请输入内容"-->
                    <!--                                    v-model="inputQuery.productAddr"-->
                    <!--                                ></el-input>-->
                    <!--                            </el-form-item>-->
                    <!--                        </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>企业类型:&nbsp;</span>-->
                    <!--              </div>-->
                    <!--              <el-form-item prop="category">-->
                    <!--                <el-select-->
                    <!--                  size="small"-->
                    <!--                  v-model="inputQuery.category"-->
                    <!--                  placeholder="企业类型"-->
                    <!--                >-->
                    <!--                  <el-option label="注册人/备案人" value="1"></el-option>-->
                    <!--                  <el-option label="代理人" value="2"></el-option>-->
                    <!--                </el-select>-->
                    <!--              </el-form-item>-->
                    <!--            </div>-->
                    <!--          </el-col>-->
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>统一社会信用代码:&nbsp;</span>
                            </div>
                            <el-form-item prop="creditCode">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="inputQuery.creditCode"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>机构类别:&nbsp;</span>
                            </div>
                            <el-form-item prop="classes">
                                <el-select
                                    size="small"
                                    v-model="inputQuery.classes"
                                    placeholder="企业类别"
                                >
                                    <el-option label="生产企业" value="1"></el-option>
                                    <el-option label="流通企业" value="2"></el-option>
                                    <el-option label="医疗机构" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

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

                </el-row>
            </el-card>

            <el-card class="el-card">


                <div>
                    <p class="form-title">医疗器械唯一标识数据库接口调用凭据</p>
                </div>
                <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 30px">
                    <el-col :span="20" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>应用码(APPID):&nbsp;</span>
                            </div>
                            <el-form-item prop="appId">
                                <el-input
                                    style="width: 400px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="inputQuery.appId"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="20" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>授权码(APPSecret):&nbsp;</span>
                            </div>
                            <el-form-item prop="appSecret">
                                <el-input
                                    style="width: 400px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="inputQuery.appSecret"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-card>

            <div style="text-align: center">
                <el-form-item>
                    <el-button
                        type="primary"
                        size="small"
                        icon="search"
                        style="margin-top: 20px; width: 200px"
                        @click="onModifySubmit('inputQuery')"
                    >保 存
                    </el-button
                    >
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import {getCompany, modifyCompany} from "../../../api/inout/company";

export default {
    data() {
        return {
            inputQuery: {
                name: null,
                category: "",
                creditCode: "",
                addr: "",
                classes: "",
                appId: "",
                appSecret: ""
            },

            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur"
                    }
                ],
                creditCode: [
                    {
                        required: true,
                        message: "请输入统一社会信用代码",
                        trigger: "blur"
                    }
                ],
                category: [
                    {
                        required: true,
                        message: "请选择企业类型",
                        trigger: "change"
                    }
                ],
                classes: [
                    {
                        required: true,
                        message: "请选择企业类别",
                        trigger: "change"
                    }
                ],
                appId: [
                    {
                        required: true,
                        message: "请输入应用码",
                        trigger: "blur"
                    }
                ],

                appSecret: [
                    {required: true, message: "请输入授权码", trigger: "blur"}
                ]
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        onModifySubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = true;
                    // eslint-disable-next-line no-unused-vars
                    modifyCompany(this.inputQuery).then(response => {
                        this.getData();
                        this.loading = false;
                        this.$message.success("修改成功");
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        getData() {
            this.loading = true;
            getCompany().then(response => {
                this.loading = false;
                this.inputQuery = response.data;
            });
        }
    }
};
</script>
<style scoped>
.itemTag {
    float: left;
    text-align: left;
    margin-top: 10px;
    width: 120px;
}

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

.el-row {
    display: flex;
    flex-wrap: wrap;
}

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

.form-title {
    font-size: 16px;
    font-family: Noto Sans SC;
    font-weight: bold;
    color: #303133;
}

</style>

<style>
.el-card {
    margin-right: 20px;
    margin-top: 15px;
    /*transition: all .5s;*/
}
</style>
