<template>
  <ConfigPageBase
    section="widget"
    title="自定义控件"
    description="呼叫/展示界面可自由定义（platform-vue + rcsmonitor-vue 双渲染器）"
    :defaults="DEFAULT_WIDGETS">
    <template #default="{ payload }">
      <el-table :data="payload.items" size="small" border>
        <el-table-column label="ID" prop="id" width="180" />
        <el-table-column label="名称" prop="name" width="140" />
        <el-table-column label="Schema" prop="schemaJson">
          <template #default="s">
            <pre class="js-mini">{{ s.row.schemaJson }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="Layout" prop="layoutJson">
          <template #default="s">
            <pre class="js-mini">{{ s.row.layoutJson }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="绑定 Scope">
          <template #default="s">
            <el-tag v-for="x in s.row.bindToScopes" :key="x" size="small" effect="plain" style="margin-right: 4px">{{ x }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </ConfigPageBase>
</template>

<script setup lang="ts">
import ConfigPageBase from '@/components/ConfigPageBase.vue'
import { DEFAULT_WIDGETS } from '@/mock/data/configs'
</script>

<style scoped>
.js-mini { margin: 0; font-size: 11px; background: #f5f7fa; padding: 4px 6px; border-radius: 4px; max-height: 60px; overflow: auto; }
</style>
