<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-06-06 20:45:40
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-06-08 16:11:22
 * @FilePath: \yx-big-screen\src\views\map\dialog\Appendix\index.vue
 * @Description: 附件
-->


<template>
  <!-- 附件 -->
  <div class="appendix">
    <div class="tree-panel">
      <left-tree :showType="showType" />
    </div>
    <div class="content-panel">
      <right-panel />
    </div>
  </div>
</template>
        
  <script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import LeftTree from './LeftTree.vue';
import RightPanel from './RightPanel.vue';
import moment from 'moment';
const props = {
  /**
   * 显示类型
   *   只能出入String 的数组，而其数组中的项目只能包含['1','2','3','4','5','6']等，其最多6项
   *   不传默认全部
   * */
  showType: { type: Array < String > [], require:true,default: ['1', '2', '3', '4', '5', '6'] },
  /**
   * 项目类型
   *  只能传入'1','2','3',分别代表 1：地灾类型，2：工程类型，3：河段类型
  */
  projectType:{type:String,require:true,default:'1'},

  /**
   * 当前项目id
   *  只能传入'1','2','3',分别代表 1：地灾类型，2：工程类型，3：河段类型
  */
  projectId:{type:String,require:true}
};
export default defineComponent({
  name: 'Appendix',
  components: { LeftTree, RightPanel },
  props,
  setup(props) {
    const data = reactive({
      showType: props.showType,
      projectType:props.projectType,
      projectId:props.projectId,
    });
    /**
     * 监测显示类型改变
    */
    watch(()=>props.showType,(value)=>{
      data.showType = value
    })

    /**
     * 监测显示类型改变
    */
    watch(()=>props.projectType,(value)=>{
      data.projectType = value
    })

    /**
     * 监测显示类型改变
    */
    watch(()=>props.projectId,(value)=>{
      data.projectId = value
    })
    onMounted(() => {});
    return {
      ...toRefs(data),
    };
  },
});
</script>
    <style lang="less" scoped>
.appendix {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  overflow: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .tree-panel {
    height: 100%;
    width: 150px;
    margin-right: 7px;
    background: rgba(21, 186, 255, 0.1);
    border-radius: 4px;
  }
  .content-panel {
    height: 100%;
    width: calc(100% - 150px);
    background: rgba(21, 186, 255, 0.1);
    border-radius: 4px;
  }
}
</style>