<template>
  <view class="min-page u-font-28">
    <up-sticky>
      <view class="bg-fff top">
        <view class="bg-fff container u-flex u-m-b-48">
          <image
            style="width: 60rpx; height: 60rpx"
            src="/pageMarket/static/images/distribution.png"
          ></image>
          <view class="u-flex-1 u-flex u-p-l-24">
            <view class="u-font-28 u-flex-1 u-p-r-4">
              <view class="color-333 font-bold">分销</view>
              <view class="color-666 u-m-t-4 u-font-24"
                >允许客户充值并使用余额支付
              </view>
            </view>
            <up-switch
              v-model="distributionStore.config.isEnable"
              size="18"
              :active-value="1"
              :inactive-value="0"
            ></up-switch>
          </view>
        </view>
        <my-tabs v-model="active" :list="tabs" textKey="label"></my-tabs>
        <view
          v-if="active == 1 || active == 2"
          class="u-flex u-row-between u-m-t-32"
          style="gap: 58rpx"
        >
          <view class="u-flex-1 filter-box" style="border-radius: 100rpx">
            <up-icon name="search" size="18"></up-icon>
            <input
              class="u-m-l-10 u-font-28"
              type="text"
              placeholder-class="color-999 u-font-28"
              placeholder="搜索关键词"
              v-model="keyWord"
              @blur="keyWordBlur"
            />
          </view>
          <view
            class="u-flex-1 u-font-28 filter-box u-flex u-row-between"
            @click="showTimeArea = true"
          >
            <template
              v-if="userComponentQuery.startTime && userComponentQuery.endTime"
            >
              <text class="u-font-20">
                {{ userComponentQuery.startTime }} -
                {{ userComponentQuery.endTime }}
              </text>
            </template>
            <template v-else>
              <text class="color-999">请选择日期范围</text>
              <up-icon name="arrow-right" size="12"></up-icon>
            </template>
          </view>
        </view>
        <view
          v-if="active ==3"
          class="u-flex u-row-between u-m-t-32"
          style="gap: 30rpx"
        >
        <view
            class="u-font-28 filter-box u-flex u-row-between"
            @click="showTimeArea = true"
          >
            <template
             v-if="false"
            >
              <text class="u-font-20">
               
              </text>
            </template>
            <template v-else>
              <text class="color-999 u-m-r-10">全部</text>
              <up-icon name="arrow-down" size="12"></up-icon>
            </template>
          </view>
          <view class="u-flex-1 filter-box" style="border-radius: 100rpx">
            <up-icon name="search" size="18"></up-icon>
            <input
              class="u-m-l-10 u-font-28"
              type="text"
              placeholder-class="color-999 u-font-28"
              placeholder="分销员昵称/手机号"
              v-model="keyWord"
              @blur="keyWordBlur"
            />
          </view>
          <view
            class="u-flex-1 u-font-28 filter-box u-flex u-row-between"
            @click="showTimeArea = true"
          >
            <template
              v-if="userComponentQuery.startTime && userComponentQuery.endTime"
            >
              <text class="u-font-20">
                {{ userComponentQuery.startTime }} -
                {{ userComponentQuery.endTime }}
              </text>
            </template>
            <template v-else>
              <text class="color-999">请选择日期</text>
              <up-icon name="arrow-right" size="12"></up-icon>
            </template>
          </view>
        </view>
        <view v-if="active==2" class="u-flex u-p-l-32 u-p-r-32 u-m-t-32">
            <view class="u-flex-1 u-text-center">
                <view class="u-font-32 color-main font-bold">{{  listRes.totalCount}}</view>
                <view class="u-font-24 color-666 u-m-t-16">支付开通人数</view>
            </view>
            <view class="u-flex-1 u-text-center">
                <view class="u-font-32 color-main font-bold">{{  listRes.totalAmount}}</view>
                <view class="u-font-24 color-666 u-m-t-16">支付开通人数</view>
            </view>
        </view>
        <view v-if="active==3" class="u-flex u-m-t-32">
            <view class="u-flex-1 u-text-center">
                <view class="u-font-32 color-main font-bold">{{  listRes.successAmount}}</view>
                <view class="u-font-24 color-666 u-m-t-16">已入账金额（元）</view>
            </view>
            <view class="u-flex-1 u-text-center">
                <view class="u-font-32 color-main font-bold">{{  listRes.pendingAmount||0}}</view>
                <view class="u-font-24 color-666 u-m-t-16">待入账金额（元）</view>
            </view>
            <view class="u-flex-1 u-text-center">
                <view class="u-font-32 color-main font-bold">{{  listRes.balanceAmount}}</view>
                <view class="u-font-24 color-666 u-m-t-16 ">
                    <text>运营余额（元）</text>
                    <text class="color-main" @click="go.to('PAGES_PAY')">充值></text>
                </view>
            </view>
        </view>
     </view>
    </up-sticky>
    <configVue v-if="active == 0"></configVue>
    <fenxiaoUserListVue
      v-if="active == 1"
      :list="list"
      :isEnd="isEnd"
      @refresh="refresh"
    ></fenxiaoUserListVue>

    <openListVue
      v-if="active == 2"
      :list="list"
      :isEnd="isEnd"
      @refresh="refresh"
    ></openListVue>
    <fenxiaoMingxiVue
      v-if="active == 3"
      :list="list"
      :isEnd="isEnd"
      @refresh="refresh"
    ></fenxiaoMingxiVue>
    <!-- 选择门店 -->
    <shopSelActionSheetVue
      @choose="chooseShop"
      v-model="showShopSelActionSheet"
      title="选择门店"
    >
    </shopSelActionSheetVue>

    <dateAreaSel
      :show="showTimeArea"
      :minYear="2022"
      @close="showTimeArea = false"
      @confirm="confirmTimeArea"
    ></dateAreaSel>


  </view>
