<template>
  <view class="Mall4j page-apply-distribution">
    <img-show
      :src="pic"
      img-mode="widthFix"
    />
    <view class="dist-cont">
      <rich-text
        :nodes="content"
        space="emsp"
      />
    </view>
    <view
      class="claimer-mian-btn"
      @tap="onToApplyDis"
    >
      申请成为分销员
    </view>
    <!-- 确定弹窗 -->
    <confirm-pop
      :show-pop="showPop"
      :pop-content="popContent"
      @handle-pop-cancel="onPopCancel"
      @handle-pop-confirm="onPopConfirm"
    />
  </view>
</template>

<script setup>
// 弹窗组件参数
const showPop = ref(false)
const popContent = ref({})
let confirmType = -1 // 弹窗提示类型 0：未实名认证 1：未绑定手机号 2：未绑定银行卡

let distributionUserId = ''
onLoad(options => {
  // #ifdef MP-WEIXIN
  if (options.scene) {
    distributionUserId = decodeURIComponent(options.scene)
  }
  // #endif

  // #ifdef H5 || APP-PLUS
  distributionUserId = options.distributionUserId
  // #endif
})

const paySettlementType = uni.getStorageSync('cloudPaySettlementType')
onShow(() => {
  // 加载分销员推广
  onGetClaimerList()
  if (paySettlementType === 1) {
    onGetMemberInfo()
  }
})

// 查看
const pic = ref('')
const content = ref('')
const onGetClaimerList = () => {
  http.request({
    url: '/mall4cloud_marketing/distribution_recruit/info',
    method: 'GET'
  }).then(res => {
    res.content = res.content.replace(/<p([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<p')
      .replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px; word-wrap: break-word; word-break: normal;">')
      .replace(/<img([\s\w"-=/.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=/.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=/.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=/.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
    content.value = util.formatHtml(res.content)
    pic.value = res.pic
    uni.setNavigationBarTitle({
      title: res.title
    })
  })
}

// 跳转申请页面
let isMemberInfoLoaded = false // 通联支付会员信息是否加载完成
const onToApplyDis = () => {
  if (paySettlementType === 1) {
    if (!isMemberInfoLoaded) {
      // 未加载完成，不允许点击
      return
    }
    if (!allinpayMemberInfo.isIdentityChecked) {
      // 未实名认证
      showPop.value = true
      popContent.value.content = '请先进行实名认证'
      confirmType = 0
      return
    }
    if (!allinpayMemberInfo.isPhoneChecked) {
      // 未绑定手机号
      showPop.value = true
      popContent.value.content = '请先绑定用于保障账户余额安全的手机号'
      confirmType = 1
      return
    }
  }
  if (distributionUserId) {
    uni.navigateTo({
      url: '/package-activities/pages/apply-distCon/apply-distCon?distributionUserId=' + distributionUserId
    })
  } else {
    uni.navigateTo({
      url: '/package-activities/pages/apply-distCon/apply-distCon'
    })
  }
}

// 获取用户扩展信息（通联支付）
let allinpayMemberInfo = {} // 通联支付会员信息
const onGetMemberInfo = () => {
  uni.showLoading()
  isMemberInfoLoaded = false
  http.request({
    url: '/mall4cloud_payment/allinpay/member/get_user_info',
    method: 'GET'
  }).then(res => {
    uni.hideLoading()
    isMemberInfoLoaded = true
    allinpayMemberInfo = res
  }).catch(err => {
    uni.hideLoading()
    isMemberInfoLoaded = true
    uni.showToast({
      title: err.msg,
      icon: 'none',
      duration: 1000
    })
  })
}

// 确认弹窗确认事件
const onPopConfirm = () => {
  showPop.value = false
  if (confirmType === 0) { // 未实名认证
    uni.navigateTo({
      url: '/package-user/pages/realname-verification/realname-verification'
    })
  } else if (confirmType === 1) { // 未绑定手机号
    uni.navigateTo({
      url: '/package-user/pages/bind-mobile/bind-mobile'
    })
  } else if (confirmType === 2) { // 未绑定银行卡
    uni.navigateTo({
      url: '/package-user/pages/bind-bank-card/bind-bank-card'
    })
  }
  // 清空弹窗
  onPopCancel()
}

// 确认弹窗取消事件
const onPopCancel = () => {
  showPop.value = false
  popContent.value = {}
  confirmType = -1
}

</script>

<style lang="scss" scoped>
@use "./apply-distribution.scss";
</style>
