<template>
  <view>
    <up-navbar
      bg-color="transparent"
      title="分销中心"
      @leftClick="back"
      :fixed="true"
    ></up-navbar>
    <view class="top">
      <image class="top_bg" src="/distribution/static/top_bg.png"></image>
      <view class="top_content">
        <view class="u-flex justify-between">
          <view>
            <view class="u-flex" @click="toShouyiDetail">
              <text class="font-12 color-666 u-m-r-6">总收益</text>
              <up-icon
                name="question-circle"
                size="12"
                color="#666"
                @click="questionClick('总收益')"
              ></up-icon>
            </view>
            <view class="price">9925.56</view>
          </view>
          <view>
            <view class="u-flex" @click="toShouyiDetail">
              <text class="font-12 color-666 u-m-r-6">待入账</text>
              <up-icon
                name="question-circle"
                size="12"
                color="#666"
                @click="questionClick('待入账')"
              ></up-icon>
            </view>
            <view class="price">1000.55</view>
          </view>
        </view>
        <view class="u-flex justify-between u-m-t-16">
          <view>
            <view class="u-flex">
              <text class="font-12 color-666 u-m-r-6">可提现金额</text>
            </view>
            <view class="u-flex" style="align-items: baseline">
              <text class="price">9999.99</text>
              <view class="u-flex" @click="toTixian">
                <text class="font-12 color-666 u-m-r-6">去提现</text>
                <up-icon
                  name="arrow-right"
                  size="12"
                  color="#666"
                  @click="toTixian"
                ></up-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="u-flex">
        <view class="title">我的分销</view>
      </view>
      <view class="u-m-t-36 small-title">已成为100家店铺的分销员</view>
      <view class="list">
        <view v-for="(item, index) in 3" :key="index" class="shop-item">
          <up-image width="104rpx" height="104rpx" radius="8rpx"></up-image>
          <view class="u-flex-1 u-m-l-14">
            <view class="u-flex justify-between">
              <view>
                <view class="shop-name">儿童玩具部落</view>
                <view class="address u-line-1 u-m-t-16"
                  >山西省大同市云冈区奥体西路 2666 号中国铁建国际中心</view
                >
              </view>
              <view>
                <view class="shouyi">收益</view>
                <view class="price">¥99.999</view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="u-flex justify-center font-12 color-666"
          style="align-items: baseline"
        >
          <view>查看全部店铺</view>
          <up-icon name="arrow-right" size="12" color="#666"></up-icon>
        </view>
      </view>

      <view class="u-flex">
        <view class="title">更多店铺解锁</view>
      </view>
      <view class="list">
        <view
          v-for="(item, index) in 3"
          :key="index"
          class="shop-item"
          @click="toShopDetail"
        >
          <up-image width="104rpx" height="104rpx" radius="8rpx"></up-image>
          <view class="u-flex-1 u-m-l-14">
            <view class="u-flex justify-between align-center">
              <view>
                <view class="shop-name">儿童玩具部落</view>
                <view class="u-flex">
                  <view class="tag">曾进入过店铺</view>
                </view>
                <view class="address u-line-1"
                  >山西省大同市云冈区奥体西路 2666 号中国铁建国际中心</view
                >
              </view>
              <view class="u-flex u-flex-col justify-center">
                <view class="fufei" v-if="true">付费开通</view>
                <template v-else>
                  <view class="font-12 color-333 font-700">自动开通</view>
                  <view class="u-m-t-8 color-666 font-12">还差10人开通</view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <up-popup :show="showPopup" @close="showPopup = false" mode="center" :safe-area-inset-bottom="false">
      <view class="u-p-30" style="width: 500rpx;">
        {{ popupText }}
        总收益：即您在所有店铺通过分销获得总金额，包括待入账金额，但不包含已退款订单
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
const showPopup = ref(false);
const popupText = ref('');
function questionClick(title) {
  if(title=='总收益'){
    popupText.value='总收益：即您在所有店铺通过分销获得总金额，包括待入账金额，但不包含已退款订单'
  }
  if(title=='待入账'){
    popupText.value='待入账：即已通过订单分销获得但未达到结算时间的金额，结算时间达到后将会计入可提现金额'
  }
  showPopup.value=true
}
function back() {
  uni.navigateBack({
    delta: 1,
  });
}

function toShouyiDetail(){
  uni.navigateTo({
    url: "/distribution/income-details/index",
  });
}

function toShopDetail() {
  uni.navigateTo({
    url: "/distribution/shop-detail/index",
  });
}

function toTixian() {
  uni.navigateTo({
    url: "/distribution/withdraw/index",
  });
}
</script>

<style scoped lang="scss">
.list {
  .shop-item {
    padding: 16rpx 0;
    border-top: 2rpx solid #ededed;
    font-size: 24rpx;
    color: #666;
    display: flex;
    align-items: center;
    &:first-child {
      border-top: none;
    }
    .fufei {
      color: #e8ad7b;
    }
    .tag {
      font-size: 24rpx;
      color: #ff1c1c;
      background-color: #ffe4e4;
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
    }
    .shop-name {
    }
    .address {
      max-width: 390rpx;
    }
    .shouyi {
      font-size: 24rpx;
      color: #666;
      text-align: center;
    }
    .price {
      font-size: 20rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.price {
  font-weight: 700;
  color: #333;
  font-size: 40rpx;
  margin-top: 16rpx;
}
.top {
  position: relative;
  .top_content {
    background-color: #faf7f4;
    position: absolute;
    left: 28rpx;
    right: 28rpx;
    bottom: 0;
    padding: 32rpx 106rpx 32rpx 56rpx;
    border-radius: 24rpx 24rpx 0 0;
  }
}
.top_bg {
  width: 100%;
  height: 530rpx;
}
.bottom {
  padding: 34rpx 28rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  position: relative;
  overflow: hidden;
  &::after {
    display: block;
    content: "";
    position: absolute;
    right: 0;
    bottom: 4rpx;
    background-color: #9ee708;
    border-radius: 10rpx;
    z-index: -1;
    width: 94.2rpx;
    height: 13.98rpx;
    flex-shrink: 0;
    stroke-width: 4rpx;
    stroke: #9ee708d6;
  }
}
.small-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
}
</style>