</template>
<script setup>
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
import { ref, onMounted, watch, provide } from "vue";
import * as consumeCashbackApi from "@/http/api/market/consumeCashback.js";
import * as distributionApi from "@/http/api/market/distribution.js";
import configVue from "./components/config.vue";
import shopSelActionSheetVue from "@/pageMarket/components/shop-sel-action-sheet.vue";
import dateAreaSel from "@/components/date-range-picker/date-range-picker.vue";
import fenxiaoUserListVue from "./components/fenxiao-user-list.vue";
import openListVue from "./components/open-list.vue";
import fenxiaoMingxiVue from "./components/fenxiao-mingxi.vue";

import { useDistributionStore } from "@/store/market.js";
import { reactive } from "vue";
const distributionStore = useDistributionStore();
distributionStore.getConfig();
provide("distributionStore", distributionStore);
provide("distributionApi", distributionApi);
const showTimeArea = ref(false);
function confirmTimeArea(e) {
  console.log(e);
  userComponentQuery.startTime = e[0];
  userComponentQuery.endTime = e[1];
}
const tabs = [
  {
    label: "基础设置",
    value: "basic",
  },
  {
    label: "分销员",
    value: "user",
  },
  {
    label: "开通记录",
    value: "recoders",
  },
  {
    label: "分销明细",
    value: "details",
  },
];

const keyWord = ref("");
function keyWordBlur() {
  userComponentQuery.user = keyWord.value;
}
const userComponentQuery = reactive({
  user: "",
  startTime: "",
  endTime: "",
});

const form = ref({
  isEnable: 0,
});

const list = ref([]);
const pageNum = ref(1);
const isEnd = ref(false);
const selShop = ref({
  shopId: "",
  shopName: "",
});
const searchText = ref("");

function search() {
  pageNum.value = 1;
  getList();
}

function chooseShop(e) {
  selShop.value = e;
}

