<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-option label="医疗机构" value="3"></el-option>
                   <el-option label="监管机构" value="4"></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>