<template>
  <view class="auth-dialog">
    <!-- <van-popup round :show="showPopup" @close="handleClosePopup"  closeable>
      <template v-slot:default>
        <view class="content">
          <image class="logo" :src="logo"></image>
          <text class="title">奉化数字门牌</text>
          <text class="desc">方便你的生活</text>
          <button
            type="primary"
            :disabled="!disable"
            style="width: 100%"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          >
            微信快速登录
          </button>
          <view style="display: flex; align-items: center; margin-top: 20px">
            <checkbox-group @change="handleCheckChange">
              <checkbox :checked="disable" />
            </checkbox-group>
            <view class="agreement-text"
              >我已阅读并同意<text class="agreeName" @click="handleService"
                >《用户服务协议》</text
              >和<text class="agreeName" @click="handlePrivate"
                >《隐私协议》</text
              ></view
            >
          </view>
        </view>
      </template>
    </van-popup> -->
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="content">
        <image class="logo" :src="logo"></image>
        <text class="title">奉化数字门牌</text>
        <text class="desc">方便你的生活</text>
        <!-- #ifdef MP-WEIXIN -->
        <button
          type="primary"
          :disabled="!disable"
          style="width:100%; height:45px; line-height:45px;"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          微信快速登录
        </button>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <button
          type="primary"
          :disabled="!disable"
          style="width:100%; height:45px; line-height:45px;"
          open-type="getAuthorize"
          scope="phoneNumber"
          @getAuthorize="getPhoneNumber"
          @error="onAuthError"
        >
          支付宝快速登录
        </button>
        <!-- #endif -->
        <view style="display: flex; align-items: center; margin-top: 20px">
          <checkbox-group @change="handleCheckChange">
            <checkbox :checked="disable" />
          </checkbox-group>
          <view class="agreement-text"
            >我已阅读并同意<text class="agreeName" @click="handleService"
              >《用户服务协议》</text
            >和<text class="agreeName" @click="handlePrivate"
              >《隐私协议》</text
            ></view
          >
        </view>
      </view>
      <image
        class="delete-icon"
        mode="scaleToFill"
        src="/static/images/upload/delete.png"
        @tap="handleClosePopup">
      </image>
    </uni-popup>
    <custom-popup ref="customDialogRef"></custom-popup>
  </view>
</template>
<script>
import agreements from "@/common/js/agreement";
import { getPhoneNumber } from "@/api/wx";
import { storageUserInfo } from "@/utils/index";
import { USER_INFO } from "@/utils/const";
import {  updateUserInfo } from "@/api/user";
const app = getApp();
export default {
  data() {
    return {
      logo: "/static/images/home/logo.png",
      disable: false,
      showPopup: false,
    };
  },
  methods: {
    open() {
      this.$refs.popup.open();
      this.showPopup = true;
    },
    confirm() {},
    close() {},
    handleClosePopup(){
      uni.showModal({
        title: '提示',
        content: '取消授权，可能会使部分服务无法使用，或页面信息不完整',
        showCancel: false,
        confirmText: '我知道了',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户取消授权');
          }
        }
      });
      this.$emit('close')
      this.showPopup=false;
      this.$refs.popup.close();
    },
    handleCheckChange(e) {
      console.log("checkbox", e);
      console.log(this.disable);
      this.disable = !this.disable;
    },
    handleService() {
      console.log("service clikc");
      this.$refs.customDialogRef.open({
        content: agreements["SERVICE_AGREEMENT"],
      });
    },
    handlePrivate() {
      console.log("private clikc");
      this.$refs.customDialogRef.open({
        content: agreements["PRIVATE_AGREEMENT"],
      });
    },
    async getPhoneNumber(e) {
      console.log("授权电话号码回调", e);
      const userInfo = uni.getStorageSync(USER_INFO) || {};
      let phoneNumber = '';
      // #ifdef MP-WEIXIN
      if (e.detail.code) {
        const res = await getPhoneNumber({
          code: e.detail.code,
          nickName: userInfo.nickName
        });
        phoneNumber = res.data;
        await updateUserInfo({
          openId: app.globalData.openid,
          nickName: userInfo.nickName,
          phoneWx: phoneNumber,
          idCard: ""
        });
        storageUserInfo({phoneNumber: phoneNumber});
        this.$emit('close');
        uni.showTabBar();
        this.showPopup = false;
        this.$refs.popup.close();
      };
      // #endif
      // #ifdef MP-ALIPAY
      my.getPhoneNumber({
        success: (res) => {
          getPhoneNumber({
            nickName: userInfo.nickName, 
            jsonEncrypt: res.response
          }).then(res => {
            phoneNumber = res.data;
            updateUserInfo({
              openId: app.globalData.openid,
              nickName: userInfo.nickName,
              phoneWx: phoneNumber,
              idCard: ""
            }).then(res => {
              storageUserInfo({phoneNumber: phoneNumber});
              this.$emit('close');
              uni.showTabBar();
              this.showPopup = false;
              this.$refs.popup.close();
            });
          });
        },
        fail: (error) => {
          console.log(error);
        }
      });
      // #endif
    },
  },
};
</script>
<style lang="scss" scoped>
.van-popup {
  width: 80%;
  padding: 20rpx;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 15px;
  position: relative;
  .logo {
    width: 72px;
    height: 72px;
  }
  .title {
    font-weight: bold;
    font-size: 22px;
    margin-top: 10px;
  }
  .desc {
    font-size: 12px;
    padding: 4px 0;
  }
  .agreement-text {
   /*  margin-top: 10px; */
    font-size: 12px;
  }
  .agreeName {
    color: #329cff;
  }
  button {
    margin-top: 16px;
  }
}

.delete-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
<style>
/deep/ .content {
  width: 300px;
  height: 280px;
  padding: 20px;
}
</style>
