<template>
  <view class="bind-page" :class="{ 'bind-page--elder': $uiStyle === 'elder' }">
    <image src="/static/images/common/logo_bind.png" />
    <text class="jj">为了信息安全,请验证身份</text>
    <uni-forms
      ref="formRef"
      :value="formData"
      label-position="top"
      label-width="280px"
      :rules="rules"
    >
      <uni-forms-item :label="itemLabel + '后6位:'" name="code">
        <uni-easyinput
          type="text"
          v-model="formData.code"
          placeholder="请输入"
        />
      </uni-forms-item>
    </uni-forms>
    <view style="display: flex; align-items: center; width: 100%">
      <checkbox-group @change="handleCheckChange">
        <checkbox :checked="disable" />
      </checkbox-group>
      <view class="agreement-text"
        >我已阅读并同意
        <text class="agreeName" @click="handleService">《用户服务协议》</text>和
        <text class="agreeName" @click="handlePrivate">《隐私协议》</text>
      </view>
    </view>
    <custom-popup ref="customDialogRef"></custom-popup>
    <button
      class="btn-next"
      :style="disable ? 'background-color:#3a78f5' : 'background-color:#abaeb1'"
      size="default"
      @tap="handleNext"
      :disabled="!disable"
    >
      下一步
    </button>
  </view>
</template>

<script>
import { DOOR_TYPE, USER_INFO } from "@/utils/const";
import { bindOpenidAndDoor } from "@/api/control";
import agreements from "@/common/js/agreement";
const app = getApp();

export default {
  data() {
    const _this = this;
    return {
      userInfo: {},
      homeBg: "/static/images/home/bg.png",
      DOOR_TYPE,
      doorType: 4,
      formData: {
        code: "",
      },
      rules: {
        code: {
          rules: [
            {
              required: true,
              errorMessage: "{label}不能为空",
            },
            {
              minLength: 6,
              maxLength: 6,
              errorMessage: "{label}长度必须为后6个字符",
            },
          ],
          label: "身份证号码",
        },
      },
      itemLabel: "身份证号码",
      queryData: {
        NBID: "test",
      },
      doorplateCode: "",
      disable: false,
    };
  },
  watch: {
    itemLabel(val) {
      this.rules.code.label = val;
    },
  },
  onLoad() {
    const options = app.globalData.options;
    this.userInfo = uni.getStorageSync("userInfo") || {};
    if (options.code) {
      this.doorType = app.globalData.doorInfo.baseInfo.type;
      this.queryData = options;
      if (this.doorType === DOOR_TYPE.HOUSE.VALUE) {
        this.itemLabel = "身份证号码";
      } else if (
        this.doorType === DOOR_TYPE.STORE.VALUE ||
        this.doorType === DOOR_TYPE.ENTERPRISE.VALUE
      ) {
        this.itemLabel = "统一社会信用代码";
      }
    }
  },
  methods: {
    goToHome() {
      uni.reLaunch({
        url: "../home/home",
      });
    },
    getUserProfile() {
      const _this = this;
      const userInfo = uni.getStorageSync(USER_INFO);
      uni.getUserProfile({
        desc: "用于完善用户资料",
        success: (res) => {
          uni.setStorage({
            key: USER_INFO,
            data: userInfo ? { ...userInfo, ...res.userInfo } : res.userInfo,
            success: function () {
              console.log("保存用户信息成功");
              _this.goToHome();
            },
          });
        },
      });
    },
    async handleNext() {
      await this.$refs.formRef.validate();
      const res = await this.bindDoor();
      console.log("bind door", res);
      /*  if(res.code!==0){
       uni.
     } */
      //暂时测试用
      app.globalData.verify = true;

      uni.navigateBack({
        delta: 1,
      });

      // this.getUserProfile();
    },
    async bindDoor() {
      await bindOpenidAndDoor({
        validStr: this.formData.code,
        userInfoId: this.userInfo.uuid,
        doorplateCode: app.globalData.options.code,
      });
    },
    // 勾选用户协议和隐私协议
    handleCheckChange(e) {
      this.disable = !this.disable;
    },
    // 查看用户协议
    handleService() {
      this.$refs.customDialogRef.open({
        content: agreements["SERVICE_AGREEMENT"],
      });
    },
    // 查看隐私协议
    handlePrivate() {
      this.$refs.customDialogRef.open({
        content: agreements["PRIVATE_AGREEMENT"],
      });
    },
  },
};
</script>
<style scoped>
.bind-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}
.bind-page text {
  margin-top: 20px;
}
.bind-page form {
  width: 100%;
}
.bind-page /deep/ .uni-forms {
  margin-top: 40px;
  width: 100%;
}
.bind-page /deep/ .uni-forms-item__label {
  padding: 0;
  width: 100px;
}
.bind-page image {
  margin-top: 20px;
  width: 108px;
  height: 108px;
}
.uni-column .title {
  margin-top: 40px;
  font-size: 14px;
}
.uni-column input {
  margin-top: 10px;
  height: 34px;
  background: #fff;
  border-radius: 4px;
}
button {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3a78f5;
}
.agreement-text {
  /*  margin-top: 10px; */
  font-size: 12px;
}
.agreeName {
  color: #329cff;
}
</style>
<style lang="scss" scoped>
.bind-page--elder {
  .uni-column {
    .title {
      font-size: calc(14px * $zlb-elder-font-scale);
    }
  }
  .agreement-text {
    font-size: calc(12px * $zlb-elder-font-scale);
  }
}
</style>