<template>
  <view class="content bg-white">
    <kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
    <!-- <view class="w-full">
      <wd-navbar fixed safeAreaInsetTop :leftText="user_info?.info?.name || '商城首页'">
        <template #right>
          <wd-icon @click="utils.toUrl('/store/setup/index')" name="setting" size="22px"></wd-icon>
        </template>
      </wd-navbar>
    </view> -->

    <wd-tabs v-model="tab">
      <block v-for="item in 1" :key="0">
        <wd-tab :title="`等级列表`">
          <view class="my-4 flex px-14 gap-4">
            <wd-button class="flex-1" @click="utils.toUrl('/store/user/editMember')" size="small">新增等级</wd-button>
            <wd-button class="flex-1" @click="utils.toUrl('/store/user/setUp')" size="small">页面配置</wd-button>
          </view>
          <view class="grid p-2">
            <view>
              <wd-swipe-action v-for="(member, index) of memberList" class="rounded-3xl overflow-hidden mb-3 relative">
                <view class="overflow-hidden  p-4 relative">
                  <div class="bg absolute inset-0 bg-cover z-10 bg-no-repeat bg-center" :class="gradients[index]">
                  </div>

                  <div class="z-20 relative">
                    <div class="flex items-center">
                      <view>
                        <wd-badge custom-class="badge" type="primary" :modelValue="`v${member.level}`">
                          <view class="border-white border-4 border-solid flex items-center justify-center"
                            style="border-radius: 100px;width: 68px;height: 68px;">
                            <image mode="aspectFill" :src="member.image" :alt="member.name"
                              style="width: 60px;height: 60px;min-width: 60px;border-radius: 100px; " />
                          </view>
                        </wd-badge>
                      </view>
                      <view>
                        <view class="ml-4 px-4 py-2 rounded-3xl mb-1 inline-flex text-white" style="font-size: 24rpx; ">
                          {{ member.name }} ￥{{ member.price }}
                        </view>
                        <view class="ml-4 rounded" style="font-size: 22rpx; ">
                          <view class="mt-2">
                            <wd-button class="mr-2" type="success" :round="true" size="small">消费：{{ member.money }}
                              元</wd-button>
                            <wd-button type="warning" :round="true" size="small">{{ member.growth }} 成长值</wd-button>
                          </view>
                        </view>
                      </view>
                    </div>

                  </div>
                </view>

                <template #right>
                  <view class="action">
                    <view class="button " :class="gradients[index]"
                      @click="utils.toUrl('/store/user/editMember?edit=' + JSON.stringify(member))">编辑</view>
                  </view>
                </template>

              </wd-swipe-action>

            </view>
          </view>
        </wd-tab>
      </block>

      <block v-for="item in 1" :key="1">
        <wd-tab :title="`会员专享`">
          <view class="my-4 flex px-14 gap-4">
            <wd-button class="flex-1" @click="utils.toUrl('/store/user/editGoods')" size="small">新增折扣</wd-button>
          </view>

          <yList v-if="!loading" class="p-2 bg-gray-50" height="86vh" ref="yListRef" :apiObj="userMembers.DiscountList"
            :params="{ ...params }">
            <template #default="{ list }">
              <div v-for="user of list" class="rounded-md overflow-hidden ">
                <wd-card class="rounded-md overflow-hidden" type="rectangle">
                  <template #title>
                    <view class="title">
                      <view>{{ user.name }}</view>
                      <view class="title-tip">
                        折扣 {{ user.discount }}
                      </view>
                    </view>
                  </template>

                  <view class="bg-gray-50 p-2 mb-2 flex justify-between" style="font-size: 22rpx;">
                    <view>状态：
                      <el-tag type="primary" v-if="user.status == 1">开启</el-tag>
                      <el-tag v-else>关闭</el-tag>
                    </view>
                    <view>折扣商品：{{ user?.goods_list?.length || 0 }} </view>
                  </view>

                  <view class="bg-gray-50 p-2 flex justify-between" style="font-size: 22rpx;">
                    <view>优惠时间：
                      <wd-tag type="primary">{{ utils.dateFormat(user.start_time * 1000) }}</wd-tag> - <wd-tag>{{
                        utils.dateFormat(user.end_time * 1000) }}</wd-tag>
                    </view>
                  </view>

                  <template #footer>



                    <view class="flex justify-between items-center">
                      <view></view>

                      <view>
                        <!-- <wd-button @click="changeS(user)" v-if="user.status == 1" size="small" plain
                      style="margin-right: 8px;">关闭</wd-button>
                    <wd-button @click="changeS(user)" v-if="user.status !== 1" size="small" plain
                      style="margin-right: 8px;">
                      开启</wd-button> -->
                        <wd-button @click="utils.toUrl('/store/user/editGoods?edit=' + JSON.stringify({
                          ...user,
                          goods_list: user.goods_list.map(item => {
                            return {
                              id: item.id,
                              pic_url: item.pic_url,
                              name: item.name
                            }
                          })
                        }))" size="small" style="margin-right: 0px;">编辑</wd-button>
                      </view>

                    </view>
                  </template>
                </wd-card>
              </div>
            </template>
          </yList>
        </wd-tab>
      </block>
    </wd-tabs>



    <wd-toast />
    <wd-message-box></wd-message-box>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import utils from '@/utils/utils.js';
