<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">
              <text class="font-12 color-666 u-m-r-6" @click="toShouyiDetail('')"
                >总收益</text
              >
              <up-icon
                name="question-circle"
                size="12"
                color="#666"
                @click="questionClick('总收益')"
              ></up-icon>
            </view>
            <view class="price" @click="toShouyiDetail('')">{{
              state.totalIncome
            }}</view>
          </view>
          <view>
            <view class="u-flex">
              <text class="font-12 color-666 u-m-r-6" @click="toShouyiDetail('待入账')"
                >待入账</text
              >
              <up-icon
                name="question-circle"
                size="12"
                color="#666"
                @click="questionClick('待入账')"
              ></up-icon>
            </view>
            <view class="price" @click="toShouyiDetail('待入账')">{{
              state.pendingIncome
            }}</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" @click="toTixian"
                >可提现金额</text
              >
            </view>
            <view class="u-flex" style="align-items: baseline">
              <text class="price">{{ state.cashOutAmount }}</text>
              <view class="u-flex" @click="toTixian">
                <text class="font-12 color-666 u-m-r-6 u-m-l-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"
        >已成为{{ state.activates.totalRow }}家店铺的分销员</view
      >
      <view class="list">
        <view
          v-for="(item, index) in state.activates.records"
          @click="toShopDetail(item, 'activates')"
          :key="index"
          class="shop-item"
        >
          <up-image
            width="104rpx"
            height="104rpx"
            radius="8rpx"
            :src="item.coverImg"
          ></up-image>
          <view class="u-flex-1 u-m-l-14">
            <view class="u-flex justify-between">
              <view>
                <view class="shop-name">{{ item.shopName }}</view>
                <view class="address u-line-1 u-m-t-16">{{
                  item.shopAddress
                }}</view>
              </view>
              <view>
                <view class="shouyi">收益</view>
                <view class="price">¥{{ item.income || "0.00" }}</view>
              </view>
            </view>
          </view>
        </view>
        <view
          v-if="state.activates.totalRow > 0"
          class="u-flex justify-center font-12 color-666"
          style="align-items: baseline"
          @click="toShopList('activates')"
        >
          <view>查看全部店铺</view>
          <up-icon name="arrow-right" size="12" color="#666"></up-icon>
        </view>
      </view>

      <view class="u-flex u-m-t-32">
        <view class="title">更多店铺解锁</view>
      </view>
      <view class="list">
        <view
          v-for="(item, index) in state.unActivates.records"
          :key="index"
          class="shop-item"
          @click="toShopDetail(item, 'unActivates')"
        >
          <up-image
            width="104rpx"
            height="104rpx"
            radius="8rpx"
            :src="item.coverImg"
          ></up-image>
          <view class="u-flex-1 u-m-l-14">
            <view class="u-flex justify-between align-center">
              <view>
                <view class="shop-name">{{ item.shopName }}</view>
                <view class="u-flex">
                  <view class="tag" v-if="item.labelContent">{{
                    item.labelContent
                  }}</view>
                </view>
                <view class="address u-line-1">{{ item.shopAddress }}</view>
              </view>
              <view class="u-flex u-flex-col justify-center">
                <view class="fufei" v-if="item.openType == 'pay'"
                  >付费开通</view
                >
                <view class="fufei" v-else-if="item.openType == 'manual'"
                  >手动开通</view
                >
                <template v-else-if="item.openType == 'auto'">
                  <view class="font-12 color-333 font-700">自动开通</view>
                  <view class="u-m-t-8 color-666 font-12"
                    >还差{{
                      item.shopInviteCount - item.userInviteCount
                    }}人开通</view
                  >
                </template>
              </view>
            </view>
          </view>
        </view>
        <view
          v-if="state.activates.totalRow > 0"
          class="u-flex justify-center font-12 color-666"
          style="align-items: baseline"
          @click="toShopList('unActivates')"
        >
          <view>查看全部店铺</view>
          <up-icon name="arrow-right" size="12" color="#666"></up-icon>
        </view>
      </view>
    </view>

    <TipsPopup v-model="showPopup" :tips-type="tipsType"></TipsPopup>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import TipsPopup from "./components/tips-popup.vue";
import * as distributionApi from "@/common/api/market/distribution.js";
const showPopup = ref(false);
const popupText = ref("");
const tipsType = ref("");
function questionClick(title) {
  if (title == "总收益") {
    tipsType.value = "总收益";
  }
  if (title == "待入账") {
    tipsType.value = "待入账";
  }
  showPopup.value = true;
}
function back() {
  uni.navigateBack({
    delta: 1,
  });
}

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

function toShopDetail(item, type) {
  uni.navigateTo({
    url:
      "/distribution/shop-detail/index?shopId=" + item.shopId + "&type=" + type,
  });
}

function toTixian() {
  uni.navigateTo({
    url: "/distribution/withdraw/index",
  });
}
function toShopList(type) {
  uni.navigateTo({
    url: "/distribution/shop-list/index?type=" + type,
  });
}
const state = reactive({
  totalIncome: 0,
  pendingIncome: 0,
  cashOutAmount: 0,
  totalIncome: 0,
  activates: {
    totalRow: 0,
    records: [],
  },
  unActivates: {
    totalRow: 0,
    records: [],
  },
});
async function init() {
  const res = await distributionApi.centerUser();
  if (res) {
    Object.assign(state, res);
  }
}
onShow(init);
</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>