<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="个人中心" name="first">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="登录账号">
            {{ $store.state.user.user.user.staffNo }}
          </el-form-item>
          <el-form-item label="员工号">
            {{ $store.state.user.user.user.upId }}
          </el-form-item>
          <el-form-item label="姓名">
            {{ $store.state.user.user.user.name }}
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form.mobile" size="small"></el-input>
          </el-form-item>
          <el-form-item label="所在营业部">
            {{ $store.state.user.user.user.deptName }}
          </el-form-item>
        </el-form>
        <el-button style="width: 150px" type="primary" @click="onSubmit"
          >保存</el-button
        >
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="second">
        <update-password />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { changeMobile } from "@/api/user";
import { getInfo } from "@/api/login";
import updatePassword from "./updatePass";
export default {
  components: { updatePassword },
  props: {},
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"));
      }
      let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!reg.test(value)) {
        return callback(new Error("请输入正确的手机号"));
      }
      callback();
    };
    return {
      activeName: "first",
      form: {
        mobile: ""
      },
      rules: {
        mobile: [{ required: true, validator: validateMobile, trigger: "blur" }]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.form.mobile = this.$store.state.user.user.user.mobile;
  },
  mounted() {},
  methods: {
    async onSubmit() {
      this.$refs.form.validate(async valid => {
        const res = await changeMobile({ mobile: this.form.mobile });
        if (!res.code === 0) return this.$message.error(res.message);
        this.$message.success("保存成功");
        const result = await getInfo();
        if (result.code === 0) {
          this.$store.commit("SET_USER", result.data);
        } else {
          this.$message.error(result.message);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.el-input {
  width: 30%;
}
</style>
