<template>
    <div class="home">
      <van-nav-bar title="人员管理" fixed left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <van-search
        shape="round"
        :value="searchValue"
        :show-action="false"
        placeholder="请输入人员名称"
      />
      <van-cell-group>
        <van-cell title="当前站点" value="李家坝仓库" />
      </van-cell-group>
  
      <div class="content">
        <van-cell-group>
          <van-cell
            title="张三"
            is-link
            value="作业人员"
          >
          </van-cell>
          <van-cell title="李四" is-link value="站长">
          </van-cell>
          <van-cell title="王麻子" is-link value="站长,作业人员">
          </van-cell>
        </van-cell-group>
      </div>
  
      <van-button
        type="primary"
        class="add-btn"
        icon="plus"
        @click="handleAdd"
      >
        添加人员
      </van-button>
  
      <!-- 弹出层 -->
      <van-popup
        :show="showPopup"
        position="bottom"
        closeable
        close-on-click-overlay
        :style="{ height: '80%' }"
        @close="onPopupClose"
      >
        <div class="popup-content">
          <h3>添加新人员</h3>
        </div>
      </van-popup>
    </div>
  </template>
    
    <script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import { showToast } from "vant";
  
  const router = useRouter();
  const searchValue = ref(""); // 搜索框输入值
  const showPopup = ref(false); // 控制弹出层显示隐藏
  
  const onClickLeft = () => {
    router.push("/");
  };
  
  const handleAdd = () => {
    showPopup.value = true;
  };
  
  const onPopupClose = () => {
    showPopup.value = false;
  };
  </script> 
    
    <style scoped>
  .home {
    padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
  }
  
  .content {
    padding: 16px;
  }
  
  .content .van-cell-group .van-cell {
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .add-btn {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);
    margin: 0 auto;
    border-radius: 24px;
    font-size: 16px;
    height: 44px;
    z-index: 999;
  }
  
  .grid {
    margin-top: 16px;
  }
  
  .btn {
    margin-top: 24px;
  }
  
  .status-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
  }
  .status-good {
    background-color: #07c160;
  }
  .status-warning {
    background-color: #ff976a;
  }
  .status-danger {
    background-color: #ee0a24;
  }
  </style>
    