<template>
  <view class="content">
    <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> -->

    <view class=" bg-white sticky top-0 z-50 flex items-center">
      <view class="flex-1">
        <wd-search @search="search({ value: params.keywords })" @clear="search({ value: params.keywords = '' })"
          v-model="params.keywords" hide-cancel>
          <template #prefix>
            <wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
              <view class="search-type">
                <text>{{ searchType }}</text>
                <wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
              </view>
            </wd-popover>
          </template>
        </wd-search>
      </view>

      <div class="mr-2">
        <wd-button @click="utils.toUrl('/store/user/memberList')" size="small">用户等级</wd-button>
      </div>
    </view>

    <div class="grid p-2">

      <yList height="91vh" ref="yListRef" :apiObj="user.userList" :params="{ ...params }">
        <template #default="{ list: userList }">
          <div v-for="user of userList" class="rounded-md overflow-hidden">
            <wd-card class="rounded-md overflow-hidden" type="rectangle">
              <template #title>
                <view class="title">
                  <view>ID：{{ user.id }}</view>
                  <view @click="utils.copy(user.user_merge.mobile)" class="title-tip" v-if="user.user_merge">
                    {{ user.user_merge.mobile }}

                    <wd-icon name="file-copy" size="14px"></wd-icon>
                  </view>
                </view>
              </template>
              <view style="height: 40px;" class="userBox">
                <image mode="aspectFill" :src="user.avatar_pic" :alt="user.name"
                  style="width: 60px;height: 60px;border-radius: 4px; margin-right: 12px;" />
                <view>
                  <view style="color: rgba(0,0,0,0.85); font-size: 16px;">
                    {{ user.nickname }}
                    <wd-tag v-if="user.user_merge" class="mx-1" size="small" type="success">
                      v {{ user.user_merge.member_level }}
                    </wd-tag>
                  </view>
                  <view style="color: rgba(0,0,0,0.25); font-size: 12px;">

                    <wd-tag class="mx-1" size="small" :type="originType[user.origin]">
                      {{ user.origin_text }}
                    </wd-tag>

                  </view>
                </view>
              </view>

              <template #footer>

                <view v-if="user.user_merge" class="bg-gray-50 p-2 flex justify-between" style="font-size: 22rpx;">
                  <view>余额：{{ user.user_merge.balance }} </view>
                  <view>积分：{{ user.user_merge.integral }} </view>
                  <view>佣金：{{ user.user_merge.money }} </view>
                </view>
                <view v-if="user.user_merge" class="h-2 opacity-0 text-white">·</view>
                <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/edit?id=' + user.id)" size="small"
                      style="margin-right: 0px;">详情</wd-button>
                  </view>

                </view>
              </template>
            </wd-card>
          </div>
        </template>
      </yList>

    </div>

    <!-- <view class="h-[64px]"></view>
    <view class="fixed left-2 right-2 bottom-4 z-50">
      <myTabbar tab="user"></myTabbar>
    </view> -->

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

<script setup>
import { ref } from 'vue';
import utils from '@/utils/utils.js';
import user from '@/api/store/user.js';
import myTabbar from "../components/myTabbar/index.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";
import { useMessage } from '@/uni_modules/wot-design-uni';
import { useToast } from '@/uni_modules/wot-design-uni'
import yList from "/components/yList/index.vue";

import {
  onShow,
} from "@dcloudio/uni-app";

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

const originType = ref({
  100: 'success',
  101: 'success',
  200: 'info',
  201: 'danger',
  300: 'warning',
})

const yListRef = ref(null);

const searchType = ref('昵称');
const popover = ref(false);


const search = ({ value }) => {

  if (searchType.value == '昵称') {
    yListRef.value.upData({
      nickname: params.value.keywords,
      mobile: ''
    });
  }

  if (searchType.value == '手机号') {
    yListRef.value.upData({
      nickname: '',
      mobile: params.value.keywords
    });
  }

};

const menu = ref([
  { content: '昵称' },
  { content: '手机号' },
]);

const params = ref({
  nickname: "",
  mobile: "",
  origin: '',
  value: ''
});

/**
 * 切换搜索类型
 * @param {Object} item - 切换的项
 */
function changeSearchType({ item, index }) {
  searchType.value = item.content;
  search(params.value.keywords)
}

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

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

const userList = ref({});

const changeS = (row) => {
  user.editStatus({
    id: row.id,
    status: [1, 0][row.status],
  }).then(res => {

    if (res.code == 0) {
      toast.success('操作成功')
      row.status = [1, 0][row.status]
    } else {
      showNotify({ type: 'error', message: '出错了' })
    }

  })
}

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

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


/**
 * 获取数据的函数
 */
// const getuserList = () => {
//   loading.value = true
//   user.list().then(res => {
//     userList.value = res.data;
//     userList.value.ok = true;
//     loading.value = false
//   });
// };

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

<style lang="scss" scoped>
.search-type {
  position: relative;
  height: 30px;
  line-height: 30px;
  padding: 0 8px 0 16px;
  font-size: 24rpx;
  color: rgba(0, 0, 0, .45);
}

.search-type::after {
  position: absolute;
  content: '';
  width: 1px;
  right: 0;
  top: 5px;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.25);
}

.search-type {
  :deep(.icon-arrow) {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
  }
}


.userBox,
.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

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

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

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