watch(
  () => selShop.value.shopId,
  (newval) => {
    pageNum.value = 1;
    getList();
  }
);

watch(
  () => userComponentQuery,
  (newval) => {
    isEnd.value = false;
    pageNum.value = 1;

    getList();
  },
  {
    deep: true,
  }
);



function refresh() {
  isEnd.value = false;
  pageNum.value = 1;
  getList();
}

const listRes=ref({})
async function getList() {
  let res = null;
  if (active.value == 1) {
    //分销员列表
    res = await distributionApi.distributionUser({
      page: pageNum.value,
      size: 10,
      user: userComponentQuery.user,
      startTime: userComponentQuery.startTime
        ? userComponentQuery.startTime + " 00:00:00"
        : "",
      endTime: userComponentQuery.endTime
        ? userComponentQuery.endTime + " 23:59:59"
        : "",
    });
  }
  if (active.value == 2) {
    //开通记录
    res = await distributionApi.openFlow({
      page: pageNum.value,
      size: 10,
      key: userComponentQuery.user,
      startTime: userComponentQuery.startTime
        ? userComponentQuery.startTime + " 00:00:00"
        : "",
      endTime: userComponentQuery.endTime
        ? userComponentQuery.endTime + " 23:59:59"
        : "",
    });
  }
  if (active.value == 3) {
    //分销明细
    res = await distributionApi.distributionFlow({
      page: pageNum.value,
      size: 10,
      key: userComponentQuery.user,
      startTime: userComponentQuery.startTime
        ? userComponentQuery.startTime + " 00:00:00"
        : "",
      endTime: userComponentQuery.endTime
        ? userComponentQuery.endTime + " 23:59:59"
        : "",
    });
  }
  if (res) {
    listRes.value=res
    if (pageNum.value == 1) {
      list.value = res.records || [];
    } else {
      list.value = [...list.value, ...(res.records || [])];
    }
    isEnd.value = pageNum.value >= res.totalPage * 1 ? true : false;
    console.log(isEnd.value);
  }
}

// 显示选择门店弹窗
const showShopSelActionSheet = ref(false);

function showShopSelActionSheetFun() {
  showShopSelActionSheet.value = true;
}
const active = ref(3);
watch(
  () => active.value,
  (newval) => {
    console.log(newval);
    pageNum.value = 1;
    getList();
  }
);
watch(
  () => active.value,
  (newval) => {
    refresh();
  }
);
onReachBottom(() => {
  if (!isEnd.value) {
    pageNum.value++;
    getList();
  }
});
onShow(() => {
  pageNum.value = 1;
  getList();
});
</script>
<style lang="scss" scoped>
.min-page {
  background: #f7f7f7;
}

.box {
}

.top {
  padding: 32rpx 24rpx;
}

.list {
  padding: 0 30rpx;

  .item {
    padding: 32rpx 24rpx;
    border-radius: 14rpx;
    background-color: #fff;
    overflow: hidden;
  }
}

.tag {
  border-radius: 12rpx;
  padding: 8rpx 22rpx;
  font-size: 28rpx;

  &.success {
    background-color: #edfff0;
    color: #5bbc6d;
  }

  &.end {
    background-color: #f7f7f7;
    color: #999;
  }
}

.my-btn {
  font-size: 28rpx;
  line-height: 36rpx;
  padding: 8rpx 32rpx;
  border-radius: 12rpx;
  margin: 0;
}

.edit-btn {
  background: #e6f0ff;
  color: $my-main-color;
}

.delete-btn {
  background: #ffe7e6;
  color: #ff1c1c;
}
.filter-box {
  display: flex;
  padding: 8rpx 24rpx;
  align-items: center;
  border-radius: 8rpx;
  border: 2rpx solid #d9d9d9;
  background: #f7f7f7;
  min-height: 62rpx;
  box-sizing: border-box;
}
</style>