import yList from "/components/yList/index.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";
import userMembers from '@/api/store/userMembers.js';
import { useMessage } from '@/uni_modules/wot-design-uni';
import { useToast } from '@/uni_modules/wot-design-uni'
import { useApi } from "@/hooks/useApi.js"
import {
  onShow,
} from "@dcloudio/uni-app";

const gradients = [
  'bg-gradient-to-t from-blue-100 to-blue-300',
  'bg-gradient-to-t from-green-100 to-green-300',
  'bg-gradient-to-t from-yellow-100 to-yellow-300',
  'bg-gradient-to-t from-red-100 to-red-300',
  'bg-gradient-to-t from-purple-100 to-purple-300',
  'bg-gradient-to-t from-pink-100 to-pink-300',
  'bg-gradient-to-t from-indigo-100 to-indigo-300',
  'bg-gradient-to-t from-teal-100 to-teal-300',
  'bg-gradient-to-t from-orange-100 to-orange-300',
  'bg-gradient-to-t from-gray-100 to-gray-300',
  // 添加更多的渐变类，以满足你的需求
];

const toast = useToast()
const message1 = useMessage();

const tab = ref(0);

/** 
 * @type {Ref<boolean>} 
 * 控制页面加载状态的 Ref
 */
const loading = ref(false);

/**
 * 从本地存储中获取用户信息
 */
const user_info = uni.getStorageSync("user_info");

const memberList = ref({});

const changeS = async (row) => {
  const { fetchData } = await useApi(userMembers.LevelShow, { loading })

  fetchData({
    id: row.id,
    status: [1, 0][row.status],
  }).then(res => {
    if (result.value.code == 0) {
      toast.success('操作成功')
      row.status = [1, 0][row.status]
    } else {
      uni.showToast({
        title: '出错了',
        icon: 'none'
      })
    }
  })

}

const syncGoods = (row) => {
  message1
    .confirm({
      title: '同步商品',
    })
    .then((resp) => {
      toast.loading('请稍后...')

      member.synchronousGoods({
        id: row.id,
      }).then(res => {
        if (res.code == 0) {
          toast.success('同步成功');
        } else {
          toast.error('同步失败');
        }
      });
    })
    .catch((error) => {
      console.log(error);
    });
};


/**
 * 获取数据的函数
 */
const getmemberList = async () => {
  const { fetchData } = await useApi(userMembers.LevelShow, { loading })

  fetchData().then(res => {
    memberList.value = res.data;
    memberList.value.ok = true;
  })
};


// 初始化调用获取一行数据
onShow(() => {
  getmemberList();
})
</script>

<style lang="scss" scoped>
.memberBox,
.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.memberBox {
  justify-content: flex-start;
}

.title {
  justify-content: space-between;
}

.title-tip {
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}

.action {
  height: 100%;

  .button {
    display: inline-block;
    padding: 0 11px;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
  }
}

:deep(.badge) {
  .wd-badge__content {
    // padding: 20rpx 20rpx;
    width: auto;
    display: flex;
    line-height: 30rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20rpx;
    padding-left: 20rpx;

    top: 16rpx !important;
    right: 20rpx !important;
    border-radius: 100px !important;

    box-sizing: border-box;
  }

}
</style>
