<template>
  <!-- #ifdef MP-WEIXIN -->
  <view class="content" v-if="!userInfo.user_mobile">
    <!-- 头部logo -->
    <view class="header">
      <image :src="logo"></image>
    </view>
    <view class="btn_box"
      ><button
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        class="login-but"
      >
        微信手机快捷登录
      </button></view
    >
  </view>

  <view class="page" v-else>
    <view class="m-cells m-cells-form">
      <view class="m-cell">
        <view class="m-cell-hd"
          ><label class="u-label">{{ __("手机号码") }}</label></view
        >
        <view class="m-cell-bd" style="display: inherit">
          <block v-if="userInfo.user_mobile && Phone == userInfo.user_mobile">
            <view style="width: 400rpx; height: 48rpx"
              >{{ user_intl }}{{ Phone }}</view
            >
          </block>
          <block v-else-if="langSetComplete">
            <!-- 国家区号 -->
            <picker
              mode="selector"
              @change="onIntlChange"
              :value="mode_index"
              :range="langLists"
              range-key="name"
              style="width: 80rpx; text-align: center"
            >
              <view class="country-int-code" style="color: #000000">{{
                user_intl
              }}</view>
            </picker>

            <input
              class="u-input"
              type="number"
              style="width: 400rpx; height: 48rpx"
              v-model="Phone"
              :placeholder="__('请输入手机号码')"
              maxlength="11"
              @input="inputphone"
            />
          </block>
        </view>
        <view v-if="!isPhone" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>

      <view class="m-cell">
        <view class="m-cell-hd"
          ><label class="u-label">{{ __("登录密码") }}</label></view
        >
        <view class="m-cell-bd"
          ><input
            class="u-input"
            type="text"
            v-model="password"
            :placeholder="__('可在其它终端通过手机及密码登录')"
            @input="onInputPassword"
        /></view>
        <view v-if="!isPassword" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>

      <view class="m-cell m-cell-vcode">
        <view class="m-cell-hd"
          ><label class="u-label">{{ __("验证码") }}</label></view
        >
        <view class="m-cell-bd"
          ><input
            class="u-input"
            type="number"
            :placeholder="__('请输入验证码')"
            maxlength="6"
            @input="inputcode"
        /></view>
        <view v-if="!isCode" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
        <view v-if="isSend" @tap="sendmessage" class="m-vcode-btn">{{
          btntext
        }}</view>
        <view v-else class="m-vcode-btn">{{ btntext }}</view>
      </view>
    </view>
    <view class="btn_box"
      ><button class="u-btn u-btn-default" @tap="submitdata">
        {{ __("保存") }}
      </button></view
    >

    <view class="content" v-if="false">
      <view>
        <button @click="openCodeDialog">
          {{
            __(
              "发送验证码 - 保存按钮 - 根据手机号发送验证码 - 填写验证码后直接提交"
            )
          }}
        </button>
        <view>{{ sprintf(__("验证码为：%s"), code) }}</view>
      </view>
      <verifycode-dialog
        :show="showCodeDialog"
        :len="6"
        :autoCountdown="true"
        :phone="'139****7978'"
        v-on:change="change"
      ></verifycode-dialog>
    </view>
  </view>

  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN -->
  <view class="page">
    <view class="m-cells m-cells-form">
      <view class="m-cell">
        <view class="m-cell-hd"
          ><label class="u-label">{{ __("手机号码") }}</label></view
        >
        <view class="m-cell-bd" style="display: inherit">
          <block v-if="userInfo.user_mobile && Phone == userInfo.user_mobile">
            <view style="width: 400rpx; height: 48rpx"
              >{{ user_intl }}{{ Phone }}</view
            >
          </block>
          <block v-else-if="langSetComplete">
            <!-- 国家区号 -->
            <picker
              mode="selector"
              @change="onIntlChange"
              :value="mode_index"
              :range="langLists"
              range-key="name"
              style="width: 80rpx; text-align: center"
            >
              <view class="country-int-code" style="color: #000000">{{
                user_intl
              }}</view>
            </picker>

            <input
              class="u-input"
              type="number"
              style="width: 400rpx; height: 48rpx"
              v-model="Phone"
              :placeholder="__('请输入手机号码')"
              maxlength="11"
              @input="inputphone"
            />
          </block>
        </view>
        <view v-if="!isPhone" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>

      <view class="m-cell">
        <view class="m-cell-hd"
          ><label class="u-label">{{ __("登录密码") }}</label></view
        >
        <view class="m-cell-bd"
          ><input
            class="u-input"
            type="text"
            v-model="password"
            :placeholder="__('可在其它终端通过手机及密码登录')"
            @input="onInputPassword"
        /></view>
        <view v-if="!isPassword" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>

      <view class="m-cell m-cell-vcode">
        <view class="m-cell-hd"
          ><label class="u-label">{{ __("验证码") }}</label></view
        >
        <view class="m-cell-bd"
          ><input
            class="u-input"
            type="number"
            :placeholder="__('请输入验证码')"
            maxlength="6"
            @input="inputcode"
        /></view>
        <view v-if="!isCode" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
        <view v-if="isSend" @tap="sendmessage" class="m-vcode-btn">{{
          btntext
        }}</view>
        <view v-else class="m-vcode-btn">{{ btntext }}</view>
      </view>
    </view>
    <view class="btn_box"
      ><button class="u-btn u-btn-default" @tap="submitdata">
        {{ __("保存") }}
      </button></view
    >

    <view class="content" v-if="false">
      <view>
        <button @click="openCodeDialog">
          {{
            __(
              "发送验证码 - 保存按钮 - 根据手机号发送验证码 - 填写验证码后直接提交"
            )
          }}
        </button>
        <view>{{ sprintf(__("验证码为：%s"), code) }}</view>
      </view>
      <verifycode-dialog
        :show="showCodeDialog"
        :len="6"
        :autoCountdown="true"
        :phone="'139****7978'"
        v-on:change="change"
      ></verifycode-dialog>
    </view>
  </view>
  <!-- #endif -->
