<template>
  <view class="page-container">
    <scroll-view class="page-body" scroll-y>
      <view class="settings-section">
        <!-- 用户信息卡片 -->
        <view class="settings-user">
          <view class="settings-avatar">
            <uni-icons type="person-filled" size="32" color="#fff"></uni-icons>
          </view>
          <view class="settings-info">
            <text class="settings-name">管理员</text>
            <text class="settings-role">{{ hospitalName }}</text>
          </view>
        </view>

        <!-- 分组1：基础设置 -->
        <view class="settings-group">
          <view class="settings-item" @click="navigateTo('/pages/settings/enterprise')">
            <view class="s-icon" style="background:#e6f7ff;">
              <uni-icons custom-prefix="iconfont" type="icon-qiye" size="20" color="#1890ff"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">企业信息设置</text>
              <text class="s-desc">医院备案信息、联系人</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
          <view class="settings-item" @click="navigateTo('/pages/settings/device')">
            <view class="s-icon" style="background:#fff7e6;">
              <uni-icons type="settings-filled" size="20" color="#fa8c16"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">设备管理</text>
              <text class="s-desc">打印机、电子秤配置</text>
            </view>
            <text class="s-extra" :style="{ color: deviceConfigured ? '#52c41a' : '#ff4d4f' }">
              {{ deviceConfigured ? '已配置' : '未配置' }}
            </text>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
        </view>

        <!-- 分组2：业务管理 -->
        <view class="settings-group">
          <view class="settings-item" @click="navigateTo('/pages/settings/waste-list')">
            <view class="s-icon" style="background:#fff1f0;">
              <uni-icons custom-prefix="iconfont" type="icon-weifeijingyingxuke" size="20" color="#ff4d4f"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">危废类型管理</text>
              <text class="s-desc">危废品类与信息绑定</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
          <view class="settings-item" @click="navigateTo('/pages/settings/staff-list')">
            <view class="s-icon" style="background:#f6ffed;">
              <uni-icons type="auth" size="20" color="#52c41a"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">人员列表管理</text>
              <text class="s-desc">操作员新增与维护</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
          <!-- <view class="settings-item" @click="navigateTo('/pages/settings/prod-facility')">
            <view class="s-icon" style="background:#f9f0ff;">
              <uni-icons type="shop" size="20" color="#722ed1"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">生产设施管理</text>
              <text class="s-desc">产生设施与经办人绑定</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
          <view class="settings-item" @click="navigateTo('/pages/settings/store-facility')">
            <view class="s-icon" style="background:#e6f7ff;">
              <uni-icons type="home-filled" size="20" color="#1890ff"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">贮存设施管理</text>
              <text class="s-desc">暂存间与库房管理</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view> -->
        </view>

        <!-- 分组3：查询服务 -->
        <view class="settings-group">
          <view class="settings-item" @click="navigateTo('/pages/settings/receiver-search')">
            <view class="s-icon" style="background:#f0f5ff;">
              <uni-icons type="search" size="20" color="#2f54eb"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">接收单位查询</text>
              <text class="s-desc">处置公司信息</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
        </view>

        <!-- 分组4：高级设置 -->
        <view class="settings-group">
          <view class="settings-item" @click="navigateTo('/pages/settings/env-config')">
            <view class="s-icon" style="background:#fff7e6;">
              <uni-icons type="gear" size="20" color="#fa8c16"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title">环境配置</text>
              <text class="s-desc">测试/生产环境选择</text>
            </view>
            <uni-icons type="right" size="14" color="#cccccc"></uni-icons>
          </view>
        </view>

        <!-- 分组5：退出登录 -->
        <view class="settings-group">
          <view class="settings-item" @click="handleLogout">
            <view class="s-icon" style="background:#fff1f0;">
              <uni-icons type="forward" size="20" color="#ff4d4f"></uni-icons>
            </view>
            <view class="s-text">
              <text class="s-title" style="color:#ff4d4f;">退出登录</text>
            </view>
          </view>
        </view>

        <!-- <button @click="navigateTo('/pages/testpages/scantest2')">扫描测试</button> -->

        <!-- 版本信息 -->
        <view class="version-info">
          <text>危废全流程管理系统 V{{ version }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { api } from '@/api'
export default {
  computed: {
    // 检查设备是否已配置（从 Vuex store 获取）
    ...mapGetters('print', ['hasSavedConfig']),
    ...mapGetters('user', ['enterpriseName', 'enterpriseInfo']),
    deviceConfigured() {
      return this.hasSavedConfig
    }
  },
  data() {
    return {
      version: '1.0.0',
      hospitalName: ''
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.version = plus.runtime.version
    // #endif
    this.loadData()
  },
  methods: {
    async loadData() {
      const enterpriseInfo = await this.$store.dispatch('user/getEnterpriseInfo')
      this.hospitalName = enterpriseInfo.fullEnterpriseName
    },
    navigateTo(path) { uni.navigateTo({ url: path }) },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // uni.clearStorageSync()
            // uni.reLaunch({ url: '/pages/login/login' })
            this.$store.dispatch('user/logout')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-section {
  padding: $spacing-md $spacing-md $spacing-sm;
}

.settings-user {
  background: $primary-color;
  border-radius: $border-radius-xl;
  padding: $spacing-lg $spacing-md;
  color: #ffffff;
  margin-bottom: $spacing-md;
  display: flex;
  align-items: center;
  gap: $spacing-base;
}

.settings-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-name {
  display: block;
  font-size: $font-size-lg;
  font-weight: 600;
}

.settings-role {
  display: block;
  font-size: $font-size-sm;
  opacity: 0.8;
  margin-top: 2px;
}

.settings-group {
  background: #ffffff;
  border-radius: $border-radius-md;
  margin-bottom: $spacing-base;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.settings-item {
  display: flex;
  align-items: center;
  padding: 14px $spacing-md;
  border-bottom: 1px solid $border-light;

  &:last-child {
    border-bottom: none;
  }
}

.s-icon {
  width: 32px;
  height: 32px;
  border-radius: $border-radius-sm;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  margin-right: $spacing-base;
  flex-shrink: 0;
}

.s-text {
  flex: 1;

  .s-title {
    display: block;
    font-size: $font-size-md;
    color: $text-primary;
  }

  .s-desc {
    display: block;
    font-size: $font-size-sm;
    color: $text-placeholder;
    margin-top: 1px;
  }
}

.s-extra {
  font-size: $font-size-sm;
  color: $text-placeholder;
  margin-right: $spacing-xs;
}

.s-arrow {
  color: #cccccc;
  font-size: 14px;
}

.version-info {
  text-align: center;
  padding: $spacing-md;
  color: #bbbbbb;
  font-size: $font-size-xs;
  line-height: 1.8;
}
</style>
