<template>
  <home-container :customStyle="{ background: 'none', backgroundColor: '#f5f5f5' }">
    <div class="work-container">
      <!-- 顶部状态栏 -->
      <view class="status-bar">
        <text class="welcome">欢迎使用智慧安检移动端</text>
        <text class="date">{{ currentDate }}</text>
      </view>

      <!-- 快捷打卡入口 -->
      <!-- <view class="quick-checkin" @click="goToAttendance">
        <view class="checkin-left">
          <uni-icons type="calendar-filled" size="30" color="#409EFF"></uni-icons>
          <text class="checkin-text">快速打卡</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view> -->



      <view class="grid-body">
        <!-- 宫格组件 -->
        <uni-section title="系统功能" type="line" class="uni-section-custom"></uni-section>
        <uni-grid :column="3" :showBorder="false">
          <uni-grid-item v-for="(item, index) in items" :key="index">
            <view class="grid-item-box" @click="handleGridClick(item.appUrl)">
              <!-- <uni-icons v-if="item.iconType" :type="item.iconType" :color="item.color" size="30"></uni-icons>
              <u-icon v-else :name="item.uIconType" :color="item.uIconColor" size="35"></u-icon> -->
              <img alt="" :src="item.workbenchIcon">
              <text class="text">{{ item.appName }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </div>
  </home-container>
</template>
<script>
import HomeContainer from "@/components/HomeContainer.vue";
import { checkRolePermission } from "@/utils/common.js";
import { getUserProfile, getAppListByRoleId,getAppList } from "@/api/system/user";

export default {
  components: { HomeContainer },
  data() {
    return {
      currentDate: this.formatDate(new Date()),
      appList: []
    }
  },
  computed: {
    role() {
      return this.$store?.state?.user?.roles[0]
    },
    items() {
      return this.appList
    }
  },
  onShow() {
    this.updateCurrentDate();
  },
  onLoad() {
    this.getUser()
  },
  methods: {
    async getUser() {
      const data = await getUserProfile();
      await this.loadAppList(data.data);
    },
    async loadAppList(userInfo) {
      // const roleId = userInfo.roles && userInfo.roles.length ? userInfo.roles[0].roleId : null;

      try {
        // if (roleId) {
          const res = await getAppList({homePage:0});
          if (res.code === 200) {
            //全部应用
            this.appList = res.data;
          }
        // }
      } catch (error) {
        console.error('获取应用列表失败:', error);
        this.appList = [];
      }
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const week = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];
      return `${year}年${month}月${day}日 星期${week}`;
    },
    updateCurrentDate() {
      this.currentDate = this.formatDate(new Date());
    },
    handleGridClick(url) {
      console.log('点击了宫格：', url, this.role);
      uni.navigateTo({
        url: url
      });
      // if (item.path) {
      //   // if (checkRolePermission(this.role, item.path)) {

      //   // } else {
      //   //   this.$modal.showToast('此角色不需要查看该功能，无需操作～');
      //   // }
      // } else {
      //   this.$modal.showToast('功能开发中，敬请期待');
      // }
    },
    goToAttendance() {
      uni.navigateTo({
        url: '/pages/attendance/index'
      });
    },
    changeGrid(e) {
      const index = e.detail.index;
      const item = this.items[index];
      this.handleGridClick(item);
    },
  }
}
</script>

<style lang="scss" scoped>
.work-container {
  padding: 0;
  background-color: #f5f5f5;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .welcome {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .date {
    font-size: 26rpx;
    color: #666;
  }
}

.quick-checkin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .checkin-left {
    display: flex;
    align-items: center;

    .checkin-text {
      font-size: 32rpx;
      margin-left: 20rpx;
      color: #409EFF;
    }
  }
}

.grid-body {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .uni-section-custom {

    ::v-deep .uni-section-header {
      padding: 12rpx 10rpx !important;
    }
  }


}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;

  img {
    display: inline-block;
    width: 88rpx;
    height: 88rpx;
  }

  &:active {
    background-color: #f5f5f5;
    border-radius: 12rpx;
  }
}

.text {
  text-align: center;
  font-size: 25rpx;
  margin-top: 15rpx;
  color: #333;
}

.footer-tips {
  text-align: center;
  margin-top: 40rpx;
  font-size: 24rpx;
  color: #999;
}
</style>