<template>
  <view class="container">
    <view class="logout-img">
      <img src="https://img.lkbang.net/xcx/logout.aa1688bc.png" alt="" />
    </view>
    <view class="logout-text">
      <view class="title">羊小咩用户您好：</view>
      <view class="logout-text-main">
        <p>
          您在申请注销羊小咩账号前，请认真阅读本页内容，
          <text class="font-weight">
            如果您不同意相关任何条款和条件约定，请您立即停止账号注销行为。我们善意地提醒您，您注销账号的行为会给您的售后维权带来诸多不便，您的账号注销后，您的个人信息我们会在系统中去除，使其保持不可被检索、访问的状态，或对其进行匿名化处理。
          </text>
        </p>
        <p>如果您执意注销账号，需要同时满足以下条件：</p>
        <p>
          <text class="font-weight">1. 自愿放弃在羊小咩中的资产和优惠券、现金券等虚拟权益；</text>
        </p>
        <p><text class="font-weight">2. 无正在进行中或未完成的订单/服务/欠款；</text></p>
        <p><text class="font-weight">3. 无正在进行中的投诉举报或被投诉举报；</text></p>
        <p><text class="font-weight">4. 账号为非冻结或非异常状态，可正常使用；</text></p>
        <p>
          <text class="font-weight"
            >如您未满足上述条件，羊小咩有权自行终止您的注销申请且无需另行得到您的同意。</text
          >
        </p>
        <p>
          <text class="font-weight">
            请您在操作之前自行备份羊小咩账号中所有信息和数据。注销账号后，您将无法再使用羊小咩账号，也将无法找回您羊小咩账号中及与账号相关的任何内容或信息。注销本羊小咩账户并不代表本羊小咩账户注销前的账户行为和相关责任得到豁免或减轻。
          </text>
        </p>
      </view>
      <button class="goods-bottom-confirm" @click="logout">已知悉风险，确认注销</button>
    </view>
    <!-- 注销账户失败提示 -->
    <uni-popup ref="failDialog" type="dialog">
      <uni-popup-dialog
        :subscribe-message="true"
        type="input"
        :show-title="true"
        :title="title"
        :content="content"
        message=""
        :duration="2000"
        :before-close="true"
        hide-cancel-btn
        confirm-txt="知道了"
        @confirm="logoutJump"
      />
    </uni-popup>
    <!-- 注销账户成功提示 -->
    <uni-popup ref="successDialog" type="dialog">
      <uni-popup-dialog
        :subscribe-message="true"
        type="input"
        :show-title="true"
        title="确定注销么？"
        content="注销账号后，您将无法使用相应服务，确认要注销羊小咩么？"
        message=""
        :duration="2000"
        :before-close="true"
        confirm-txt="确定注销"
        @confirm="logoutGetData"
      />
    </uni-popup>
  </view>
</template>

<script>
import authApi from "@/api/address.api";
import uniPopup from "@/components/uni-popup/uni-popup";
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog";
export default {
  components: {
    uniPopup,
    uniPopupDialog
  },
  data() {
    return {
      title: "注销账户失败",
      content: "",
      switchPopupState: false
    };
  },
  methods: {
    //获取是否注销登录接口
    async logoutGetData() {
      const [data] = await authApi.logout({ cancelFinance: 1 });
      console.log(data);
      this.content = data.message;
      if (+data.userStatus === 1) {
        this.switchPopupState = false;
      } else if (+data.userStatus === 2) {
        this.switchPopupState = true;
        uni.$emit("logout", true);
        uni.clearStorage();
        this.title = "亲爱的羊小咩用户";
        this.content = "您的羊小咩账号已注销，非常感谢您这段时间的陪伴";
      }
      this.$refs["failDialog"].open();
    },
    logout() {
      this.$refs["successDialog"].open();
    },
    //退出登录
    switchAccount() {
      this.$refs["login-popup"].open();
    },
    //
    logoutJump() {
      if (this.switchPopupState) {
        uni.switchTab({
          url: "/pages/index/index"
        });
      }
    }
  }
};
</script>

<style lang="scss">
page {
  background: #fff;
  border-top: 1rpx solid #dcdcdc;
}
.logout-img {
  margin: 128rpx auto 0;
  text-align: center;
  img {
    width: 176rpx;
    height: 176rpx;
  }
}
.logout-text {
  margin: 36rpx 24rpx;
  padding-bottom: 30rpx;
  p {
    color: #666666;
    text-indent: 2em;
    line-height: 2;
    font-size: 28rpx;
  }
  .font-weight {
    font-weight: 400;
    color: #333;
  }
  .title {
    margin-bottom: 60rpx;
  }
}
.logout-text-main {
  background: #f7f8fa;
  padding: 40rpx 20rpx;
  border-radius: 20rpx;
}
.goods-bottom-confirm {
  margin-top: 50rpx;
  color: #fff;
  background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
  border-radius: 50rpx;
}
</style>
