<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="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>企业名称:&nbsp;</span>
                            </div>
                            <el-form-item prop="companyName">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.companyName"
                                    @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="creditNum">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.creditNum"
                                    @input="change()"
                                ></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="area">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.area"
                                    @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="detailAddr">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.detailAddr"
                                    @input="change()"
                                ></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="bussinessStatus">
                                <el-select
                                    size="small"
                                    v-model="inputQuery.bussinessStatus"
                                    :disabled="true"
                                    style="width: 80%"
                                    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="14" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>所属连锁总部:&nbsp;</span>
                            </div>
                            <el-form-item prop="parentCompany">
                                <el-input
                                    size="small"
                                    placeholder="请填写连锁总部入驻码上放心平台的中文名称"
                                    v-model="inputQuery.parentCompany"
                                    v-bind:disabled="inputQuery.bussinessStatus !== '5'"
                                    style="width: 50%"
                                ></el-input>

                                <el-button
                                    type="primary"
                                    size="small"
                                    icon="search"
                                    v-bind:disabled="inputQuery.bussinessStatus !== '5'"
                                    style="margin-left: 10px"
                                    @click="checkPanrentName()"
                                >校验名称
                                </el-button
                                >
                            </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="contacts">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.contacts"
                                    @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="email">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.email"
                                    @input="change()"
                                ></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="tel">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.tel"
                                    @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="mobile">
                                <el-input
                                    style="width: 80%"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.mobile"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
            <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>企业唯一标识(ref_ent_id):&nbsp;</span>
                            </div>
                            <el-form-item prop="refEntId">
                                <el-input
                                    style="width: 400px"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.refEntId"
                                ></el-input>

                                <el-button
                                    type="primary"
                                    size="small"
                                    icon="search"
                                    style="margin-left: 10px"
                                    @click="checkName()"
                                >校验名称
                                </el-button
                                >
                            </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>企业ID(ent_id):&nbsp;</span>
                            </div>
                            <el-form-item prop="entId">
                                <el-input
                                    style="width: 400px"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="inputQuery.entId"
                                ></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()"
                    >保 存
                    </el-button
                    >
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import {
    getCompany,
    modifyCompany,
    getRefid,
} from "../../api/warehouse/company";
import store from "../../store/index";

export default {
    data() {
        return {
            inputQuery: {
                companyName: "",
                bussinessStatus: "",
                creditNum: "",
                classes: "",
                area: "",
                detailAddr: "",
                contacts: "",
                mobile: "",
                tel: "",
                email: "",
                refEntId: "",
                entId: "",
                customerId: store.getters.customerId,
            },

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

                appId: [
                    {
                        required: true,
                        message: "请输入应用码",
                        trigger: "blur",
                    },
                ],

                appSecret: [
                    {required: true, message: "请输入授权码", trigger: "blur"},
                ],
            },
        };
    },
    created() {
        this.getData();
    },
    methods: {
        onModifySubmit() {
            this.loading = true;
            modifyCompany(this.inputQuery).then((response) => {
                if (response.code == 20000) {
                    this.getData();
                    this.loading = false;
                    this.$message.success("修改成功");
                } else {
                    this.$message.error(response.message);
                }
            });
        },
        checkName() {
            let tquery = {
                companyName: this.inputQuery.companyName,
            };
            getRefid(tquery).then((response) => {
                if (response.code == 20000) {
                    this.$message.success("校验成功！");
                    this.inputQuery.refEntId = response.data.ref_ent_id;
                    this.inputQuery.entId = response.data.ent_id;
                } else {
                    this.$message.error(response.message);
                }
            });
        },

        checkPanrentName() {
            let tquery = {
                companyName: this.inputQuery.parentCompany,
            };
            getRefid(tquery).then((response) => {
                if (response.code == 20000) {
                    this.$message.success("校验成功！");
                } else {
                    this.$message.error(response.message);
                }
            });
        },
        getData() {
            this.loading = true;
            let tquery = {
                customerId: store.getters.customerId,
            };
            getCompany(tquery).then((response) => {
                this.loading = false;
                this.inputQuery = response.data;
                this.inputQuery.bussinessStatus = this.inputQuery.bussinessStatus + "";
            });
        },
    },
};
</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-card {
    margin-right: 20px;
    margin-top: 15px;
    /*transition: all .5s;*/
}

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

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}
</style>
