<template>
  <div style="background-color: #ffffff;padding-left: 16px;padding-right: 16px;">
    <!-- 属性选择器 -->
    <div style="display: flex;justify-content: center;padding-top: 8px;width: 100%">
      <a-radio-group size="large" type="button" v-model="selectedOption"
                     style="width: 100%;justify-content: center;text-align: center">
        <a-radio style="width: 100%;" value="property" default-checked>属性</a-radio>
        <a-radio style="width: 100%;" value="style">样式</a-radio>
        <a-radio style="width: 100%;" value="interaction">交互</a-radio>
      </a-radio-group>
    </div>

    <!-- tabpannel -->
    <div style="margin-top: 16px;">
      <!-- 属性面板 -->
      <div>
        <a-input-search placeholder="Please enter something"/>
        <a-space direction="vertical" fill style="margin-top: 8px;">
          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
            <span>组件ID</span>
            <a-input style="width: 150px;"/>
          </div>
          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
            <span>是否可见</span>
            <a-switch v-model="scheme.visible"/>
          </div>
          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
            <span>是否禁用</span>
            <a-switch v-model="scheme.disable"/>
          </div>
          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
            <a-collapse-item header="基本配置" key="1">
              <div style="display: flex;justify-content: space-between;vertical-align: middle;">
                <span>内容</span>
                <a-input v-model="scheme.text" style="width: 150px;"/>
              </div>
            </a-collapse-item>
          </a-collapse>
          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
            <a-collapse-item header="循环" key="1">
            </a-collapse-item>
          </a-collapse>
          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
            <a-collapse-item header="插槽" key="1">
            </a-collapse-item>
          </a-collapse>
          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
            <a-collapse-item header="HTML属性" key="1">
            </a-collapse-item>
          </a-collapse>
          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
            <a-collapse-item header="高级属性" key="1">
            </a-collapse-item>
          </a-collapse>
        </a-space>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {watch, defineProps, computed, ref, onMounted} from 'vue';
import {IPageComponent} from '@/type/IPageComponent';
import {useSchemeStore} from '../stores/useSchemeStore'

import {IComponent} from "@/type/IComponent.ts";

const props = defineProps<{
  scheme: IPageComponent
}>();


const store = useSchemeStore()

const selectedOption = ref('property');
const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageComponent);

// 使用 deep 选项来深度监听对象的变化
watch(scheme, (value, oldValue) => {
  // console.log("scheme Changed", value);
  if (value)
    store.updateScheme(value.id, value as IComponent);
}, {deep: true});

onMounted(() => {
  // 初始化时的逻辑
});
</script>

<style scoped>
:deep(.arco-collapse-item-content) {
  background-color: #ffffff;
}

:deep(.arco-input-wrapper) {
  z-index: 1;
  background-color: var(--color-bg-2);
  border-color: rgb(var(--gray-4));
  box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
</style>