<!--组件配置面板-->
<template>
  <div>
    <template v-if="componentsList.find(c => c.componentCode == currentWidgetcomponentCode)">
      <!-- 事件抽屉 -->
      <div v-for="item in componentsList" :key="item.id">
        <component
          v-if="currentWidgetcomponentCode === item.componentCode"
          :is="item.panel"
          @close="closed"
          @updateWidget="updateWidget"
        ></component>
      </div>
    </template>

    <component v-else :is="CommonWidgetPanel" @close="closed" @updateWidget="updateWidget"></component>
  </div>
</template>

<script setup name="WidgetPanel">
import { inject, onMounted, ref, watch, shallowRef, defineAsyncComponent } from 'vue';

const RotationWidgetPanel = defineAsyncComponent(() => import('./panel/rotation-widget-panel.vue'));
const NewsWidgetPanel = defineAsyncComponent(() => import('./panel/news-widget-panel.vue'));
const AppEnterWidgetPanel = defineAsyncComponent(() => import('./panel/app-enter-widget-panel.vue'));
const CommonWidgetPanel = defineAsyncComponent(() => import('./panel/common-widget-panel.vue'));

const emits = defineEmits(['closed', 'updateWidget']);

// 当前选中的组件
const currentWidgetcomponentCode = ref('');
const currentWidget = inject('currentWidget');

// 组件列表
const componentsList = shallowRef([
  { componentCode: 'CAROUSEL', panel: RotationWidgetPanel },
  { componentCode: 'NEWS', panel: NewsWidgetPanel },
  { componentCode: 'APPLICATION_ENTRANCE', panel: AppEnterWidgetPanel }
]);

/**
 * 关闭
 */
const closed = val => {
  emits('closed', val);
};

const updateWidget = val => {
  emits('updateWidget', val);
};

onMounted(() => {
  currentWidgetcomponentCode.value = currentWidget.value.widget.componentCode;
});

watch(
  () => currentWidget.value,
  () => {
    currentWidgetcomponentCode.value = currentWidget.value.widget.componentCode;
  },
  { deep: true }
);
</script>

<style scoped></style>
