<template>
  <view class="page-container">
    <view class="header-section">
      <text class="header-title">管理中心</text>
      <text class="header-subtitle">系统配置与管理</text>
    </view>

    <view class="search-section">
      <view class="search-wrapper">
        <view class="search-icon">
          <text class="iconfont icon-search"></text>
        </view>
        <input v-model="menuSearchKeyword" class="search-input" type="text" placeholder="搜索菜单"
          placeholder-class="input-placeholder" @input="handleMenuSearch" @confirm="handleMenuSearch" />
        <view v-if="menuSearchKeyword" class="clear-btn" @click="clearMenuSearch">
          <text class="clear-icon">×</text>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll" :scroll-top="scrollTop" scrollIntoView="top">
      <view id="top" class="module-section">
        <view class="module-header">
          <view class="module-icon" style="background: #1a3a5c;">
            <text class="icon-text">⚙️</text>
          </view>
          <text class="module-title">生产管控</text>
        </view>

        <view class="submodule-list">
          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">生产计划</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('生产任务')">
                <view class="function-icon" style="background: rgba(26, 58, 92, 0.1);">
                  <text class="icon-inner">📋</text>
                </view>
                <text class="function-name">生产任务</text>
              </view>
              <view class="function-item" @click="handleClick('生产计划')">
                <view class="function-icon" style="background: rgba(26, 58, 92, 0.1);">
                  <text class="icon-inner">📊</text>
                </view>
                <text class="function-name">生产计划</text>
              </view>
              <view class="function-item" @click="handleClick('生产投料')">
                <view class="function-icon" style="background: rgba(26, 58, 92, 0.1);">
                  <text class="icon-inner">🏭</text>
                </view>
                <text class="function-name">生产投料</text>
              </view>
            </view>
          </view>

          <view class="divider"></view>

          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">仓储管理</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('仓库信息')">
                <view class="function-icon" style="background: rgba(45, 90, 135, 0.1);">
                  <text class="icon-inner">🏢</text>
                </view>
                <text class="function-name">仓库信息</text>
              </view>
              <view class="function-item" @click="handleClick('出入库')">
                <view class="function-icon" style="background: rgba(45, 90, 135, 0.1);">
                  <text class="icon-inner">🚚</text>
                </view>
                <text class="function-name">出入库</text>
              </view>
              <view class="function-item" @click="handleClick('库存报表')">
                <view class="function-icon" style="background: rgba(45, 90, 135, 0.1);">
                  <text class="icon-inner">📈</text>
                </view>
                <text class="function-name">库存报表</text>
              </view>
            </view>
          </view>

          <view class="divider"></view>

          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">质量管理</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('检验类型')">
                <view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
                  <text class="icon-inner">✓</text>
                </view>
                <text class="function-name">检验类型</text>
              </view>
              <view class="function-item" @click="handleClick('检验项库')">
                <view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
                  <text class="icon-inner">📚</text>
                </view>
                <text class="function-name">检验项库</text>
              </view>
              <view class="function-item" @click="handleClick('检验模板')">
                <view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
                  <text class="icon-inner">📄</text>
                </view>
                <text class="function-name">检验模板</text>
              </view>
              <view class="function-item" @click="handleClick('检验记录')">
                <view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
                  <text class="icon-inner">📝</text>
                </view>
                <text class="function-name">检验记录</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="module-section">
        <view class="module-header">
          <view class="module-icon" style="background: #ff8c00;">
            <text class="icon-text">🔧</text>
          </view>
          <text class="module-title">设备运维</text>
        </view>

        <view class="submodule-list">
          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">设备管理</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('设备分类')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">📋</text>
                </view>
                <text class="function-name">设备分类</text>
              </view>
              <view class="function-item" @click="handleClick('设备台账')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">📊</text>
                </view>
                <text class="function-name">设备台账</text>
              </view>
              <view class="function-item" @click="handleClick('设备关键件')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">🔩</text>
                </view>
                <text class="function-name">设备关键件</text>
              </view>
            </view>
          </view>

          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">点检保养</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('点检项库')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">📝</text>
                </view>
                <text class="function-name">点检项库</text>
              </view>
              <view class="function-item" @click="handleClick('点检模板')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">📄</text>
                </view>
                <text class="function-name">点检模板</text>
              </view>
              <view class="function-item" @click="handleClick('点检任务')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">✅</text>
                </view>
                <text class="function-name">点检任务</text>
              </view>
              <view class="function-item" @click="handleClick('点检记录')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">📜</text>
                </view>
                <text class="function-name">点检记录</text>
              </view>
            </view>
          </view>

          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">维修管理</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('维修项目')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">🔧</text>
                </view>
                <text class="function-name">维修项目</text>
              </view>
              <view class="function-item" @click="handleClick('维修单')">
                <view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
                  <text class="icon-inner">📋</text>
                </view>
                <text class="function-name">维修单</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="module-section">
        <view class="module-header">
          <view class="module-icon" style="background: #9c27b0;">
            <text class="icon-text">🧱</text>
          </view>
          <text class="module-title">模具管理</text>
        </view>

        <view class="submodule-list">
          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">模具管理</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('模具类型')">
                <view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
                  <uni-icons type="list" size="22" color="#9c27b0"></uni-icons>
                </view>
                <text class="function-name">模具类型</text>
              </view>
              <view class="function-item" @click="handleClick('模具台账')">
                <view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
                  <uni-icons type="bars" size="22" color="#9c27b0"></uni-icons>
                </view>
                <text class="function-name">模具台账</text>
              </view>
              <view class="function-item" @click="handleClick('moldGet')">
                <view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
                  <uni-icons type="redo" size="22" color="#9c27b0"></uni-icons>
                </view>
                <text class="function-name">{{ t('moldGet.moduleName') }}</text>
              </view>
              <view class="function-item" @click="handleClick('moldReturn')">
                <view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
                  <uni-icons type="undo" size="22" color="#9c27b0"></uni-icons>
                </view>
                <text class="function-name">{{ t('moldReturn.moduleName') }}</text>
              </view>
              <view class="function-item" @click="handleClick('moldOperate')">
                <view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
                  <uni-icons type="loop" size="22" color="#9c27b0"></uni-icons>
                </view>
                <text class="function-name">{{ t('moldOperate.moduleName') }}</text>
              </view>
            </view>
          </view>

          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">点检保养</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('moldInspectionItems')">
                <view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
                  <text class="icon-inner">📝</text>
                </view>
                <text class="function-name">{{ t('moldInspectionItems.moduleName') }}</text>
              </view>
              <view class="function-item" @click="handleClick('点检模板')">
                <view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
                  <text class="icon-inner">📄</text>
                </view>
                <text class="function-name">点检模板</text>
              </view>
              <view class="function-item" @click="handleClick('点检任务')">
                <view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
                  <text class="icon-inner">✅</text>
                </view>
                <text class="function-name">点检任务</text>
              </view>
              <view class="function-item" @click="handleClick('点检记录')">
                <view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
                  <text class="icon-inner">📜</text>
                </view>
                <text class="function-name">点检记录</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="module-section">
        <view class="module-header">
          <view class="module-icon" style="background: #18bc37;">
            <text class="icon-text">📦</text>
          </view>
          <text class="module-title">基础数据</text>
        </view>

        <view class="submodule-list">
          <view class="submodule-group">
            <view class="submodule-header">
              <text class="submodule-name">产品管理</text>
            </view>
            <view class="function-grid">
              <view class="function-item" @click="handleClick('产品物料分类')">
                <view class="function-icon" style="background: rgba(24, 188, 55, 0.1);">
                  <text class="icon-inner">🏷️</text>
                </view>
                <text class="function-name">产品物料分类</text>
              </view>
              <view class="function-item" @click="handleClick('产品物料信息')">
                <view class="function-icon" style="background: rgba(24, 188, 55, 0.1);">
                  <text class="icon-inner">📋</text>
                </view>
                <text class="function-name">产品物料信息</text>
              </view>
              <view class="function-item" @click="handleClick('产品BOM')">
                <view class="function-icon" style="background: rgba(24, 188, 55, 0.1);">
                  <text class="icon-inner">🌳</text>
                </view>
                <text class="function-name">产品BOM</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="go-top-btn" @click="goTop">
      <text class="go-top-icon">↑</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const scrollTop = ref(0);
