<template>
  <view>
    <up-popup
      :show="show"
      @close="close"
      mode="center"
      :safe-area-inset-bottom="false"
    >
      <view class="u-flex top justify-between u-p-32">
        <text class="title">规则说明</text>
        <up-icon name="close" @click="close"></up-icon>
      </view>
      <scroll-view style="width: 500rpx; max-height: 60vh">
        <view class="u-p-30 font-14" style="width: 500rpx">
          <view class="font-12 color-666 u-m-t-16">
            <view>
              <view> 我的收益什么时候可以到账？</view>
              <view> 分销的结算时长为{{ config.settlementDay || 0 }}天</view>
            </view>

            <view class="u-m-t-40" v-if="nextLvMoney">
              <view>怎么样才能升级分销员等级？</view>
              <template
                v-if="
                  config.upgradeType != 'not_upgrade' &&
                  config.levelConfigList &&
                  config.levelConfigList.length >= 2
                "
              >
                <template v-if="config.upgradeType == 'invite'">
                  <view
                    >邀请的有效人数达到{{
                      config.inviteCount || 0
                    }}人即可升级</view
                  >
                  <view class="u-m-t-40"> 什么是有效邀请人数？</view>
                  <view> 被邀请人在店铺消费过，即有一笔订单完成才算有效</view>
                </template>

                <template v-if="config.upgradeType == 'cost'&&nextLvMoney">
                  <view> 消费金额总计达到{{ nextLvMoney }}元即可升级</view>
                </template>
              </template>
              <template v-else>
                <view>请联系商家</view>
              </template>
            </view>
            <view class="u-m-t-40" v-if="config.upgradeType == 'cost'">
              <view>消费金额如何计算？</view>
              <view
                >消费金额是计算您和您邀请的人在店铺消费的总金额，但退款订单不计入</view
              >
            </view>
          </view>
        </view>
      </scroll-view>
    </up-popup>
  </view>
</template>


<script setup>
import { ref, computed } from "vue";

const show = defineModel({
  type: Boolean,
  default: false,
});
const props = defineProps({
  tipsType: {
    type: String,
    default: "",
  },
  config: {
    type: Object,
    default: () => {},
  },
  distributionUser: {
    type: Object,
    default: () => {},
  },
});
function close() {
  show.value = false;
}
const nextLvMoney = computed(() => {
  let nextLv = undefined;
  if (
    !props.distributionUser ||
    !props.config ||
    !props.config.levelConfigList ||
    !props.config.levelConfigList.length
  ) {
    return "";
  }
  if (!props.distributionUser || !props.distributionUser.distributionId) {
    nextLv = props.config.levelConfigList[0];
  } else {
    nextLv = props.config.levelConfigList.find(
      (v) => v.level == props.distributionUser.level + 1
    );
  }

  if (nextLv) {
    if (props.config.upgradeType == "cost") {
      return nextLv.costAmount;
    }
    if (props.config.upgradeType == "invite") {
      return nextLv.inviteCount;
    }
  }
  return "";
});

const juNextLvMoney = computed(() => {
  if (!nextLvMoney.value) {
    return "";
  }
  if (props.config.upgradeType == "cost" && props.distributionUser) {
    return nextLvMoney.value - (props.distributionUser.consumeAmount || 0);
  }
  if (props.config.upgradeType == "invite" && props.distributionUser) {
    return nextLvMoney.value - (props.config.inviteCount || 0);
  }
});
</script>

<style  lang="scss">
.title {
  color: #000000;
  font-size: 32rpx;
  font-weight: 700;
}
.top {
  border-bottom: 2rpx solid #ededed;
}
</style>