<template>
  <bottom-popup class="popup-wrap" :show="show" @close="hidePopup">
    <app-close @close="hidePopup" />
    <div class="popup-content">
      <!-- #ifdef MP-WEIXIN -->
      <div class="step-wrap">
        <app-step :index="stepIndex" />
      </div>
      <!-- #endif -->
      <!-- 获取手机号 -->
      <template v-if="stepIndex == 0">
        <div class="popup-attr-wrap">
          <img :src="wxInfo.smallAvatarUrl | default_avatar" mode="widthFix" alt />
        </div>
        <!-- #ifdef H5 -->
        <div class="creat-account-btn">
          <button class="button-com red big" @click="registerFn">点击授权登录</button>
        </div>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <div class="creat-account-btn">
          <button
            class="button-com red big mini-btn"
            @click="getWxAvatar"
          >点击创建头像</button>
        </div>
        <!-- #endif -->
      </template>
      <!-- 注册完成 -->
      <template v-if="stepIndex == 1">
        <div class="popup-phone-wrap">
          <div class="phone-icon">
            <i class="iconfont iconshoujihao"></i>
          </div>
          <div class="phone-num font-bold">{{ wxPhoneInfo }}</div>
        </div>
        <div class="creat-account-btn">
          <button
            class="button-com red big mini-btn"
            open-type="getPhoneNumber"
            @getphonenumber="getWxMobile"
            :plain="true"
          >点击生成手机号</button>
        </div>
      </template>
      <!-- 关注公众号 -->
      <template v-if="stepIndex == 2">
        <!-- #ifdef MP-WEIXIN -->
        <div class="wx-public-wrap">
          <block v-if="isPublic">
            <official-account style="width:100%" @binderror="officialErr"></official-account>
          </block>
          <block v-else>
            <div class="wx-public-content">
              <div class="wx-text-wrap">
                <div class="app-color-2">请搜索公众号</div>
                <div class="app-color-1">{{ merchantInfo.wxAliasName }}</div>
                <div class="app-color-2">关注即获得<span style="color:red;">优惠券</span></div>
              </div>
              <button class="button-com red big" @click="copyFn">复制</button>
            </div>
          </block>
        </div>
        <!-- #endif -->
      </template>
    </div>
  </bottom-popup>
</template>

<script>
import AppStep from "@/components/app-step";
import BottomPopup from "@/components/plugin/bottom-popup";
import AppClose from "@/components/module/app-close";
import { getUser, wxLoginFn,getShopUser } from "@/utils/auth";
import { getWxInfo, getWxPhone } from "@/api/mini";
export default {
  name: "login-popup-module",
  components: {
    AppStep,
    BottomPopup,
    AppClose
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {}
    },
    isPublic: {
      type: Boolean,
      default: false
    },
    merchantInfo: {
      type: Object,
      default: () => {}
    },
    subscribe: {
      type: Number,
      default: 0
    },
    mobile: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      constant: this.$constant,
      stepIndex: 0,
      wxPhoneInfo: "",
      wxInfo: {}
    };
  },
  methods: {
    hidePopup() {
      this.$emit("hide");
      this.stepIndex = 0;
    },
    registerFn() {
      this.$util.getCheckLogin();
    },
    // 获取微信信息
    getWxAvatar() {
      // uni.getUserInfo({
      //   provider: "weixin",
      //   success: res => {
      //     console.log("res", res);
          
      //   },
      //   fail: () => {}
      // });
        uni.getUserProfile({
          desc:'登录',
          success:(res)=>{
            getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(
            subRes => {
              uni.showToast({
                icon: "success"
              });
              this.wxInfo = subRes.data;
              setTimeout(() => {
                this.stepIndex = 1;
              }, 1000);
            }
          );
          },
          fail:(res)=>{
          }
        });
    },
    // 获取微信手机号
    getWxMobile(e) {
      console.log(e);
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        getWxPhone({
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData
        }).then(res => {
          console.log("用户信息", res);
          uni.showToast({
            icon: "success"
          });
          this.wxPhoneInfo = res.data.mobile;

          //只要授权了手机号就将父页面里的申请会员按钮去除 shish 2020.5.11
          //注册了手机号默认他也会关注公众号，申请会员 暂时按钮隐藏
          //这里的数据要更新到父页面的shopUser里去，因不会做未实现
          this.$emit("update:subscribe", 1);
          this.$emit("update:mobile", res.data.mobile);

          getShopUser(true);
          wxLoginFn(true);

          setTimeout(() => {
            this.stepIndex = 2;
          }, 1000);
        });
      } else {
        this.$msg("获取信息失败！");
      }
    },
    // 关注公众号
    attentionPublish() {
      this.stepIndex = 2;
    },
    officialErr(e) {
      console.log("关注公众号组件", e);
    },
    // 复制
    copyFn() {
      uni.setClipboardData({
        data: this.merchantInfo.wxAliasName,
        success: () => {
          this.$msg("复制成功");
          // this.hidePopup()
        },
        fail: () => {
          this.$msg("复制失败，请重试！");
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
// 弹窗
.popup-wrap {
  .mini-btn {
    border: none !important;
  }
  /deep/.tui-popup-class {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    // 适配iphoneX
    padding-bottom: env(safe-area-inset-bottom);
  }
  .popup-content {
    padding-top: 60px;
    .step-wrap {
      width: 80%;
      margin: 0 auto;
    }
    // 第一步
    .popup-attr-wrap {
      width: 160px;
      height: 160px;
      margin: 80px auto 60px;
    }
    .creat-account-btn {
      width: 600px;
      padding-bottom: 80px;
      margin: 0 auto;
      .button-com {
        width: 100%;
        text-align: center;
        font-size: 32px;
      }
    }
    // 第二步
    .popup-phone-wrap {
      @include disFlex(center, flex-start);
      width: 600px;
      // height: 94px;
      margin: 118px auto 62px;
      padding-left: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid $borderColor;
      .phone-icon {
        i {
          font-size: 44px;
        }
      }
      .phone-num {
        height: 80px;
        font-size: 60px;
        margin-left: 42px;
        letter-spacing: 3px;
      }
    }
    // 第三步
    .wx-public-wrap {
      width: 90%;
      padding: 10px 16px 28px;
      // box-shadow: 2px 2px 10px #eee;
      // margin: 130px auto 194px;
      margin: 0 auto;
      height: 440px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      .flex-center-between {
        margin-top: 22px;
        .wx-public-left {
          @include disFlex(center, flex-start);
          .wx-public-img {
            width: 78px;
            height: 78px;
          }
          .wx-public-det {
            color: #7c7e7d;
            margin-left: 20px;
            .wx-public-tit {
              color: #333;
              font-size: 32px;
              margin-bottom: 6px;
            }
          }
        }
        .wx-public-btn {
          color: $mainColor1;
          border-color: $borderColor1;
          border-radius: 10px;
        }
      }

      .wx-public-content {
        width: 100%;
        .wx-text-wrap {
          div {
            font-size: 26px;
            text-align: center;
            margin-bottom: 20px;
          }
        }
      }

      .button-com {
        width: 90%;
        margin: 20px 5% 0;
      }
    }
  }
}
</style>
