<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"
          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 class="u-flex u-m-t-40" v-if="active == 1">
          <view class="u-flex color-333" @click="showShopSelActionSheetFun">
            <text class="u-line-1" style="max-width: 300rpx">{{
              selShop.shopName || "全部门店"
            }}</text>
            <up-icon name="arrow-down-fill" size="12" color="#333"></up-icon>
          </view>
          <view class="u-flex-1 u-p-l-16">
            <up-search
              bgColor="#F9F9F9"
              height="60rpx"
              :showAction="false"
              placeholder="搜索订单号"
              @search="search"
              @clear="search"
              v-model="searchText"
            ></up-search>
          </view>
        </view> -->
      </view>
    </up-sticky>
    <configVue v-if="active == 0"></configVue>
    <fenxiaoUserListVue
      v-if="active == 1"
      :list="list"
      :isEnd="isEnd"
      @refresh="fenxaioListRefresh"
    ></fenxiaoUserListVue>

    <!-- 选择门店 -->
    <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 { 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 { 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 fenxaioListRefresh(){
    isEnd.value = false;
    pageNum.value = 1;
    getList();
}

async function getList() {
  const 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 (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(1);
watch(
  () => active.value,
  (newval) => {
    console.log(newval);
    pageNum.value = 1;
    getList();
  }
);
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>