const menuSearchKeyword = ref('');

function goTop() {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}

function handleMenuSearch() {
  if (menuSearchKeyword.value.trim() === '') {
    return;
  }
  uni.showToast({
    title: `搜索: ${menuSearchKeyword.value}`,
    icon: 'none'
  });
}

function clearMenuSearch() {
  menuSearchKeyword.value = '';
}

function handleClick(name) {
  const routeMap = {
    '仓库信息': '/pages_function/pages/warehouse/index',
    '检验类型': '/pages_function/pages/inspection/index',
    '检验项库': '/pages_function/pages/inspectionItem/index',
    '检验模板': '/pages_function/pages/inspectionTemplate/index',
    '产品物料分类': '/pages_function/pages/materialCategory/index',
    '产品物料信息': '/pages_function/pages/materialInfo/index',
    '产品BOM': '/pages_function/pages/productBom/index',
    '设备分类': '/pages_function/pages/equipmentCategory/index',
    '设备台账': '/pages_function/pages/equipmentLedger/index',
    '设备关键件': '/pages_function/pages/equipmentKeypart/index',
    '模具类型': '/pages_function/pages/moldType/index',
    '模具台账': '/pages_function/pages/moldLedger/index',
    moldGet: '/pages_function/pages/moldget/index',
    moldReturn: '/pages_function/pages/moldreturn/index',
    moldOperate: '/pages_function/pages/moldoperate/index',
    moldInspectionItems: '/pages_function/pages/moldInspectionItems/index',
    '点检项库': '',
    '点检模板': '',
    '点检任务': '',
    '点检记录': '',
    '维修项目': '',
    '维修单': ''
  };

  const url = routeMap[name];
  if (url) {
    uni.navigateTo({ url });
  } else {
    uni.showToast({
      title: `进入${name}`,
      icon: 'none'
    });
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.header-section {
  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
  padding: 60rpx 40rpx;
  padding-top: 80rpx;

  .header-title {
    display: block;
    font-size: 44rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 12rpx;
  }

  .header-subtitle {
    display: block;
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}

.search-section {
  background: #ffffff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.search-wrapper {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 48rpx;
  padding: 0 24rpx;
}

.search-icon {
  margin-right: 20rpx;

  .iconfont {
    font-size: 36rpx;
    color: #666666;
  }
}

.search-input {
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  color: #333333;
  background: transparent;
}

.input-placeholder {
  color: #999999;
}

.clear-btn {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    opacity: 0.7;
  }

  .clear-icon {
    font-size: 36rpx;
    color: #999999;
  }
}

.content-scroll {
  padding: 24rpx;
}

.module-section {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.module-header {
  display: flex;
  align-items: center;
  padding: 28rpx 24rpx;
  background: #fafbfc;
  border-bottom: 1rpx solid #e8eaed;

  .module-icon {
    width: 72rpx;
    height: 72rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;

    .icon-text {
      font-size: 36rpx;
    }
  }

  .module-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1a3a5c;
  }
}

.submodule-list {
  padding: 20rpx;
}

.submodule-group {
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.submodule-header {
  margin-bottom: 16rpx;

  .submodule-name {
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    padding-left: 16rpx;
    border-left: 6rpx solid #1a3a5c;
  }
}

.divider {
  height: 2rpx;
  background: #e8eaed;
  margin: 24rpx 0;
}

.function-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.function-item {
  width: calc(25% - 15rpx);
  background: #f8fafc;
  border-radius: 16rpx;
  padding: 28rpx 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;

  &:active {
    background: #e8f4ff;
    transform: scale(0.98);
  }

  .function-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;

    .icon-inner {
      font-size: 40rpx;
    }
  }

  .function-name {
    font-size: 24rpx;
    color: #333333;
    text-align: center;
  }
}

.go-top-btn {
  position: fixed;
  bottom: 120rpx;
  right: 30rpx;
  width: 88rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
  z-index: 999;

  &:active {
    transform: scale(0.95);
  }

  .go-top-icon {
    font-size: 44rpx;
    color: #ffffff;
    font-weight: bold;
  }
}

/* 自定义 TabBar */
</style>
