<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-06-07 09:55:24
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-06-07 14:03:19
 * @FilePath: \yx-big-screen\src\views\map\dialog\Appendix\RightPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <!-- 树形结构 -->
  <div class="right-panel">
    <component :is="activeName" :sourceId="sourceId"></component>
  </div>
</template>
            
  <script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import BimModel from './component/BimModel.vue'
import EstimateBrifine from './component/EstimateBrifine.vue'
import FilesPanel from './component/FilesPanel.vue'
import GeologicalBrifine from './component/GeologicalBrifine.vue'
import PicturePanel from './component/PicturePanel.vue'
import VideoPanel from './component/VideoPanel.vue'

export default defineComponent({
  name: 'RightPanel',
  components: {BimModel,EstimateBrifine,FilesPanel,GeologicalBrifine,PicturePanel,VideoPanel},
  props: [],
  setup() {
    const data = reactive({
      activeName: 'PicturePanel',
      activeId: '0',
      sourceId:null,
      menus: [
        { id: '1001', type: '1', name: '图片资料', component: 'PicturePanel' },
        { id: '1002', type: '2', name: '视频资料', component: 'VideoPanel' },
        { id: '1003', type: '3', name: '文件资料', component: 'FilesPanel' },
        { id: '1004', type: '4', name: '地灾动态简报', component: 'GeologicalBrifine' },
        { id: '1005', type: '5', name: '评估简报', component: 'EstimateBrifine' },
        { id: '1006', type: '6', name: 'BIM模型', component: 'BimModel' },
      ],
    });

    onMounted(() => {
      eventBus.on('AppendixTreeEventBus', (param) => {
        console.log('AppendixTreeEventBus', param);
        const type = param.type
        data.sourceId = Object.hasOwnProperty.call(param,'id') ? param.id : null
        const obj = data.menus.find(item => item.type === type)
        if(obj) data.activeName = obj.component
      });
      data.activeName = data.menus[0].component;
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>
        <style lang="less" scoped>
.right-panel {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  overflow: auto;
}
</style>