

<template>
  <!-- 文件资料 -->
  <div class="files-panel"> 文件资料 {{ sourceId }} </div>
</template>
          
    <script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import moment from 'moment';
const props = {
  sourceId: { type: String, require: false, default: null },
};
export default defineComponent({
  name: 'FilesPanel',
  components: {},
  props,
  setup(props, { emit }) {
    const data = reactive({
      sourceId: props.sourceId,
      filesList: [],
      files:null,
    });
    /**
     * 监听资源ID变化
     */
    watch(
      () => props.sourceId,
      (value) => {
        data.sourceId = value;
        console.log('-----文件编码：', data.sourceId);
        if (data.sourceId) {
          getFile();
        } else {
          getFilesList();
        }
      }
    );
    /**
     * 获取文件列表
     */
    const getFilesList = () => {
      //测试数据
      data.filesList = [
        {
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
        {
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
      ];
     
      if(data.filesList.length > 0) data.files =  data.filesList[0]
    };
    /**
     * 获取当个文件实体
     */
    const getFile = () => {};
    onMounted(() => {});
    return {
      ...toRefs(data),
      getFilesList,
      getFile,
    };
  },
});
</script>
      <style lang="less" scoped>
.files-panel {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>