<template>
  <div>
    <back :title="titlename"></back>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.name"
        class="m"
        name="中文名"
        label="中文名"
        placeholder="请填写中文名"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.englishName"
        type=""
        name="英文名"
        label="英文名"
        placeholder="请填写英文名"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.email"
        class="m"
        type=""
        name="邮箱地址"
        label="邮箱地址"
        placeholder="请填写邮箱地址"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.phone"
        class="m"
        type="number"
        name="手机号"
        label="手机号"
        placeholder="请填写手机号"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.stationNum"
        type=""
        name="工号"
        label="工号"
        placeholder="请填写工号"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.company"
        class="m"
        type=""
        name="公司"
        label="公司"
        placeholder="请填写公司"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.department"
        class="m"
        type=""
        name="部门"
        label="部门"
        placeholder="请填写部门"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.costCenterName"
        class="m"
        type=""
        name="成本中心"
        label="成本中心"
        placeholder="请填写成本中心"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.build"
        type=""
        name="幢/座"
        label="部门"
        placeholder="请填写部门"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.floor"
        type=""
        name="楼层"
        label="楼层"
        placeholder="请填写楼层"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.seat"
        type=""
        name="座位"
        label="座位"
        placeholder="请填写座位"
        :rules="[{ required: false }]"
      />
      <van-field
        v-model="user.remark"
        type=""
        name="备注"
        label="备注"
        placeholder="请填写备注"
        :rules="[{ required: false }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Toast, Field } from "vant";
export default {
  data() {
    return {
      titlename: "个人信息",
      user: {}
    };
  },
  created: function() {
    this.openid = this.$store.state.openId;
    console.log(this.openid);
    //this.openid = '123'
    this.getUser();
  },
  methods: {
    onSubmit() {
      if (this.user.name == "" || this.user.name == undefined) {
        Toast("请填写中文名");
        return;
      }

      if (this.user.englishName == undefined) {
        this.user.englishName = "";
      }

      if (this.user.email == "" || this.user.email == undefined) {
        Toast("请填写邮箱地址");
        return;
      }

      let regEmail = new RegExp(this.$store.state.regEmail);
      if (!regEmail.test(this.user.email)) {
        Toast("邮箱格式不正确");
        return;
      }

      if (this.user.phone == "" || this.user.phone == undefined) {
        Toast("请填写手机号");
        return;
      }

      let regPhone = new RegExp(this.$store.state.regPhone);
      if (!regPhone.test(this.user.phone)) {
        Toast("手机号格式不正确");
        return;
      }

      if (this.user.stationNum == undefined) {
        this.user.stationNum = "";
      }

      if (this.user.company == "" || this.user.company == undefined) {
        Toast("请填写公司");
        return;
      }

      if (this.user.department == "" || this.user.department == undefined) {
        Toast("请填写部门");
        return;
      }

      if (
        this.user.costCenterName == "" ||
        this.user.costCenterName == undefined
      ) {
        Toast("请填写成本中心");
        return;
      }

      if (this.user.build == undefined) {
        this.user.build = "";
      }

      if (this.user.floor == undefined) {
        this.user.floor = "";
      }

      if (this.user.seat == undefined) {
        this.user.seat = "";
      }

      if (this.user.remark == undefined) {
        this.user.remark = "";
      }

      this.$http
        .post(
          this.$store.state.host + "/personal/savePersonalInfo.do",
          {
            user_id: this.openid,
            name: this.user.name,
            englishName: this.user.englishName,
            email: this.user.email,
            phone: this.user.phone,
            stationNum: this.user.stationNum,
            company: this.user.company,
            department: this.user.department,
            costCenterName: this.user.costCenterName,
            build: this.user.build,
            floor: this.user.floor,
            seat: this.user.seat,
            remark: this.user.remark
          },
          { emulateJSON: true }
        )
        .then(
          res => {
            //发送成功
            if (res.body.msg == "success") {
              Toast("保存成功");
              let that = this;
              setTimeout(function() {
                that.$router.push({ path: "/My" });
              }, 500);
            }
          },
          res => {
            //发送失败
          }
        );
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-form {
  .van-button--info {
    background-color: #0c2469;
    border: 1px solid #0c2469;
    border-radius: 5px;
  }
  .m .van-field__label::before {
    content: "*";
    color: red;
  }
  .van-cell {
    font-size: 0.26rem;
  }
  .textarea {
    font-size: 0.26rem;
    padding: 10px 16px;
    color: #646566;
    textarea {
      width: 98%;
      height: 150px;
      border-color: #e5e5e5;
      color: #999999;
      margin-top: 16px;
      padding: 10px 1%;
    }
  }
}
/deep/.van-field__control {
  text-align: right;
}
</style>
