<!--
 * @Description: Mongo文件详情对话框组件
 * @Author: laoliu  sunhuihong
 * @Date: 2022-08-03 9:56:28
 * @LastEditTime: 2023-07-17 12:42:00
-->
<template>
  <el-dialog width="600px" title="Mongo文件详情" :visible.sync="visible" 
    :close-on-click-modal="false" @open="initData" :before-close='handleClose' center>
    <el-descriptions :column="1" style="margin: 0 26px;" direction="horizontal" 
      :labelStyle="{'font-weight': 'bold', 'width': '120px'}" 
      border v-if="curFile && curFile.metadata">
      <el-descriptions-item label="文件名">
        {{curFile.filename ? curFile.filename : '- -'}}
      </el-descriptions-item>
      <el-descriptions-item label="MIME类型">
        {{curFile.mime ? curFile.mime : '- -'}}
      </el-descriptions-item>
      <el-descriptions-item label="图片文件">
        {{curFile.isImage ? curFile.isImage : '- -'}}&emsp;
        <el-popover v-if="curFile && curFile.filename" placement="right-end" title="" 
          width="500" trigger="click">
          <el-image fit="contain" :src="imgSrc"
            style="width: 500px; height: 600px" /> 
          <el-button v-if="curFile.metadata.image" style="margin-right: 10px" slot="reference" type="primary"
            @click="handleClick(curFile.filename)" plain size="mini">
            查看
          </el-button>
        </el-popover>
      </el-descriptions-item>
      <el-descriptions-item label="文件大小">
        {{curFile.fileSize}}<span v-if="curFile.fileSize">，{{curFile.fileWidth + ' x ' + curFile.fileHeight}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="建议大小">
        <span>{{curFile.metadata.maxSize ? ('≤' + curFile.metadata.maxSize): '- -'}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{curFile.creatDateTime ? curFile.creatDateTime : '- -'}}
      </el-descriptions-item>
      <el-descriptions-item label="引用表">
        {{curFile.metadata.refTable ? 
          (curFile.metadata.refTable + '→' + curFile.metadata.refFieldDesc + '→' + curFile.metadata.refField) 
          : '- -'
        }} 
      </el-descriptions-item>
      <el-descriptions-item label="原始文件名">
        {{curFile.metadata.originalName ? curFile.metadata.originalName : '- -'}}
      </el-descriptions-item>
      <el-descriptions-item label="弃用文件名">
        {{curFile.metadata.deprecateName ? curFile.metadata.deprecateName : '- -'}}
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'FileDetailsDialog',
  props: ["visible", "filename"],

  data() {
    return {
      curFile: {},
      imgSrc: '',
    }
  },

  methods: {
    initData() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_MONGO_FILE_DETAIL, this.filename);
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.curFile = result.data || {};
        }
      })
    },

    handleClick(filename) {
      this.imgSrc = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DOWNLOAD_MONGO_FILE, filename);
    },

    handleClose() {
      this.imgSrc = '';
      this.$emit("close-dialog", false);
    }
  },
}
</script>