<script setup lang="ts">
/**
 * 工作台设置 / 菜单编辑器
 *
 * 展示分组列表，支持拖拽排序（van-grid 展示）。
 * 点击"添加分组"跳转到 addGroup 页面。
 */
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

/** 分组列表 */
interface GroupItem {
  id: number
  name: string
  moving: boolean
}

const drag = reactive({
  list: [] as GroupItem[],
})

/**
 * 模拟初始化数据
 */
onMounted(() => {
  drag.list = [
    { id: 1, name: '常用功能', moving: false },
    { id: 2, name: '管网管理', moving: false },
    { id: 3, name: '巡检管理', moving: false },
    { id: 4, name: '报表统计', moving: false },
  ]
})

/**
 * 跳转添加/编辑分组
 */
function toAddGroup(type: number, item?: GroupItem) {
  if (type === 0) {
    router.push({
      name: 'addGroup',
      params: { title: '添加' },
    })
  } else if (item) {
    router.push({
      name: 'addGroup',
      params: { title: '编辑' },
      query: {
        name: item.name,
        groupId: item.id,
      },
    })
  }
}
</script>

<template>
  <div class="menu-edit-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="工作台设置" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <div class="menu-edit-content">
      <!-- 添加分组按钮 -->
      <div class="add-group-btn" @click="toAddGroup(0)">
        添加分组
      </div>

      <!-- 分组列表 -->
      <div class="group-list">
        <div
          class="group-item"
          v-for="item in drag.list"
          :key="item.id"
          @click="toAddGroup(1, item)"
        >
          <div class="group-item-name">{{ item.name }}</div>
          <div class="group-item-actions">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <van-empty v-if="drag.list.length === 0" description="暂无分组" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.menu-edit-page {
  min-height: 100vh;
  background: #f4f7f8;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.menu-edit-content {
  width: 100%;
}

.add-group-btn {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 15px;
  color: #3d6ffb;
  line-height: 40px;
  background-color: #fff;
  cursor: pointer;

  &:active {
    background: #f5f5f5;
  }
}

.group-list {
  padding: 0 12px;
}

.group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  margin: 12px 0;
  padding: 0 12px;
  background: #fff;
  border-radius: 10px;
  color: #333;
  font-size: 15px;
  cursor: pointer;

  &:active {
    background: #f5f5f5;
  }

  &-name {
    flex: 1;
  }

  &-actions {
    display: flex;
    align-items: center;
    color: #c8c9cc;
  }
}
</style>
