<template>
  <div class="form-wrap">
    <nav-bar title="补充基本信息"/>
    <div class="wrap">
      <van-field
        class="firstName"
        v-model="form.firstName"
        clearable
      />
      <van-field
        class="lastName"
        v-model="form.lastName"
        clearable
      />
      <div class="mobile flex align-c">
        <p class="areaCode" @click="getAreaCode">
          <span>{{areaCodeItem.code}}</span>
          <i class="icon icon-xialatishi"></i>
        </p>
        <van-field
          type="number"
          v-model="form.mobile"
          clearable
        />
      </div>
      <van-field
        class="email"
        v-model="form.email"
        clearable
      />
      <van-field
        class="wechat"
        v-model="form.wechatId"
        clearable
      />
      <van-button
        type="default"
        @click="setData"
        :class="{disabled: disabled}"
      >确认</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Form",
  components: {
    NavBar
  },
  data() {
    return {
      form: {
        firstName: "",
        lastName: "",
        email: "",
        mobile: "",
        wechatId: "",
        type: "qrcodeApply",
        mobileCountryId: "317",
        mobilePrefix: "+86",
        orderId: this.$util.sessionStorage.fetch("orderId")
      },
      areaCodeItem: {
        id: "317",
        name: "中国",
        code: "+86"
      },
      lang: this.$store.state.langStr,
      isEdit: true,
      copyForm: {},
      disabled: true
    };
  },
  created() {
    // 获取国家区号
    let areaCodeItem = this.$util.storage.fetch("areaCodeItem");
    if (areaCodeItem) this.areaCodeItem = areaCodeItem;
    let form = JSON.parse(
      decodeURIComponent(this.$util.sessionStorage.fetch("form"))
    );
    if (form) {
      this.form = form;
      this.form.orderId = this.$util.sessionStorage.fetch("orderId");
    } else {
      if (this.$util.getLoginUserInfo()) {
        let data = JSON.parse(
          decodeURIComponent(this.$util.getLoginUserInfo())
        );
        for (const i in data) {
          if (data.hasOwnProperty(i)) {
            const element = data[i];
            if (i in this.form) {
              this.form[i] = element;
            }
          }
        }
        this.areaCodeItem.code = data.mobilePrefix;
      }
    }
    this.form.mobileCountryId = this.areaCodeItem.id;
    this.form.mobilePrefix = this.areaCodeItem.code;
  },
  watch: {
    form: {
      handler: function(val) {
        let n = 0;
        let form = encodeURIComponent(JSON.stringify(this.form));
        this.$util.sessionStorage.save("form", form);
        for (const key in val) {
          if (val.hasOwnProperty(key)) {
            if (!val[key]) {
              n++;
            }
          }
        }
        n > 0 ? (this.disabled = true) : (this.disabled = false);
      },
      deep: true
    }
  },
  methods: {
    // 保存数据
    setData() {
      if (this.disabled === true) {
        return;
      }
      let regMobile = /^[0-9]*$/;
      let regMail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (!regMobile.test(this.form.mobile)) {
        this.$Toast("手机格式不正确");
        this.disabled = false;
        return false;
      }
      if (!regMail.test(this.form.email)) {
        this.$Toast("邮箱格式不正确");
        this.disabled = false;
        return false;
      }
      let params = {};
      params.url = this.$apis.api_order_apply;
      params.data = this.form;
      this.disabled = true;
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            this.$util.sessionStorage.remove("form");
            this.$util.sessionStorage.remove("guide");
            this.$util.sessionStorage.save("backUser", true);
            this.$Toast("提交成功");
            this.isEdit = false;
            setTimeout(() => {
              this.$router.push({
                path: `/${this.lang}/user/orderDetail/${this.form.orderId}`
              });
            }, 1500);
          } else {
            this.$Toast(res.msg || "信息提交失败，请稍后重试");
            setTimeout(() => {
              this.disabled = false;
            }, 1000);
          }
        },
        e => {
          this.$Toast(e.msg);
          setTimeout(() => {
            this.disabled = false;
          }, 1000);
        }
      );
    },
    // 跳转国家区号选择
    getAreaCode() {
      this.$router.push({
        path: `/${this.lang}/areaCode`
      });
    }
  }
};
</script>

<style scoped lang='less'>
.form-wrap {
  background: #fff;
  min-height: 100vh;
  .wrap {
    padding: 20px;
    .van-cell-group:after {
      height: 0;
      border: 0;
    }
    .van-cell {
      margin-bottom: 15px;
      line-height: 40px;
      background: rgba(249, 249, 249, 1);
      color: #bbb;
      font-weight: 500;
    }
    .van-cell:before {
      font-size: 16px;
    }
    .firstName:before {
      content: "姓";
    }
    .lastName:before {
      content: "名";
    }
    .mobile:before {
      flex-shrink: 0;
      font-size: 16px;
      color: #bbb;
      content: "手机号";
      margin: 0 15px;
    }
    .email:before {
      content: "邮箱";
    }
    .wechat:before {
      content: "微信";
    }
    .van-cell:after {
      height: 0;
      border: 0;
    }
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px auto;
      width: 100%;
      height: 45px;
      font-size: 18px;
      font-weight: 500;
      background: #ff523d;
      border-radius: 25px;
      color: #fff;
      border: 0;
    }
    button.disabled {
      background: #ddd;
    }
    .mobile {
      position: relative;
      margin-bottom: 15px;
      background: rgba(249, 249, 249, 1);
      .van-cell {
        margin: 0;
      }
      .areaCode {
        z-index: 2;
        height: 30px;
        border-radius: 4px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        padding: 0 4px;
        span {
          color: #444;
          font-size: 13px;
          flex-shrink: 0;
        }
        i {
          font-size: 8px;
          margin-left: 5px;
          flex-shrink: 0;
          width: auto;
          height: auto;
          color: #444;
        }
      }
    }
    ::-webkit-input-placeholder {
      color: #bbb;
    }
    ::-moz-placeholder {
      color: #bbb;
    }
    ::-moz-placeholder {
      color: #bbb;
    }
    :-ms-input-placeholder {
      color: #bbb;
    }
  }
}
</style>
