<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.card-pc {
  width: 434px;
}
.card {
  height: 75px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 15px 35px;
  margin-top: 16px;
}
.img-box {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 25px;
}
.img {
  width: 50px;
  height: 50px;
  display: block;
  padding: 11px;
}
</style>
<template>
  <div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
    <div class="q-ma-lg">
      <div class="tips">登陸方式管理</div>
      <div class="card" :class="{'card-pc': $q.platform.is.desktop}">
        <div class="flex justify-between">
          <div>
            <span class="f18 bold">郵箱</span
            ><span class="text-grey-6">(默認地址)</span>
            <div class="text-grey-7">{{ form.Mailbox }}</div>
          </div>
          <div>
            <span class="user-edit mr0" @click="changeEmail">修改</span>
            <!-- <span class="text-grey-6 cursor-pointer" @click="deleteUser(item)">删除</span> -->
          </div>
        </div>
      </div>
      <div class="card flex justify-between" :class="{'card-pc': $q.platform.is.desktop}">
        <div class="flex justify-between">
          <div class="img-box">
            <img class="img" src="../../assets/img/wechat.png" />
          </div>
          <div class="q-ml-sm">
          <div class="f18 bold">微信</div>
          <div class="text-grey-7">{{ form.WXNickName }}</div></div>
        </div>
        <div>
          <span class="user-edit mr0" @click="changeWechat">修改</span>
          <!-- <span class="text-grey-6 cursor-pointer" @click="deleteUser(item)">删除</span> -->
        </div>
      </div>
      <q-dialog content-style="width: 900px" v-model="showReset">
        <resetEmail @change="resetEmailSuccess"></resetEmail>
      </q-dialog>
    </div>
  </div>
</template>
<script>
import resetEmail from "./components/resetEmail.vue";
export default {
  components: { resetEmail },
  data() {
    return {
      showReset: false,
      form: {},
    };
  },
  mounted() {
    const { code, state } = this.$route.query;
    if (code) {
      this.reSetWechat(code, state);
    } else {
    this.getUserInfo();
    this.getOpenInfo();
    }
    this.userInfo = this.$user.userInfo;
  },
  methods: {
    getUserInfo() {
      this.apipost(
        "GetCustomerInfo_post",
        {
          Id: this.userInfo?.id,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            this.form = res.data.data;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    getOpenInfo() {
      this.apipost(
        "GetOpenInfo_post",
        {},
        (r) => {
          if (r.data.resultCode == 1) {
            this.openInfo = r.data.data;
          } else {
            this.$q.notify({
              type: "negative",
              message: r.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    isWeChat() {
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      return ua.match(/MicroMessenger/i) == "micromessenger";
    },
    changeWechat() {
      const { AppID, State, OpenRedirectUri } = this.openInfo;
      let redirect_uri = OpenRedirectUri;
      let url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${encodeURIComponent(`http://www.oytour.com/#/loginInfo`)}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`;
      if (this.$q.platform.is.mobile && this.isWeChat()) {
        // 移动端微信环境
        url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppID}&redirect_uri=${encodeURIComponent(
          "http://www.oytour.com/#/loginInfo"
        )}&response_type=code&scope=snsapi_userinfo&state=${State}&wechat_redirect=${redirect_uri}`;
      }
      alert('url::' + url)
      window.location.href = url;
    },
    changeEmail() {
      this.showReset = true;
    },
    resetEmailSuccess() {
      this.showReset = false;
      this.getUserInfo();
    },
    reSetWechat(code, state) {
      this.apipost(
        "b2c_post_UpdateWeChatBind",
        { code, state },
        (r) => {
          if (r.data.resultCode == 1) {
            this.getUserInfo()
            this.$router.replace('/loginInfo')
            this.$q.notify({
              type: "positive",
              message: r.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          } else {
            this.$q.notify({
              type: "negative",
              message: r.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
  },
};
</script>