<template>
  <div class="ui-plugins-demo">
    <h1>UI库插件系统演示</h1>
    
    <!-- 图表插件示例 -->
    <section class="demo-section">
      <h2>📊 图表插件</h2>
      <div class="demo-container">
        <ChartPlugin 
          type="bar" 
          :data="chartData" 
          :options="chartOptions" 
        />
      </div>
    </section>

    <!-- 编辑器插件示例 -->
    <section class="demo-section">
      <h2>📝 代码编辑器插件</h2>
      <div class="demo-container">
        <EditorPlugin 
          v-model="codeContent"
          language="javascript"
          theme="vs-dark"
          :options="editorOptions"
        />
      </div>
      <p><strong>当前代码:</strong></p>
      <pre>{{ codeContent }}</pre>
    </section>

    <!-- 基础UI组件 -->
    <section class="demo-section">
      <h2>🎨 基础组件</h2>
      <DtButton @click="showMessage">点击测试</DtButton>
      <DtModal v-model="showModal" title="插件系统演示">
        <p>这是通过插件系统扩展的基础UI组件！</p>
      </DtModal>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ChartPlugin, EditorPlugin } from '@deotaland/ui'
import { DtButton, DtModal } from '@deotaland/ui'

// 图表数据
const chartData = reactive({
  labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  datasets: [{
    label: '销售数据',
    data: [65, 59, 80, 81, 56, 55],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 205, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
  }]
})

const chartOptions = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top'
    },
    title: {
      display: true,
      text: '月度销售图表'
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
}

// 编辑器内容
const codeContent = ref(`// 欢迎使用UI插件系统
import { ChartPlugin, EditorPlugin } from '@deotaland/ui'

const myChart = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: '数据集',
      data: [1, 2, 3]
    }]
  }
}

// 编辑器支持多种语言和主题
export default myChart`)

const editorOptions = {
  fontSize: 14,
  minimap: { enabled: true },
  wordWrap: 'on'
}

// 模态框状态
const showModal = ref(false)

// 方法
const showMessage = () => {
  showModal.value = true
  console.log('UI插件系统运行正常！')
}
</script>

<style scoped>
.ui-plugins-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.demo-section h2 {
  margin-top: 0;
  color: #374151;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 8px;
}

.demo-container {
  margin-top: 16px;
  min-height: 300px;
}

pre {
  background: #1f2937;
  color: #f9fafb;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  margin-top: 8px;
}
</style>