<template>
  <div class="panel panel-props">
    <div class="panel-title panel-title-with-action">
      属性编辑
      <a-button type="primary" size="small" @click="emit('refresh')">刷新</a-button>
    </div>
    <a-empty v-if="!selectedPage" class="panel-empty" description="请选择页面" />
    <PropsEditorTree
      v-else
      :page="selectedPage"
      v-model:testDetailId="testDetailIdModel"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import PropsEditorTree from './PropsEditorTree.vue';
import type { IHomeCommonCategoryDefine } from '../../CommonCategoryDefine';

const props = defineProps<{
  selectedPage: (IHomeCommonCategoryDefine['page'][0]) | null;
  testDetailId: number;
}>();

const emit = defineEmits<{
  (e: 'refresh'): void;
  (e: 'update:testDetailId', v: number): void;
}>();

const testDetailIdModel = computed({
  get: () => props.testDetailId,
  set: (v) => emit('update:testDetailId', v),
});
</script>

<style scoped>
.panel-props {
  width: 720px;
  flex-shrink: 0;
}
.panel-title {
  padding: 8px 12px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.panel-title-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.panel-empty {
  padding: 16px;
  color: #999;
  font-size: 12px;
}
</style>
