<script setup lang="ts">
import { ref, unref, shallowReactive, defineAsyncComponent } from 'vue';
import { usePermission } from '@/core/usePermission';

const panels = shallowReactive([
  {
    id: 'service-items-list',
    title: '项目列表',
    component: defineAsyncComponent(() => import('@/service/ServiceItemsList.vue')),
  },
  {
    id: 'service-items-confirm',
    title: '待确认项目',
    component: defineAsyncComponent(() => import('@/service/ServiceItemsConfirm.vue')),
  },
  {
    id: 'service-items-system',
    title: '系统项目',
    component: defineAsyncComponent(() => import('@/service/ServiceItemsSystem.vue')),
    hide: usePermission('fdhb:service_items_system:list', true),
  },
].filter(item => !unref(item.hide)));

const activePanel = ref(panels[0].id);
const currentComponent = ref<any>(null);

// 获取当前激活的组件
const getCurrentComponent = () => {
  return panels.find(panel => panel.id === activePanel.value);
};

// 切换面板
function handleChange(panelId: string) {
  activePanel.value = panelId;
  // 延迟执行，确保新组件已经渲染完成
  setTimeout(() => {
    if (currentComponent.value && typeof currentComponent.value.send === 'function') {
      currentComponent.value?.send();
    } 
  }, 100);
};
</script>

<template>
  <div class="p-6">
    <!-- 标签栏 -->
    <div class="mb-4">
      <a-radio-group v-model:value="activePanel" @change="(e) => handleChange(e.target.value)">
        <a-radio-button v-for="panel in panels" :key="panel.id" :value="panel.id">
          {{ panel.title }}
        </a-radio-button>
      </a-radio-group>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <component 
        :is="getCurrentComponent()?.component" 
        :title="getCurrentComponent()?.title" 
        ref="currentComponent"
        :key="activePanel"
      ></component>
    </div>
  </div>
</template>

<style scoped lang="scss">
section {
  color: rgba(0, 0, 0, 0.85);

  > header {
    font-size: 18px;
    font-weight: 700;

    :deep(.ant-btn-link) {
      padding-block: 0;
      font-size: 18px;
      border: none;
    }
  }

  > main {
    margin-left: 18px * 4;
    padding: 0 15px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);

    > .row > .ant-space {
      font-size: 16px;
    }

    .row {
      padding: 12px 0;

      span > label {
        color: rgba(0, 0, 0, 0.45);
      }

      label::after {
        margin-left: 2px;
        margin-right: 8px;
        content: ':';
      }

      > header::before {
        $size: 10px;
        content: '';
        display: inline-block;
        margin-right: 12px;
        width: $size;
        height: $size;
        border: 2px solid #1d6ff6;
        border-radius: 50%;
      }

      > main {
        margin-left: 18px * 2;
      }
    }
  }

  .ant-tag {
    margin-top: 6px;
  }
}

.separate {
  :deep(.ant-space-item) {
    & + .ant-space-item::before {
      content: '，';
      margin-right: 2px;
    }
  }

  span + span::before {
    content: '，';
    margin-right: 2px;
  }
}

.content-wrapper {
  height: calc(100vh - 60px - 24px - 32px - 60px); // 减去标签栏高度
  overflow: auto;
}

.trend-up {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.trend-down {
  color: #87d068;
  border-color: #87d068;
}
</style>
