<template>
  <div class="rqfy">
    <div class="content">
      <div class="title">用户编号绑定</div>
      <div class="filed">
        <van-field
          v-model="form.consNo"
          @input="change"
          type="digit"
          label="用户编号"
          placeholder="10位数字的用户编号"
        />
        <van-field
          v-if="form.address"
          v-model="form.name"
          label="用户姓名"
          placeholder="开户时预留的用户姓名"
        />
        <van-field
          v-model="form.address"
          center
          clearable
          readonly
          label="用户地址"
          placeholder="请获取用户地址"
        >
          <template #button>
            <van-button size="small" plain type="warning" @click="obtain"
              >获取地址</van-button
            >
          </template>
        </van-field>
        <div class="tips">提示：请输入用户编号后点击获取地址</div>
      </div>
      <div class="ensure">
        <van-button color="#EB4E3F" size="large" @click="ensure"
          >确定</van-button
        >
        <div class="instructions">用户须知</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, Button, Dialog } from "vant";
import { queryPayUserInfo,userBind } from "@/api/rqfy.js";
Vue.use(Field).use(Button).use(Dialog);
export default {
  data() {
    return {
      form: {
        consNo: "", //用户编号
        name: "", //用户姓名
        address: "", //用户地址
        orgNo: "", //用户所属管理单位编码
        uid: "", //镇合意uid
      },
      userInfo: {},
    };
  },
  created() {
    if (window.android !== undefined) {
      const res = window.android.getUserInfo(); // 这是一个json字符串
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    } else if (window.webkit) {
      window.webkit &&
        window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
    } else {
      this.$toast("请先登录镇合意app");
    }
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
  },
  methods: {
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    },
    change() {
      this.form.name = "";
      this.form.address = "";
      this.form.orgNo = "";
    },
    obtain() {
      if (this.form.consNo) {
        queryPayUserInfo({ consNo: this.form.consNo }).then((res) => {
            this.form.name = res.consName;
            this.form.address = res.consAddr;
            this.form.orgNo = res.orgNo;
        });
      } else {
        Dialog.alert({
          message: "请输入用户编号后点击获取地址",
        }).then(() => {});
      }
    },
    ensure() {
      if (
        this.form.consNo &&
        this.form.name &&
        this.form.address &&
        this.form.orgNo &&
        this.userInfo
      ) {
        this.form.uid = this.userInfo.userId;
        userBind(this.form).then((res) => {
          console.log(res);
          if (this.$route.query.type == 1) {
            this.$router.replace({ name: 'Payrecord', query: this.form });
          }else if (this.$route.query.type == 2) {
            this.$router.replace({ name: 'Recharge', query: this.form });
          }else if (this.$route.query.type == 3) {
            this.$router.replace({ name: 'Repair', query: this.form });
          }else if (this.$route.query.type == 4) {
            this.$router.replace({ name: 'Check1', query: this.form });
          }else if (this.$route.query.type == 5) {
            this.$router.replace({ name: 'Fire', query: this.form });
          }else if (this.$route.query.type == 6) {
            this.$router.go(-1)
          } else {
            this.$router.replace({ name: 'Usermanage', query: this.form });
          }
        })
      } else {
        Dialog.alert({
          message: "请填写完整用户信息!",
        }).then(() => {});
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
};
</script>

<style lang="stylus" scoped>
.rqfy {
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;

  .content {
    padding: 0 20px;
    display: flex;
    flex-direction: column;

    .title {
      margin: 100px 0 80px 32px;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }

    .filed {
      .tips {
        display: flex;
        justify-content: flex-end;
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #EB4E3F;
        margin: 10px 25px 10px 0;
      }
    }

    .ensure {
      margin: 100px 25px 0px 25px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .instructions {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2569EB;
        line-height: 4;
      }
    }
  }
}
</style>