<script lang="ts" setup>

const fitters = [{
  name: '全部',
  value: 'all'
}, {
  name: '已启用',
  value: 'enable'
}, {
  name: '禁用',
  value: 'disable'
}, {
  name: '未激活',
  value: 'unActive'
}, {
  name: '在线',
  value: 'online'
}, {
  name: '离线',
  value: 'offline'
}]
const selectedFitters = ref([])
const visible = ref(false)
defineProps({
  userNumber:{
    type:Number,
    default:0
  }
})
</script>

<template>
  <div class="bar-layout">
    <Dialog
        v-model:visible="visible"
        :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
        :pt="{
        root: {
          style:'border:unset;background-color:unset;'
        },
        mask: {
            style: 'backdrop-filter: blur(20px)'
        }
    }"
        modal
    >
      <template #container="{ closeCallback }">
        <UserPageAddUser :close-back="closeCallback"/>
      </template>
    </Dialog>
    <div class="user-num">
      <Icon :size="30" :stroke-width="1.8" name="User"></Icon>
      <h3>{{userNumber}}</h3>
    </div>
    <div class="search-box">
      <Icon name="UserRoundSearch"></Icon>
      <input placeholder="搜索"/>
    </div>
    <div class="bar-actions">
      <div class="sort-box">
        <p>名称</p>
        <Icon :size="16" :stroke-width="1.3" name="ArrowUpDown"/>
      </div>
      <MultiSelect v-model="selectedFitters" :maxSelectedLabels="3" :options="fitters" display="chip"
                   optionLabel="name" placeholder="过滤"></MultiSelect>
      <button class="add-user" @click="visible=true" >
        <p>添加用户</p>
        <Icon :size="18" :stroke-width="1.3" name="CirclePlus"></Icon>
      </button>
    </div>

  </div>
</template>

<style lang="scss" scoped>
@import 'base';

.bar-layout {
  background: $light-bg-color;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $padding*2;
  border-radius: $radius;
  gap: 5rem;
  *{
    @include SC_Font;
  }
  .dark-mode &{
    background: $dark-bg-color;
  }
}

.user-num {
  display: flex;
  align-items: center;
  gap: $gap;

  h3 {
    font-size: 22px;
    font-weight: 500;
  }
}

.bar-actions {
  display: flex;
  gap: $gap*2;
}

.search-box {
  display: flex;
  flex: 1;
  align-items: center;
  gap: $gap;
  padding: 0 $padding*2;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  color: #64748b;
  max-width: 1200px;
  .dark-mode &{
    background: $dark-bg-color;
    border: 1px solid #5a5e60;
  }
  input {
    height: 100%;
    width: 100%;
    border: unset;
    outline: unset;
    background: transparent;
  }
}

.sort-box {
  display: flex;
  gap: $gap*1.7;
  align-items: center;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #64748b;
  padding: 0 $padding;
}

.add-user {
  display: flex;
  align-items: center;
  gap: $gap*1.7;
  background: $primary-color;
  color: #FFF;
  padding: 0 $padding;
  border-radius: 6px;
  outline: unset;
  border: unset;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  cursor: pointer;

  p {
    //不允许选中
    -webkit-user-select: none;
    cursor: pointer;
  }
}
.p-multiselect{
  background: unset;
}
</style>