<template>
  <div class="left-draw-container"
       :class="{ 'is-collapsed': !betStore.isOpen }"
  >
    <!-- 折叠状态展示的内容 -->
    <div class="cart-collapsed" v-if="!betStore.isOpen" @click="betStore.setSheetOpen(true)">
      <div class="custom-cart-icon">
        <el-icon size="24" class="icon-color"><Tickets /></el-icon>
      </div>
      <div class="vertical-text">{{ t('展开') }}</div>
    </div>

    <!-- 展开状态展示的内容 -->
    <div class="cart-expanded" v-else>
      <div class="cart-header" @click="betStore.setSheetOpen(false)">
        <div class="header-left">
          <el-icon class="pointer" size="20" style="margin-top: 4px;"><DArrowLeft /></el-icon>
          <span class="header-text">{{ t('收起') }}</span>
        </div>
      </div>

      <div class="cart-body">
        <el-collapse v-model="activeNames" accordion class="custom-collapse">
          <!-- 热门赛事 -->
          <hotList />
          
          <!-- 联赛 -->
          <el-collapse-item name="1">
            <template #title>
              <div class="module-title">
                <el-icon><Trophy /></el-icon>
                <span>{{ t('联赛') }}</span>
              </div>
            </template>
            <div class="module-content">
              <leagueList />
            </div>
          </el-collapse-item>

          <!-- 彩票玩法 -->
<!--          <el-collapse-item name="2">-->
<!--            <template #title>-->
<!--              <div class="module-title">-->
<!--                <el-icon><Ticket /></el-icon>-->
<!--                <span>{{ t('彩票玩法') }}</span>-->
<!--              </div>-->
<!--            </template>-->
<!--            <div class="module-content">-->
<!--              <lotteryList />-->
<!--            </div>-->
<!--          </el-collapse-item>-->
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { 
  Tickets, DArrowLeft, Star, Pointer, Ticket, Medal ,Trophy
} from '@element-plus/icons-vue';
import { useHomeLeftDrawStore } from '@/store/homeLeftDraw';
import hotList from './components/hotList.vue'
import leagueList from './components/leagueList.vue'
import lotteryList from './components/lotteryList.vue'

import { useI18n } from "vue-i18n";
const { t } = useI18n();

const betStore = useHomeLeftDrawStore();
const activeNames = ref(['1']); 
</script>

<style scoped lang="scss">
$bg-sidebar: #1e1e1e;
$bg-sidebar-hover: #2a2a2a;
$bg-main: #141414;
$border-color: rgba(255, 255, 255, 0.08);
$text-primary: #e5e5e5;
$text-secondary: #999;
$main-color: #f8b932;

.left-draw-container {
  height: 100%;
  background-color: $bg-sidebar;
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  width: 320px;
}

.is-collapsed{ width: 50px;}

.cart-collapsed {
  min-width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding-top: 20px;
  transition: background 0.3s;
  &:hover { background-color: $bg-sidebar-hover; }

  .custom-cart-icon {
    position: relative;
    margin-bottom: 20px;
    display: flex; justify-content: center; align-items: center;
    .icon-color { color: $main-color; }
  }
  .vertical-text { writing-mode: vertical-rl; letter-spacing: 4px; font-weight: bold; color: $text-primary; }
}

.cart-expanded {
  min-width: 320px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .cart-header {
    height: 40px; display: flex; justify-content: center; align-items: center; padding: 0 16px;
    border-bottom: 1px solid $border-color; background-color: $bg-sidebar; cursor: pointer; transition: background 0.2s;
    &:hover { background-color: $bg-sidebar-hover; }
    .header-left {
      display: flex; align-items: center; gap: 8px; color: $text-primary;
      .pointer { color: $text-secondary; display: flex; align-items: center; transition: transform 0.2s; }
      .header-text { font-weight: bold; color: $text-primary; font-size: 15px; }
    }
  }

  .cart-body {
    flex: 1; overflow-y: auto; padding: 12px; background-color: $bg-main;
  }
}

:deep(.custom-collapse) {
  border: none;
  --el-collapse-header-bg-color: #2a2a2a;
  --el-collapse-header-text-color: #e5e5e5;
  --el-collapse-content-bg-color: #1e1e1e;
  --el-collapse-border-color: transparent;

  .el-collapse-item {
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 8px;
    border: none;

    .el-collapse-item__header {
      height: 48px;
      padding: 0 12px;
      border: none;
      &.is-active {
        background-color: #333;
      }
    }

    .el-collapse-item__wrap {
      border: none;
    }

    .el-collapse-item__content {
      padding: 12px;
      color: #ccc;
    }
  }
}

.module-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 14px;
  flex: 1;
  .el-icon { font-size: 18px; }
}

@media screen and (max-width: 1200px) {
  .left-draw-container .cart-expanded .cart-header .header-text { font-size: 11px !important; }
}
</style>