<template>
  <view :style="vuex_theme">
    <view style="width: 100%;height: 100%;">
      <view class="title" style="margin: 32rpx;">账户注销协议</view>
      <view class="content">
        <text class="text" :user-select="true">
          【特别说明】亲爱的用户，在您正式开始下一步账号注销流程前，我们先为您做出如下特别说明：注销账号后，您将无法再以此账号登录和使用{{vuex_appName}}平台（以下简称“我们”或者“{{vuex_appName}}”）的产品与服务以及产品及服务中与第三方合作的服务内容（以下简称为“产品与服务”），这同时也可能会给您的售后维权带来不便。且账号一旦注销完成，将无法恢复。请您在注销前慎重考虑。
          
          若您经过慎重考虑后仍执意决定注销账号的，请您务必先行仔细阅读和充分理解本《账号注销协议》，在同意全部内容、且在账号符合全部注销条件后，按照我们的注销操作指引点击进行下一步操作，您勾选本注销协议并点击下一步操作的，即视为您已经同意并签署和遵守本协议全部内容。如您在注销后需要再次使用我们的服务的，欢迎您使用手机号码或我们允许的其他方式重新注册。
          
          （如您执意决定注销账号的，请继续向下阅读）
          
          一、您知悉并同意：您的账号注销后，将（可能）产生包括但不限于如下结果需要您自行承担：
          
          1.账号一旦注销，您将无法登录、使用该账号（也包括无法再使用第三方登录方式），也就是说您将无法再以此账号（亦包括第三方账号绑定的账号）登录/使用/继续使用我们的产品与服务；
          
          2.账号一旦注销，您曾通过该账号登录、使用的产品与服务下的所有内容、信息、数据、记录将会被全部删除或匿名化处理，您也无法再检索、访问、获取、继续使用和找回，也无权要求我们找回（但法律法规另有约定的除外），包括但不限于：
          
          •该账号下的个人资料（例如：头像、昵称等）及绑定信息（例如：绑定手机号、邮箱等）；
          
          •该账号下的您的个人隐私信息（同时您亦不再享有《用户隐私保护政策》中约定的您的用户权利，但法律法规另有约定的除外）；
          
          •该账号曾发表的所有内容（例如：音频、图片、照片、评论、互动、点赞等）；
          
          •其他所有内容、信息、数据、记录。
          
          3. 您同意通过注销账号的方式放弃该账号下的产品与服务使用期间已产生的但未消耗完毕的权益及未来的逾期利益。即账号一旦注销，我们将会对该账号下的全部权益做清除处理，包括但不限于：
          
          •您尚未到期的各类权益等；
          
          •您尚未使用的学豆、积分、成长值等；
          
          •您在账号下的产品与/或服务中发布的内容未来的收益权益；
          
          •您在账号下的产品与/或服务中的各类身份权益；
          
          •您在账号下的产品与/或服务中的未到期的服务内容；
          
          •其他已产生但未消耗完毕的权益或未来预期的收益。
          
          4.账号一旦注销，将无法恢复（即使您在注销后以相同手机号码再次向我们申请注册账号，此时该账号将默认为新的用户账号。因此，我们善意地提醒您在申请注销前对需要备份的内容提前自行做好备份）；
          
          5.账号一旦注销，您与我们曾签署过的相关用户协议、其他权利义务性文件等相应终止（但已约定继续生效的或法律法规另有规定的除外）；
          
          6. 其他因账号注销（可能）产生的结果。
          
          二、在您向我们申请/继续申请注销账号之前，为保障您的账号安全和财产权益，您需先行检查与确保您申请注销的账号已经同时满足以下条件，这些条件包括但不限于：
          
          1. 该账号是通过我们的官方渠道注册、符合{{vuex_appName}}相关平台说明规范的账号；且为您本人注册的账号；
          
          2. 需按照我们的官方渠道提供的注销流程和操作指引进行注销操作；
          
          3. 该账号处于安全状态，包括但不限于：
          
          •最近1个月内无异常登录记录；
          
          •最近1个月内未换绑注册手机、邮箱；
          
          •该账号在申请注销期间无未处理完毕的（被）投诉、举报；
          
          •该账号在申请注销期间未处于非法的被检查状态、被限制的状态；
          
          •无其他不安全/异常状态。
          
          4. 该账号内无余额/资金 学豆，包括但不限于：
          
          •学豆、学贝已被消费 使用完毕；
          
          •账号内的其他余额/资金均已被提现或消费完毕。
          
          5. 该账号内无未处理完毕的交易，包括但不限于：
          
          •交易中无未完成的订单；
          
          •无其他未处理完毕的订单或已提供服务但未支付的订单/服务。
          
          5. 其他应满足的条件。
          
          上述问题您可首先尝试自行处理，如您无法处理的或在处理过程中有任何疑惑的，可联系客服协助处理（客服电话：400-8227611 )                 
          
          三、如何注销账号？
          
          1. 您需按照我们的官方渠道提供的注销流程和操作指引，在相关功能设置页面进行注销操作；
          
          2. 您已经仔细阅读与充分理解、且同意本《账号注销协议》的全部内容；同时，您已经检查与确认满足了本协议第二条的要求；
          
          3. 在您完成上述第2点后，我们将根据您的账号安全状态以及您的相关产品与服务的使用情况等综合判断您的账号是否符合注销条件。如满足注销条件，为保障您的账号安全和财产权益，我们需要进行注销申请的身份验证以确保您真的是账号的有权使用人（如注册手机验证方式等）。如我们在综合判断后发现账号不符合注销条件的，或者身份验证失败的，您的注销可能会失败，您可以按照我们的指引进行后续操作或联系客服协助处理；
          
          3. 我们在您成功完成上述第3点的“身份验证”后，视为您已成功向我们提交了账号注销申请，在此期间内，我们为您的该账号提供2个月60天的保留期限（即“锁定期”）。在该锁定期内，您无法登录与使用该账号，该账号下的相关信息我们也暂时不会作删除或匿名化处理。在锁定期内，您在提供相关身份信息后可以通过客服允许的方式随时向我们提出恢复该账号；如超过锁定期后，我们未收到您恢复账号的请求或者未出现任何其他不得注销事由的，该账号将被永久注销。
          
          您理解并同意，您在申请注销账号期间（含锁定期），如我们需要对相关交易、投诉或其他与您的账号相关的事项进行核实的，或者我们有其他合理的理由的，我们有权冻结您的该账号且暂时不为您提供注销服务。
          
          本协议未尽事宜，请参考《用户协议》、《用户隐私保护政策》及{{vuex_appName}}平台相关规则、说明等。同时，您知悉并同意：即使您的账号被注销了，也并不减轻或免除您应根据相关法律法规、相关协议、规则等（可能）需要承担的相关责任。
          
          如在账号注销过程中有任何问题您无法处理的或在处理过程中有任何疑惑的，可联系客服协助处理。
          
          本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律。因本协议产生之争议，双方尽最大诚意进行友好协商，如果双方不能协商一致，均应依照中华人民共和国法律予以处理，并由北京市朝阳区有管辖权的人民法院管辖。
        </text>
      </view>
      <view style="position: fixed;bottom: 0;width: 100%;">
        <view class="divide_line"></view>
        <view class="bottom">
          <view class="bd1">
            <text class="text1" @click="giveUp">放弃注销</text>
          </view>
          <view class="bd2">
            <text class="text2" @click="getCode">同意注销</text>
          </view>
        </view>
      </view>
    </view>
    
    <u-overlay :show="showModal">
      <view class="modal" v-show="showModal">
        <image src="/static/img/my/delete.png" class="close" @click="closeModal"></image>
        <view class="text0" style="margin-top:64rpx">请输入验证码</view>
        <view class="text1" style="margin: 32rpx;">已发送至手机号：{{getPhone}}</view>
        <view style="margin: 32rpx auto;width:'200rpx'">
          <u-code-input :maxlength="4" v-model="currentCode" size="48" :focus="false" :dot="true" :width="76"
            @change="change" @finish="goNext"></u-code-input>
        </view>
        <view style="margin-top: 32rpx;">
          <u-code ref="uCode" @change="codeChange">
          </u-code>
          <view class="text2" @click="getCode">{{tips}}</view>
        </view>
      </view>
    </u-overlay>

  </view>
