<script lang="ts" setup>
import type { View } from '../types';
import { computed } from 'vue';
import { useContext } from '../context';
import ColorConfig from '../configs/ColorConfig.vue';
import NumberStyle from '../styles/NumberStyle.vue'

defineOptions({
  name: 'ConfigCurrentView',
})

const ctx = useContext()
const view = computed<View | undefined>(() => {
  return ctx.activeViewId ? ctx.views[ctx.activeViewId] : undefined
})
const styles = computed(() => {
  if (!view.value?.theme) {
    return undefined
  }
  return Object.entries(view.value.theme).filter(([, value]) => {
    return  typeof value === 'string' && value.startsWith('@@')
  }) as Array<[string, string]>
})
const label = computed(()=>{
  if(!view.value?.title) {
    return undefined
  }
  return view.value.title
})


</script>

<template>
  {{ ctx.activeViewId }}

  <hr/>
  <fieldset>
    <legend>{{ label }}设置</legend>
    <template v-for="([key, value]) in styles" :key="key">
      <ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
      <NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置"   />
<!--      <div v-else>{{ key }}:{{ value }}</div>-->
    </template>
  </fieldset>
<!--<pre><code>{{ view }}</code></pre>-->
</template>
