<template>
  <div class="go-componet1" :style="wrapperStyle">
    <!-- 列表展示组件 -->
    <div class="list-container" :style="containerStyle">
      <div 
        v-for="(item, index) in listData" 
        :key="index" 
        class="list-item"
        :style="itemStyle"
      >
        <div class="item-content">
          <div class="item-title" :style="titleStyle">{{ item.title || item.name || item.label || item }}</div>
          <div v-if="item.description || item.value" class="item-description" :style="descStyle">
            {{ item.description || item.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, computed } from 'vue'
import { CreateComponentType } from '@/packages/index.d'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { chartConfig } = toRefs(props)

const wrapperStyle = computed(() => ({
  width: chartConfig.value.attr.w + 'px',
  height: chartConfig.value.attr.h + 'px'
}))

const option = computed(() => chartConfig.value.option)

// 列表数据
const listData = computed(() => {
  const dataset = option.value.dataset
  if (Array.isArray(dataset)) {
    return dataset
  } else if (typeof dataset === 'string' && dataset.startsWith('[')) {
    try {
      return JSON.parse(dataset)
    } catch {
      return [dataset]
    }
  } else if (dataset) {
    return [dataset]
  }
  return []
})

// 容器样式
const containerStyle = computed(() => ({
  padding: '10px',
  height: '100%',
  overflow: 'auto'
}))

// 列表项样式
const itemStyle = computed(() => ({
  marginBottom: '8px',
  padding: '8px 12px',
  backgroundColor: '#f5f5f5',
  borderRadius: '4px',
  borderLeft: `3px solid ${option.value.style?.borderColor || '#1890ff'}`
}))

// 标题样式
const titleStyle = computed(() => ({
  fontSize: `${option.value.style?.fontSize || 14}px`,
  color: option.value.style?.color || '#333333',
  fontWeight: 'bold',
  marginBottom: '4px'
}))

// 描述样式
const descStyle = computed(() => ({
  fontSize: `${(option.value.style?.fontSize || 14) - 2}px`,
  color: option.value.style?.descColor || '#666666'
}))
</script>

<script lang="ts">
// 重要：确保组件有默认导出
export default {
  name: 'Componet1'
}
</script>

<style lang="scss" scoped>
.go-componet1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.list-container {
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

.list-item {
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.item-content {
  display: flex;
  flex-direction: column;
}

.item-title {
  line-height: 1.4;
}

.item-description {
  line-height: 1.3;
}
</style>