</template>

<script>
  import {
    replaceTextToStar
  } from '@/common/commonUtil.js'
  import {
    mapState,
    mapActions
  } from 'vuex'
  
  import {
    getSmsCodeApi,
    delAccountApi,
  } from '@/config/api.js';

  export default {
    data() {
      return {
        showModal: false,
        title_style: {
          "font-size": "34rpx",
          "font-family": "PingFangSC-Medium, PingFang SC",
          "font-weight": 500,
          "color": "#000000"
        },
        tips: '',
        currentCode: ""
      }
    },

    computed: {
      ...mapState({
        // phone: (state) => state.vuex_user.phone,
        getPhone(state) {
          let phone = state.vuex_user.phone;
          return replaceTextToStar(phone);
        },
      }),
    },

    methods: {
      giveUp() {
        uni.navigateBack({
          delta: 2
        });
      },

      getCode() { //获取验证码
        this.showModal = true;
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })

          getSmsCodeApi({
            phone: this.vuex_phone
          }).then(data => {
            console.log(data)

            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            this.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();

          })
        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      },

      closeModal() {
        if (this.showModal) {
          this.showModal = false;
          this.$refs.uCode.reset();
          this.currentCode = "";
        }
      },

      change(e) {
        this.currentCode = e;
      },

      codeChange(text) {
        this.tips = text;
      },

      goNext(e) {
        console.log('输入结束，当前值为：' + e);

        delAccountApi({
          phone: this.vuex_phone,
          code: e,
        }).then(async data => {
          if (data && data.code == 200) {
            uni.showToast({
              title: '注销成功'
            });
            this.closeModal();
            
            await uni.$u.vuex('vuex_user', {});
            await uni.$u.vuex('vuex_token', {});
            await uni.setStorageSync('lifeData', {})
            
            this.$u.route({
              url: '/pages/main/my/freezing/freezing',
              type: 'reLaunch',
            });
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    font-size: 48rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #26292F;
    margin-top: 66rpx;
  }

  .content {
    width: 690rpx;
    padding: 12rpx 30rpx;
    margin-bottom: 180rpx;

    .text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #26292F;
      line-height: 40rpx;
    }
  }

  .divide_line {
    width: 100%;
    height: 2rpx;
    border: 2rpx solid #F0F0F1;
  }

  .bottom {
    height: 144rpx;
    background-color: #fff;
    display: flex;
    flex-direction: row;

    .bd1 {
      height: 96rpx;
      border-radius: 8rpx;
      background-color: rgba(0, 0, 0, 0.03);
      margin: auto 30rpx;
      width: 30%;
      display: flex;
    }

    .bd2 {
      height: 96rpx;
      border-radius: 8rpx;
      background-color: var(--primary-color);
      margin: auto 30rpx;
      width: 60%;
      display: flex;
    }

    .text1 {
      color: rgba(0, 0, 0, 0.45);
      font-size: 34rpx;
      font-family: PingFangSC-Medium;
      line-height: 48rpx;
      margin: auto;
    }

    .text2 {
      color: #ffff;
      font-size: 34rpx;
      line-height: 48rpx;
      margin: auto;
    }
  }

  .modal {
    width: 88%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 200rpx auto;
    padding-bottom: 64rpx;
    border-radius: 12rpx;
    background-color: #fff;

    .close {
      width: 48rpx;
      height: 48rpx;
      padding: 12rpx;
      position: fixed;
      right: 40rpx;
    }

    .text0 {
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      text-align: center;
    }

    .text1 {
      font-size: 34rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
    }

    .text2 {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 48rpx;
      text-align: center;
    }
  }
</style>