<template>
  <view class="page member-user-info-container">
    <view class="m-cells m-cells-form">
      <view class="m-cell" style="padding: 2rpx 30rpx">
        <view class="m-cell-hd"><label class="u-label">{{ __("头像") }}</label></view>
        <view class="m-cell-bd" style="padding: 0; margin: 0; line-height: 1">
          <view class="uni-uploader-body">
            <view class="uni-uploader__files">
              <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <block v-if="user_avatar">
                  <view class="uni-uploader__file">
                    <image class="uni-uploader__img" :src="user_avatar" :data-src="user_avatar"
                      @click.stop="chooseAvatar">
                    </image>
                  </view>
                </block>
                <view class="uni-uploader__input-box" v-else>
                  <view class="uni-uploader__input" @click.stop="chooseAvatar"></view>
                </view>
              </button>
            </view>
          </view>
        </view>
        <text class="m-cell-ft-right"></text>
      </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" :value="user_level_name" disabled="true" />
        </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="number" :value="user_id" disabled="true" />
        </view>
      </view>
      <view class="m-cell" v-if="false">
        <view class="m-cell-hd"><label class="u-label">{{ __("账号") }}</label></view>
        <view class="m-cell-bd">
          <input class="u-input" type="text" :value="user_account" disabled="true" />
        </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="nickname" :value="user_nickname" placeholder="请输入昵称"
            @input="inputuser_user_nickname" />
        </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" :value="user_realname" :placeholder="__('请输入姓名')" @input="inputReName"
            maxlength="30" />
        </view>
      </view>
      <view class="m-celli hide">
        <view class="m-cell-hd"><label class="u-label">{{ __("身份证") }}</label></view>
        <view class="m-cell-bd">
          <input class="u-input" type="idcard" :value="user_idcard" :placeholder="__('请输入身份证号码')" @input="inputICard"
            maxlength="18" />
        </view>
        <div v-if="!isCardNo" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </div>
      </view>

      <view class="m-cell" @click="showbox" v-if="Config.PLANTFORM_FX_AGENT_ENABLE && false">
        <view class="m-cell-hd"><label class="u-label">{{ __("地区") }}</label></view>
        <view class="m-cell-bd">
          <label>{{ seladstr }}</label>
        </view>
        <view v-if="!isDistrict" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>
      <view class="m-cell" v-if="false">
        <view class="m-cell-hd"><label class="u-label">{{ __("地址") }}</label></view>
        <view class="m-cell-bd">
          <input class="u-input" type="text" :value="user_address" :placeholder="__('请输入联系地址')" @input="onInputAddress" />
        </view>
        <view v-if="!isUserAddress" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>
    </view>
    <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">
          <picker mode="date" @change="bindDateChange">
            <label>{{ user_birthday }}</label>
          </picker>
        </view>
        <text class="m-cell-ft-right birthday-right-icon"></text>
      </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" :value="user_email" :placeholder="__('请输入邮箱地址')" @input="inputuser_email"
            maxlength="30" />
        </view>
        <view v-if="!isUserEmail" class="m-cell-ft">
          <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
        </view>
      </view>
    </view>
    <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', { 'phone-right-30': !isUserMobile }]">
          <input class="u-input" type="number" :placeholder="__('请输入手机号码')" @input="inputphone"
            :value="user_mobile" />
        </view>
        <view v-if="!isUserMobile" 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 hide">
        <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" @click="sendmessage" class="m-vcode-btn">{{
          btntext
        }}</view>
        <view v-else class="m-vcode-btn">{{ btntext }}</view>
      </view>
    </view>
    <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
      @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>

    <button class="u-btn u-btn-default" @click="submitInfo" style="margin-top: 50rpx">
      {{ __("保存") }}
    </button>
  </view>
</template>


<script>
import mpvueCityPicker from "../../components/mpvue-citypicker/mpvueCityPicker.vue";
import Tools from "../../helpers/Tools";

import { mapState, mapMutations } from "vuex";

