<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
::v-deep .q-field__control {
  height: 40px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.card {
  width: 434px;
  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="content q-ma-lg bg-white">
    <div class="q-ma-lg">
      <div class="tips">登陸方式管理</div>
      <div class="card">
        <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">
        <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);
    }
    this.getUserInfo();
    this.getOpenInfo();
    this.userInfo = this.$user.userInfo;
    console.log("let u = this.$user.userInfo;", this.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
      );
    },
    changeWechat() {
      const { AppID, State, OpenRedirectUri } = this.openInfo;
      let redirect_uri = OpenRedirectUri;
      const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${redirect_uri}/loginInfo&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`;
      window.location.href = url;
    },
    changeEmail() {
      this.showReset = true;
    },
    resetEmailSuccess() {
      this.showReset = false;
      this.getUserInfo();
    },
    reSetWechat(code, state) {
      this.apipost(
        "GetOpenInfo_post",
        { code, state },
        (r) => {
          if (r.data.resultCode == 1) {
            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>