<template>
  <view class="flex flex-wrap">
    <view class="mr10 mb10" v-for="(user, index) in userList" :key="index" @click="deleteUsers(index)">
      <u-avatar
        class="avatar"
        :src="user.avatar ? user.avatar : '/static/images/404.png'"
        shape="square"
        size="40"
        fontSize="12"
        color="#ffffff"
        :bgColor="$settingStore.themeColor.color"
        v-if="user.avatar"
      ></u-avatar>
      <u-avatar
        class="avatar"
        :text="user.label.length > 2 ? user.label.slice(1, 3) : user.label"
        shape="square"
        size="40"
        fontSize="12"
        color="#ffffff"
        :bgColor="$settingStore.themeColor.color"
        v-else
      ></u-avatar>
      <view class="font12 text-center mt5">{{ user.label }}</view>
    </view>
  </view>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const emit = defineEmits(["deleteUsers"]);
const props = defineProps({
  userList: {
    type: Object,
    default: [],
  },
});

const { userList } = toRefs(props);

/** 删除回调事件 */
function deleteUsers(index) {
  emit("deleteUsers", index);
}
</script>
<style lang="scss" scoped>
.avatar {
  position: relative;

  &::after {
    position: absolute;
    content: "✖";
    display: inline-block;
    padding: 2px 4px;
    border-radius: 100%;
    cursor: pointer;
    font-size: 8px;
    text-align: center;
    background-color: #ccc;
    color: #fff;
    top: -5px;
    right: -5px;
  }

  &::after:hover {
    background-color: #ccc;
  }
}
</style>
