<template>
  <div class="dashboard-main">
    <div class="main-buttons">
      <div class="button-column left-column">
        <div class="action-button" @click="navigateTo('analyze')" @mouseenter="hoverLeft = true"
          @mouseleave="hoverLeft = false">
          <SvgIcon :name="hoverLeft ? 'analyze-hover' : 'analyze'" />
          <div class="button-text">创建计算任务</div>
        </div>
      </div>

      <div class="button-column right-column">
        <div class="action-button" @click="navigateTo('view')" @mouseenter="hoverRight = true"
          @mouseleave="hoverRight = false">
          <SvgIcon :name="hoverRight ? 'view-hover' : 'view'" />
          <div class="button-text">查看计算任务</div>
        </div>
      </div>
    </div>

    <div v-if="isAdmin" class="admin-section">
      <div class="button-column center-column">
        <div class="action-button" @click="navigateTo('monitor')" @mouseenter="hoverAdmin = true"
          @mouseleave="hoverAdmin = false">
          <div class="admin-content">
            <SvgIcon :name="hoverAdmin ? 'monitor-hover' : 'monitor'" />
            <div class="button-text">系统监控面板</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/svgIcon.vue'

const router = useRouter();
const hoverLeft = ref(false)
const hoverRight = ref(false)

const useUserInfo = inject('userInfo');

// 检测是否为管理员
const isAdmin = computed(() => {
  return useUserInfo.userInfo.value.identity === 'admin'
})

const navigateTo = (type) => {
  router.push(`/dashboard/${type}`)
}

onMounted(() => {
  console.log(useUserInfo.userInfo.value)
})
</script>

<style lang="scss" scoped>
.dashboard-main {
  height: 100%;
  display: flex;
  flex-direction: column;

  .main-buttons {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 0 20px 0 20px;
    box-sizing: border-box;

    .button-column {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;

      .action-button {
        cursor: pointer;
        width: min(40vh, 400px);
        height: min(40vh, 400px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
        }

        .button-text {
          margin-top: 24px;
          font-size: 1.5em;
          color: #606266;
          font-weight: 500;
        }

        svg {
          width: 50%;
          height: 50%;
        }
      }
    }
  }

  .admin-section {
    flex-shrink: 0;
    height: 25vh;
    display: flex;
    padding: 0 20px 0 20px;
    justify-content: center;

    .button-column {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;

      .action-button {
        width: 60%;
        height: min(20vh, 200px);
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        .button-text {
          margin-top: 24px;
          font-size: 1.5em;
          color: #606266;
          font-weight: 500;
        }
      }
    }
  }

  .left-column {
    background: linear-gradient(135deg, #f5f7fa 0%, #e6f7ff 100%);
  }

  .right-column {
    background: linear-gradient(135deg, #f5f7fa 0%, #fff7e6 100%);
  }

  .center-column {
    background: linear-gradient(135deg, #f5f7fa 0%, #ffe6e6 100%);
  }
}
</style>