export default {
  data: function () {
    return {
      options: {},
      user_id: 0,
      user_account: "",
      user_nickname: "",
      user_realname: "",
      user_avatar: "",
      user_idcard: "",
      user_address: "",
      isCardNo: true,
      user_email: "",
      user_birthday: "",
      isUserEmail: true,
      isUserAddress: true,
      user_mobile: "",
      mobile_code: "",
      btntext: "发送",
      isSend: true,
      isUserMobile: true,
      sendTime: 120,
      isCode: true,
      user_level_name: "",
      isDistrict: true,

      Pindex: 0,
      selectedProId: 0,
      selectedCityId: 0,
      selectedCountyId: 0,
      selectedPro: "",
      selectedCity: "",
      selectedCounty: "",
      seladstr: "请选择所属地区",

      cityPickerValueDefault: [0, 0, 0],
      themeColor: "#007AFF",
    };
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  components: {
    mpvueCityPicker,
  },
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__("个人资料"),
    });

    //console.info(this.userInfo);
    this.seladstr = this.__("请选择所属地区");

    let that = this;

    that.setData({
      options: options,
    });

    this.forceUserInfo(function (user) {
      that.setData({
        user_id: user.user_id,
        user_account: that.$.isNull(user.user_account) ? "" : user.user_account,
        user_nickname: that.$.isNull(user.user_nickname)
          ? ""
          : user.user_nickname,
        user_realname: that.$.isNull(user.user_realname)
          ? ""
          : user.user_realname,
        user_avatar: that.$.isNull(user.user_avatar) ? "" : user.user_avatar,
        user_idcard: that.$.isNull(user.user_idcard) ? "" : user.user_idcard,
        user_email: that.$.isNull(user.user_email) ? "" : user.user_email,
        user_birthday: that.$.isNull(user.user_birthday)
          ? that.__("请选择生日日期")
          : user.user_birthday,
        user_mobile: that.$.isNull(user.user_mobile) ? "" : user.user_mobile,
        user_level_name: that.$.isNull(user.user_level_name)
          ? ""
          : user.user_level_name,
      });
    });
  },
  onShow: function (opt) {
    let that = this;
    this.setData({
      user_id: this.userInfo.user_id,
      user_account: that.$.isNull(this.userInfo.user_account)
        ? ""
        : this.userInfo.user_account,
      user_nickname: that.$.isNull(this.userInfo.user_nickname)
        ? ""
        : this.userInfo.user_nickname,
      user_realname: that.$.isNull(this.userInfo.user_realname)
        ? ""
        : this.userInfo.user_realname,
      user_avatar: that.$.isNull(this.userInfo.user_avatar)
        ? ""
        : this.userInfo.user_avatar,
      user_idcard: that.$.isNull(this.userInfo.user_idcard)
        ? ""
        : this.userInfo.user_idcard,
      user_email: that.$.isNull(this.userInfo.user_email)
        ? ""
        : this.userInfo.user_email,
      user_birthday: that.$.isNull(this.userInfo.user_birthday)
        ? this.__("请选择生日日期")
        : this.userInfo.user_birthday,
      user_mobile: that.$.isNull(this.userInfo.user_mobile)
        ? ""
        : this.userInfo.user_mobile,
    });
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    bindDateChange: function (e) {
      this.setData({
        user_birthday: e.detail.value,
      });
    },
    inputReName: function (e) {
      this.setData({
        user_realname: e.detail.value,
      });
    },
    inputuser_user_nickname: function (e) {
      this.setData({
        user_nickname: e.detail.value,
      });
    },

    inputICard: function (e) {
      let that = this;
      if (that.$.isNull(e.detail.value)) {
        this.setData({
          isCardNo: true,
          user_idcard: e.detail.value,
        });
        return;
      }
      this.IdentityCodeValid(e.detail.value)
        ? this.setData({
          isCardNo: true,
        })
        : this.setData({
          isCardNo: false,
        }),
        this.setData({
          user_idcard: e.detail.value,
        });
    },
    inputuser_email: function (e) {
      let that = this;
      this.setData({
        user_email: e.detail.value,
      }),
        that.$.isNull(e.detail.value)
          ? this.setData({
            isUserEmail: false,
          })
          : /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(
            e.detail.value
          )
            ? this.setData({
              isUserEmail: true,
            })
            : this.setData({
              isUserEmail: false,
            });
    },

    onInputAddress: function (e) {
      let that = this;

      if (e.detail.value) {
        this.setData({
          isUserAddress: true,
        });
      } else {
        this.setData({
          isUserAddress: false,
        });
      }
    },

    submitInfo: function (e) {
      let that = this;

      this.update();

      /*
        if (!that.$.isNull(this.user_idcard) && !this.isCardNo) {
          return;
        }
        */
      /*
                if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.user_email))
                {
                    this.setData({isUserEmail: false});
                    return
                }*/

      /*
        if (!that.$.isNull(this.user_mobile)) {
          this.update();
        } else if (that.$.isNull(this.user_mobile)) {
          this.setData({
            isUserMobile: false
          });
        } else if (!/^1[23456789]\d{9}$/.test(this.user_mobile)) {
          this.setData({
            isUserMobile: false
          });
        } else if (this.user_mobile == this.userInfo.user_mobile) {
          that.$.confirm("你已经绑定过该手机！");
        } else if (that.$.isNull(this.mobile_code)) {
          this.setData({
            isCode: false
          });
        } else {}
        */
    },

    update: function () {
      var that = this;
      var params = {
        user_id: this.user_id,
        user_nickname: this.user_nickname,
        user_realname: this.user_realname,
        user_avatar: this.user_avatar,
        //user_idcard: this.user_idcard,
        user_email: this.user_email,
        user_birthday: this.user_birthday,
        user_mobile: this.user_mobile,
        //code: this.mobile_code,
      };

      if (that.user_email && !that.$.email(that.user_email)) {
        that.$.confirm(that.__("请输入正确的邮箱！"));
        return;
      }

      if (false) {
        params.user_province_id = that.selectedProId;
        params.user_city_id = that.selectedCityId;
        params.user_county_id = that.selectedCountyId;
        params.user_address = that.user_address;
      }

      params.user_birthday == that.__("请选择生日日期") &&
        (params.user_birthday = "");

      that.$.request({
        url: this.Config.URL.account.edit_user_info,
        data: params,
        success: function (data, status, msg, code) {
          if (status == 200) {
            that.$.showToast({
              title: that.__("更新成功!"),
              success: function () {
                //this.userInfo = data;
                that.userInfo.user_nickname = params.user_nickname;
                that.userInfo.user_realname = params.user_realname;
                that.userInfo.user_avatar = params.user_avatar;
                that.userInfo.user_idcard = params.user_idcard;
                that.userInfo.user_email = params.user_email;
                that.userInfo.user_birthday = params.user_birthday;
                that.userInfo.user_mobile = params.user_mobile;

                that.login(that.userInfo);

                that.$.navigateBack(1);
              },
            });
          } else {
            that.$.confirm(msg);
          }
        },
      });
    },
    IdentityCodeValid: function (e) {
      var t = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江 ",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北 ",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏 ",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外 ",
      },
        n = true;
      if (
        !e ||
        !/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/i.test(
          e
        )
      ) {
        n = false;
      } else if (!t[e.substr(0, 2)]) {
        n = false;
      } else if (e.length == 18) {
        e = e.split("");
        var r = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
          i = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2],
          s = 0,
          o = 0,
          u = 0;
        for (var a = 0; a < 17; a++) {
          (o = e[a]), (u = r[a]), (s += o * u);
        }
        var f = i[s % 11];
        i[s % 11] != e[17].toUpperCase() && (n = false);
      }
      return n;
    },
    inputphone: function (e) {
      let that = this;
      this.setData({
        user_mobile: e.detail.value,
      }),
        that.$.isNull(e.detail.value)
          ? this.setData({
            isUserMobile: false,
          })
          : /^1[23456789]\d{9}$/.test(e.detail.value)
            ? this.setData({
              isUserMobile: true,
            })
            : this.setData({
              isUserMobile: false,
            });
    },
    inputcode: function (e) {
      let that = this;
      this.setData({
        mobile_code: e.detail.value,
      }),
        that.$.isNull(e.detail.value)
          ? this.setData({
            isCode: false,
          })
          : this.setData({
            isCode: true,
          });
    },

    onChooseAvatar(event) {
      const { avatarUrl } = event.detail
      this.user_avatar = avatarUrl;
      this.onUploadAvatar(avatarUrl)
    },

    onUploadAvatar(filePath) {
      var that = this;
      let ukey = uni.getStorageSync("ukey");

      that.$.showLoading();

      that.$.uploadFile({
        url: that.Config.URL.upload,
        method: "POST",
        filePath,
        name: "upfile",
        formData: {
          perm_key: ukey,
        },
        success: function (n) {
          that.$.hideLoading();

          var up_res = that.$.parseJSON(n.data);
          var s = up_res.data.url;
          that.setData({
            user_avatar: s,
          });
          that.user_avatar = s;
        },
        fail: function (e) {
          that.$.hideLoading();
        },
        complete: function (e) {
          that.$.hideLoading();
        },
      });
    },

    chooseAvatar: function (e) {
      var that = this;
      let ukey = uni.getStorageSync("ukey");
      that.$.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        success: function (n) {
          that.$.showLoading();
          var r = n.tempFilePaths;
          that.$.uploadFile({
            url: that.Config.URL.upload,
            method: "POST",
            filePath: r[0],
            name: "upfile",
            formData: {
              perm_key: ukey,
            },
            // 							header: {
            // 								"content-type": "multipart/form-data"
            // 							},
            success: function (n) {
              that.$.hideLoading();

              var up_res = that.$.parseJSON(n.data);
              var s = up_res.data.url;
              that.setData({
                user_avatar: s,
              });
              that.user_avatar = s;
            },
            fail: function (e) {
              that.$.hideLoading();
            },
            complete: function (e) {
              that.$.hideLoading();
            },
          });
        },
        fail: function (e) {
          that.$.hideLoading();
        },
        complete: function (e) {
          that.$.hideLoading();
        },
      });
    },
    sendmessage: function () {
      let that = this;
      if (that.$.isNull(this.user_mobile)) {
        this.setData({
          isUserMobile: false,
        });
      } else if (!/^1[23456789]\d{9}$/.test(this.user_mobile)) {
        this.setData({
          isUserMobile: false,
        });
      } else if (this.user_mobile == this.userInfo.user_mobile) {
        that.$.confirm(that.__("你已经绑定过该手机！"));
      } else if (this.isSend) {
        this.setData({
          isSend: false,
        });
        var t = this.sendTime;
        var params = {
          mobile: this.user_mobile,
        };
        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);
            }
          },
        });
      }
    },
    // 三级联动选择
    showbox() {
      /*
        this.setData({
            isShow: true
        })
        */
      this.$refs.mpvueCityPicker.show();
    },

    onCancel(e) {
      //console.log(e)
    },

    onConfirm(e) {
      let that = this;
      //console.info(e);
      //console.info(JSON.stringify(e));
      this.pickerText = JSON.stringify(e);

      this.setData({
        isDistrict: true,
        Pindex: this.cityCode,
        selectedProId: e.value[0],
        selectedCityId: e.value[1],
        selectedCountyId: e.value[2],
        selectedPro: e.label[0],
        selectedCity: e.label[1],
        selectedCounty: e.label[2],
        seladstr: that.$.isNull(e.label.toString())
          ? that.__("请选择地址")
          : e.label.toString(),
      });
    },
  },
};
</script>

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

.m-cell-bd label {
  color: #888;
}

.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;
}

.member-user-info-container {
  padding: 20rpx;

  .m-cells {
    padding: 0 20rpx;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
  }

  .uni-uploader-body {
    float: right;
  }

  .avatar-wrapper {
    background: none;
    height: auto;
    line-height: auto;
    padding: 0;
  }

  .uni-uploader__file {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    display: inline;

    .uni-uploader__img {
      width: 80rpx;
      height: 80rpx;
    }
  }

  .m-cell {
    padding: 0 24rpx;
    display: flex;
    justify-content: space-between;
    height: 124rpx;
    border-bottom: 0.5px solid #ededed;
  }

  .m-cell-bd {
    text-align: right;
    color: #999ca7;

    .u-input {
      justify-content: flex-end;
    }
  }

  .m-cell-ft-right {
    &::after {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #b0b3bf;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: relative;
      top: -2px;
      position: absolute;
      top: 50%;
      margin-top: -2px;
    }
  }

  .birthday-right-icon {
    &::after {
      top: 47%;
    }
  }

  .phone-right-30 {
    margin-right: 60rpx;
  }
}
</style>