<template>
  <sail-page type="realNameCheck" title="实名认证" isHead>
    <div slot="content">
         <p v-show="!loginInfo.cardCode" class="real-desc">需要进行实名认证方可申请入住</p>
        <div class="real-form" style="margin-top: 10px;">
            <div class="weui-cells zero-top">
              <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                    <div class="weui-cell__bd">
                        <input ref="name" :value="loginInfo.zhName" :disabled="loginInfo.zhName" class="weui-input" type="text" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
                    <div class="weui-cell__bd">
                        <input ref="code" :value="loginInfo.cardCode" :disabled="loginInfo.cardCode" class="weui-input" placeholder="请输入身份证号">
                    </div>
                </div>
            </div>
        </div>
        <van-button :loading="loading" size="large" :disabled="!loginInfo.cardCode?false:true" @click="bindSelf" class="submit-btn" >确定</van-button>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      loginInfo: state => state.loginModule.loginInfo
    })
  },
  data: function() {
    return {
      name: "",
      code: "",
      loading: false
    };
  },
  methods: {
    bindSelf() {
      //绑定身份证
      let name = this.$refs.name.value;
      let code = this.$refs.code.value;
      // this.$store.commit("loginModule/updateUserInfo", {
      //   cardCode: code,
      //   cappUserInfo: {
      //     userName: name
      //   }
      // });
      if(code.length !== 18) {
        Toast.fail({
          duration: 1000,
          message: "身份证号格式错误，请重填！"
        });
        return false; 
      }
      this.loading = true;
      //
      if (this.$route.params.flag === "normal") {
        this.$store
          .dispatch("updateUserModule/updateUser", {
            cardCode: code,
            headImg: this.loginInfo.headImg,
            nickname: this.loginInfo.nickname,
            updateFlag: 3,
            userName: name
          })
          .then(res => {
            this.loading = false;
            if (res) {
              this.$store.commit("loginModule/updateUserInfo", {
                cardCode: code,
                zhName: name,
                cappUserInfo: {
                  userName: name
                }
              });
              res.Toast.success({
                duration: 1000,
                message: "绑定身份证成功"
              });
              this.$router.back();
            }
          });
      }
      if (this.$route.params.flag === "auth") {
        this.$store.dispatch("applyModule/applyLiveFirst", {
          cardCode: code,
          userName: name
        }).then(res => {
          
          this.loading = false;
          //
          if (res) {
            this.$store.commit("loginModule/updateUserInfo", {
              cardCode: res.data.data.cardCodeFilter,
              zhName: name,
              cappUserInfo: {
                userName: name
              }
            });
            res.Toast.success({
              duration: 1000,
              message: "绑定身份证成功"
            });
            this.$router.push({path: "/applyCheckIn"});
          }else {
            this.$store.commit("loginModule/INIT_LOGIN_NAME_CART");
          }
        });
      }
      //
    }
  }
};
</script>
<style lang="less">

</style>
<style lang="less" scoped>
.real-desc {
  text-align: left;
  padding-left: 11px;
  font-size: 11px;
  margin-top: 11.5px;
  margin-bottom: 11.5px;
}
</style>
