<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 400rpx;height: 200rpx;"
        :src="globalConfig.appInfo.logo"
        mode="widthFix">
      </image>
    </view>
    <view class="login-form-content">
      <!-- 登录按钮 -->
      <view class="action-btn">
        <view class="mark-btn"
          @click="loginMark"
          v-if="!agreeProtocol"></view>
        <button open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="login-btn cu-btn block bg-blue lg round">手机号登录</button>
      </view>
      <view class="xieyi text-center">
        <van-checkbox :value="agreeProtocol"
          @change="agreeFn"></van-checkbox>
        <text class="text-grey1">阅读并同意协议</text>
        <text @click="$refs.agreementDialog.open()"
          class="text-blue">《用户协议》</text>
      </view>
    </view>
    <uni-popup ref="agreementDialog"
      mask-click
      type="dialog">
      <uni-popup-dialog type="info"
        confirmText="同意"
        @confirm="dialogConfirm"
        title="小卤通 小程序隐私保护指引">
        <p>本指引是小卤通小程序开发者 北京王小卤网络科技有限公司（以下简称“开发者”）为处理你的个人信息而制定。</p>
        <h4>开发者处理的信息</h4>
        <p>根据法律规定，开发者仅处理实现小程序功能所必要的信息。</p>
        <ul class="agreement_ul">
          <li>为了注册促销员账号，开发者将在获取你的明示同意后，收集你的微信昵称、头像。</li>
          <li>为了锁定上下班打卡地点，开发者将在获取你的明示同意后，收集你的位置信息。</li>
          <li>开发者 收集你选中的照片或视频信息，用于上传推广照片。</li>
          <li>为了拍摄推广照片，开发者将在获取你的明示同意后，访问你的摄像头。</li>
          <li>为了使用手机号注册/登录小程序，开发者将在获取你的明示同意后，收集你的手机号。</li>
        </ul>
        <h4>第三方插件信息/SDK信息</h4>
        <p>关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
          若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。</p>
        <ul class="agreement_ul">
          <li>邮箱:liqiulin@wangxiaolu.com.cn</li>
        </ul>
        <h4>你的权益</h4>
        <p>关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</p>
        <h4>开发者对信息的存储</h4>
        <p>开发者将会在本指引所明示的用途内使用收集的信息
          如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以小程序通知方式告知并征得你的明示同意。</p>
        <h4>信息的使用规则</h4>
        <p>开发者将会在本指引所明示的用途内使用收集的信息
          开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。</p>
        <h4>信息对外提供</h4>
        <p>邮箱 : liqiulin@wangxiaolu.com.cn</p>
        <p>更新日期：2025-02-26</p>
        <p>生效日期：2025-02-26</p>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { getWxAccessToken } from '@/utils/auth';
import storage from '../utils/storage'
import constant from '../utils/constant';

export default {
  data() {
    return {
      globalConfig: getApp().globalData.config,
      agreeProtocol: false
    }
  },
  methods: {
    loginMark() {
      this.$modal.msgError('请先勾选同意协议')
    },
    // 手机号登录
    async getPhoneNumber(e) {
      // 判断是否提供手机号
      if (!e.detail.code) {
        return this.$modal.msgError("请选择手机号登录")
      }

      this.$modal.loading("登录中，请耐心等待...")
      // 通过微信小程序 API 获取手机号
      const [err, { data: { phone_info: { phoneNumber } } }] = await uni.request({
        url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${getWxAccessToken()}`,
        method: 'POST',
        data: {
          code: e.detail.code
        }
      })
      if (err) return this.$modal.msgError('微信 API 获取手机号出错')

      // 调用微信登录接口，获取 openID
      const openId = await this.$store.dispatch('getOpenId')

      // 调用自己后台登录接口
      const loginRes = await this.$store.dispatch('Login', { phoneNumber, openId })

      // 手机号从未注册过-需要填写资料完成注册
      if (loginRes.code === 3004) {
        setTimeout(() => {
          this.$tab.reLaunch('/pages/register')
        }, 1500)
      } else {
        // 之前注册提交过资料，直接登录成功去首页
        storage.set(constant.loginPhone, phoneNumber)
        this.$tab.reLaunch('/pages/home/index')
      }

      this.$modal.closeLoading()
    },
    // 同意协议
    dialogConfirm() {
      this.agreeProtocol = true
    },
    agreeFn(e) {
      this.agreeProtocol = e.detail
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

// 用户协议弹窗
.agreement_ul {
  li {
    margin-top: 20rpx;
  }
}

.uni-popup-dialog {
  height: 70vh;
  overflow: scroll;

  .uni-dialog-content {
    display: flex;
    flex-direction: column !important;
  }
}


.normal-login-container {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .action-btn {
      position: relative;

      .mark-btn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 10000;
      }
    }

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }

    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
    }

    .reg {
      margin-top: 15px;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}
</style>
