<template>
    <div style="overflow: auto; height: 100%; margin: 0 auto">
        <el-card class="el-card">
            <el-form :model="inputQuery" :rules="rules" ref="inputQuery">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>用户账号:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="customerName">
                            <el-input
                                size="small"
                                placeholder="请输入用户账号"
                                v-model="inputQuery.customerName"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>邮箱:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="email">
                            <el-input
                                size="small"
                                placeholder="请输入邮箱"
                                v-model="inputQuery.email"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>企业名称:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="companyName">
                            <el-input
                                size="small"
                                placeholder="请输入企业名称"
                                v-model="inputQuery.companyName"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>统一社会信用号:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="creditNum">
                            <el-input
                                size="small"
                                placeholder="请输入统一社会信用号"
                                v-model="inputQuery.creditNum"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>企业类型:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="bussinessStatus">
                            <el-select
                                size="small"
                                style="width: 100%"
                                v-model="inputQuery.bussinessStatus"
                                placeholder="企业类型"
                            >
                                <el-option label="医院" value="1"></el-option>
                                <el-option label="经营企业" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>所属地区:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="area">
                            <el-input
                                size="small"
                                placeholder="请输入详细地址"
                                v-model="inputQuery.area"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="register-text">
                            <span>详细地址:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="detailAddr">
                            <el-input
                                size="small"
                                placeholder="请输入详细地址"
                                v-model="inputQuery.detailAddr"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

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

<script>
    import {getCheckcode, register} from "../../api/auth/register";
    import store from "../../store/index";
    import {
        getCustomers,
        updateCustomers,
        deleteCustomers,
        customersInfo,
        modifyCustomers,
    } from "../../api/auth/customer";
    import {
        provinceAndCityData,
        regionData,
        provinceAndCityDataPlus,
        regionDataPlus,
        CodeToText,
        TextToCode,
    } from "element-china-area-data";

    export default {
        data() {
            let validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.inputQuery.password) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
                inputQuery: {
                    customerName: null,
                    password: "",
                    realName: "",
                    tel: "",
                    mobile: "",
                    userId: "",
                    confirmPassword: "",
                    checkCode: "",
                    email: "",
                    companyName: "",
                    creditNum: "",
                    area: "",
                    detailAddr: "",
                    bussinessStatus: "",
                },
                isTimer: false,
                btnTitle: "获取验证码",
                options: regionDataPlus,
                selectedOptions: [],

                rules: {
                    nickName: [
                        {required: true, message: "请输入用户账号", trigger: "blur"},
                    ],
                    password: [{required: true, message: "请输入密码", trigger: "blur"}],
                    realName: [
                        {required: true, message: "请输入真实姓名", trigger: "blur"},
                    ],
                    tel: [{required: true, message: "请输入联系电话", trigger: "blur"}],
                    mobile: [{required: true, message: "请输入手机号", trigger: "blur"}],
                    confirmPassword: [
                        {required: true, message: "请确认密码", trigger: "blur"},
                        {validator: validatePass2, trigger: "blur"},
                    ],
                    checkCode: [
                        {required: true, message: "请输入手机验证码", trigger: "blur"},
                    ],
                    email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
                    companyName: [
                        {required: true, message: "请输入企业名称", trigger: "blur"},
                    ],
                    creditNum: [
                        {required: true, message: "请输入统一社会信用号", trigger: "blur"},
                    ],
                    area: [{required: true, message: "请选择所属地区", trigger: "blur"}],
                    detailAddr: [
                        {required: true, message: "请输入详细地址", trigger: "blur"},
                    ],
                    bussinessStatus: [
                        {required: true, message: "请选择企业类型", trigger: "blur"},
                    ],
                },
            };
        },
        created() {
            this.getData();
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        modifyCustomers(this.inputQuery).then((response) => {
                            if (response.code === 20000) {
                                this.loading = false;
                                this.$message.success("修改成功");
                            } else {
                                this.$message.error(response.message);
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },

            getData() {
                this.loading = true;
                let tquery = {
                    customerId: store.getters.customerId,
                };
                customersInfo(tquery).then((response) => {
                    this.loading = false;
                    this.inputQuery = response.data;
                });
            },

            handleChange(value) {
                this.inputQuery.area =
                    CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
                console.log(value + "\n" + this.inputQuery.area);
            },
        },
    };
</script>
<style>
    .register-text {
        width: 100%;
        font-size: 13px;
        font-family: "Microsoft YaHei";
        float: left;
        text-align: left;
        margin-top: 10px;
    }

    .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>
