<template>
  <view class="login-container">
    <image class="logo-image" src="/static/logo.png"></image>
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>

    <!-- 标题文字 -->
    <image class="left-image" src="/static/left.png"></image>
    <image class="right-image" src="/static/right.png"></image>

    <!-- 授权按钮和底部信息 -->
    <view class="group">
      <button class="auth-btn" open-type="getUserInfo" @click="handleUserInfo">
        微信授权
      </button>
      <view class="bottom-info">中共承德市委人才工作领导小组办公室</view>
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        :type="msgType"
        cancelText="关闭"
        confirmText="同意"
        title="提示"
        content="请确认是否登录承德英才卡"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      msgType: "warn",
      baseUrl: getApp().globalData.baseUrl,
    };
  },
  onReady() {
    this.queryBind();
  },
  methods: {
    //查询是否绑定
    async queryBind() {
      wx.login({
        success: (res) => {
          if (res.errMsg === "login:ok") {
            uni.request({
              url: this.baseUrl + "/wxsfrz/selBinDing?code=" + res.code,
              method: "POST",
              success: ({ data }) => {
                if (data.wxsfrz != null) {
                  getApp().globalData.openId = data.wxsfrz.openid;
                  if (data.wxsfrz.name != null && data.wxsfrz.sfzh != null) {
                    uni.reLaunch({
                      url:
                        "/pages/bindCard?name=" +
                        data.wxsfrz.name +
                        "&sfzh=" +
                        data.wxsfrz.sfzh,
                    });
                  } else {
                    setTimeout(() => {
                      uni.reLaunch({
                        url: "/pages/bindForm",
                      });
                    }, 4000);
                  }
                }
              },
              fail: (err) => {
                console.error("Failed to query binding:", err);
              },
            });
          }
        },
      });
    },
    dialogConfirm() {
      wx.login({
        success: (res) => {
          if (res.code) {
            uni.request({
              url: this.baseUrl + "/wxsfrz/wxBinDing?code=" + res.code,
              method: "POST",
              success: ({ data }) => {
                getApp().globalData.openId = data.wxsfrz.openid;
                uni.reLaunch({
                  url: "/pages/bindForm",
                });
              },
            });
          }
        },
      });
    },
    handleUserInfo(e) {
      this.$refs.alertDialog.open();
    },
    dialogClose() {
      this.$refs.alertDialog.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.logo-image {
  position: absolute;
  top: 180rpx;
  height: 200rpx;
  width: 200rpx;
  animation: slideDown 1s ease-out;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-200%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(200%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.group {
  position: absolute;
  bottom: 160rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left-image {
  position: fixed;
  top: 546rpx;
  width: 100rpx;
  height: 422rpx;
  left: 244rpx;
  animation: slideRight 1s ease-out;
}
.right-image {
  position: fixed;
  top: 427rpx;
  width: 100rpx;
  height: 422rpx;
  left: 442rpx;
  animation: slideLeft 1s ease-out;
}
.login-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.title-container {
  margin-top: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-text {
  font-size: 48rpx;
  color: #b8860b;
  font-weight: bold;
  margin: 10rpx 0;
  letter-spacing: 8rpx;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.bottom-info {
  font-size: 28rpx;
  color: #fff;
  opacity: 0.9;
}

.auth-btn {
  margin-bottom: 100rpx;
  width: 490rpx;
  height: 80rpx;
  background: rgba(59, 127, 255, 0.9);
  color: #fff;
  font-size: 38rpx;
  border-radius: 10rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  letter-spacing: 7rpx;
  &::after {
    border: none;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.5),
      transparent
    );
  }
}
</style>