</template>

<script>
import { mapState, mapMutations } from "vuex";
import verifycodeDialog from "../../components/verifycode-dialog/verifycode-dialog.vue";
export default {
  name: "asset",
  data: function () {
    return {
      logo: "",
      mode_index: 0,
      user_intl: "",
      Phone: "",
      password: "",
      Code: "",
      btntext: this.__("发送"),
      isSend: true,
      isPhone: true,
      sendTime: 120,
      isCode: true,
      isPassword: true,
      setDefaultLang: false,
      langSetComplete: false,
      showCodeDialog: false,
      code: "1231",
      langLists: [],
    };
  },
  components: {
    verifycodeDialog,
  },

  computed: {
    ...mapState([
      "Config",
      "StateCode",
      "notice",
      "plantformInfo",
      "shopInfo",
      "userInfo",
      "hasLogin",
    ]),
  },
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__("绑定手机"),
    });

    var that = this;

    // 未设置手机号时，显示
    if (!this.userInfo.user_mobile) {
      that.setData({
        setDefaultLang: true,
      });
    }
    that.initLang();

    that.setData({
      user_intl: that.getUserIntl(that.userInfo.user_intl),
      Phone: that.userInfo.user_mobile,
    });

    if (this.userInfo.user_mobile) {
      that.$.setNavigationBarTitle({
        title: this.__("修改密码"),
      });
    }
    // #ifdef MP-WEIXIN
    uni.setNavigationBarTitle({
      title: this.__("绑定手机"),
    });
    // #endif

    setTimeout(() => {
      this.getPlantformInfo((plantformInfo) => {
        this.logo = plantformInfo.logo;
      });
    }, 200);
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    initLang() {
      var that = this;
      let lists = [];
      for (let idx in this.Lang.data.items) {
        lists.push({
          id: this.Lang.data.items[idx].currency_id,
          name:
            this.Lang.data.items[idx].label +
            "(+" +
            this.Lang.data.items[idx].currency_id +
            ")",
        });
        console.info(
          this.Lang.data.items[idx].currency_id,
          this.Lang.data.items[idx].label
        );

        if (that.setDefaultLang && idx == this.mode_index) {
          this.user_intl = "+" + this.Lang.data.items[idx].currency_id;
        }
      }

      that.setData({
        langLists: lists,
        langSetComplete: true,
      });
    },
    getPhoneNumber: function (e) {
      var that = this;
      that.$.request({
        url: this.Config.URL.wx.get_user_phone_number,
        data: {
          code: e.detail.code,
        },
        dataType: "json",
        success: function (data, status, msg, code) {
          if (status == 200) {
            that.$.confirm(that.__("手机号绑定成功！"));
            that.cleanCache();
            that.login(data);
            setTimeout(() => that.$.backpage(1), 2000);
          }
        },
      });
    },

    getPhoneNumber: function (e) {
      var that = this;

      // 允许授权
      if (typeof e.detail.code !== "undefined") {
        //调用接口利用 e.detail.encryptedData, e.detail.iv 信息来解密手机号
        that.$.request({
          url: this.Config.URL.wx.get_user_phone_number,
          data: {
            code: e.detail.code,
          },
          dataType: "json",
          success: function (userInfo, status, msg, code) {
            if (status == 200) {
              that.$.request({
                url: that.Config.URL.user.overview,
                success: function (data, status, msg, code) {
                  userInfo = Object.assign(userInfo, data.member_info);

                  //that.cleanCache();
                  that.login(userInfo);

                  setTimeout(() => that.$.backpage(1), 2000);
                },
              });
            } else {
              that.$.confirm(msg);
            }
          },
        });
      } else {
        that.$.confirm(that.__("请允许手机授权！"));
      }
    },

    cleanCache: function (e) {
      var that = this;
      const language = uni.getStorageSync("selang");

      that.$.storage.clear();

      //如果不在允许的语言内，可重置
      uni.setStorageSync("selang", language);

      // #ifdef MP-WEIXIN
      var info = that.$.storage.info();
      // #endif

      //退出登录
      that.logout(true);
    },

    getUserIntl: function (userInfoIntl) {
      let that = this;
      if (that.setDefaultLang) {
        return that.user_intl;
      }
      if (that.user_intl.length > 1) {
        return that.user_intl;
      }
      return that.user_intl + userInfoIntl;
    },
    onIntlChange: function (e) {
      var that = this;
      var index = e.detail.value;
      this.setData({
        mode_index: e.detail.value,
        user_intl: "+" + this.langLists[index].id,
      });
    },
    change: function (res) {
      if (res.type == 1) {
        this.code = res.code;
        this.showCodeDialog = false;
      } else if (res.type == -1) {
        this.code = this.__("请输入验证码");
        this.showCodeDialog = false;
      } else {
        setTimeout(function () {
          res.resendCall();
        }, 3000);
      }
    },
    openCodeDialog: function () {
      this.showCodeDialog = true;
    },

    inputphone: function (e) {
      let that = this;
      this.setData({
        Phone: e.detail.value,
      });

      if (that.$.isNull(e.detail.value)) {
        this.setData({
          isPhone: false,
        });
      } else {
        if (that.$.tel(e.detail.value, this.user_intl)) {
          this.setData({
            isPhone: true,
          });
        } else {
          this.setData({
            isPhone: false,
          });
        }
      }
    },
    onInputPassword: function (e) {},

    inputcode: function (e) {
      let that = this;
      this.setData({
        Code: e.detail.value,
      }),
        that.$.isNull(e.detail.value)
          ? this.setData({
              isCode: false,
            })
          : this.setData({
              isCode: true,
            });
    },
    sendmessage: function () {
      let that = this;
      //console.info(this.Phone)
      if (that.$.isNull(this.Phone)) {
        this.setData({
          isPhone: false,
        });
      } else if (that.$.tel(this.Phone, this.user_intl)) {
        if (false && this.Phone && this.Phone == this.userInfo.user_mobile)
          that.$.confirm(that.__("你已经绑定过该手机！"));
        else if (this.isSend) {
          this.setData({
            isSend: false,
          });

          var t = this.sendTime;
          var params = {
            user_intl: that.user_intl,
            mobile: that.user_intl + this.Phone,
          };
          that.$.request({
            url: this.Config.URL.account.get_mobile_checkcode,
            data: params,
            success: function (data, status, msg, code) {
              if (status == 200) {
                var r = setInterval(function () {
                  t > 0
                    ? that.setData({
                        btntext: t-- + "s",
                      })
                    : (that.setData({
                        isSend: true,
                        sendTime: 120,
                        btntext: that.__("重新发送"),
                      }),
                      clearInterval(r));
                }, 1e3);
              } else {
                that.setData({
                  isSend: true,
                }),
                  that.$.alert(msg);
              }
            },
          });
        }
      } else {
        this.setData({
          isPhone: false,
        });
      }
    },
    submitdata: function () {
      let that = this;
      if (that.$.isNull(this.Phone))
        this.setData({
          isPhone: false,
        });
      else if (that.$.tel(this.Phone, this.user_intl))
        if (false && this.Phone == this.userInfo.user_mobile) {
          that.$.confirm(that.__("你目前已经绑定该手机！"));
        } else if (that.$.isNull(this.Code))
          this.setData({
            isCode: false,
          });
        else if (that.$.isNull(this.password)) {
          this.setData({
            isPassword: false,
          });
        } else {
          var params = {
            mobile: that.user_intl + this.Phone,
            password: this.password,
            auth_code: this.Code,
            user_intl: that.user_intl,
          };
          that.$.request({
            url: this.Config.URL.account.bind_mobile,
            data: params,
            success: function (data, status, msg, code) {
              if (status == 200) {
                let userInfo = {};

                if (data.commonResult) {
                  userInfo = data.commonResult;

                  var id = that.$.setStorageSync("uid", userInfo.user_id);
                  var key = that.$.setStorageSync("ukey", userInfo.key);

                  // 如果切换新账号重新登陆
                  that.$.request({
                    url: that.Config.URL.user.overview,
                    success: function (data, status, msg, code) {
                      userInfo = Object.assign(userInfo, data.member_info);

                      //that.cleanCache();
                      that.login(userInfo);

                      that.$.showModal(that.__("操作成功"), function () {
                        that.$.backpage(1);
                      });
                    },
                  });
                } else {
                  userInfo["as"] = 1;
                  that.login(userInfo);

                  that.$.showModal(that.__("操作成功"), function () {
                    that.$.backpage(1);
                  });
                }
              } else {
                that.$.confirm(msg);
              }
            },
          });
        }
      else
        this.setData({
          isPhone: false,
        });
    },
  },
};
</script>


<style lang="scss">
@import "../../styles/_variables.scss";

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* margin-top: 128rpx; */
}

/* 头部 logo */

.header {
  width: 161rpx;
  height: 161rpx;
  box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background-color: $main-skin-color;
  /*
	  margin-top: 80rpx;
	  margin-bottom: 60rpx;
	   */
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  margin-left: auto;
  margin-right: auto;

  image {
    width: 161rpx;
    height: 161rpx;
    border-radius: 50%;
  }
}

.m-cell-vcode {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.m-vcode-img {
  width: 216rpx;
  height: 88rpx;
}

.btn_box {
  padding: 20rpx;
}

.m-code {
  right: 210rpx;
}

.m-vcode-btn {
  width: 150rpx;
  text-align: center;
}

.login-but {
  background-color: red;
  color: white;
}
</style>