<template>
  <el-dialog
    :title="$t1('文件详情')"
    :append-to-body="true"
    :modal-append-to-body="falseValue"
    :close-on-click-modal="falseValue"
    :visible.sync="showDialog"
    :modal="falseValue"
    custom-class="dialog-style list-dialog"
    width="700px"
    height="500px"
    @close="dialogClose"
    v-el-drag-dialog
    v-el-dialog-center
  >
    <div id="containt">
      <div class="detail-wrap">
        <el-form ref="editForm" :model="attachmentDTO">
          <div class="d-header clearfix">
            <div class="fl">
              <i class="el-icon-info"/>
              {{ $t1('文件详情') }}
            </div>
            <div class="fr"></div>
          </div>
          <baseTabs>
            <baseTabPane :label="$t1('基本信息')">
              <template #default>
                <table class="table-detail">
                  <tbody>
                  <tr>
                    <th>{{ $t1('文件路径') }}</th>
                    <td colspan="3">
                      <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item v-for="(treeNode,index) in treeNodeArr" :key="index">{{
                            treeNode.label
                          }}
                        </el-breadcrumb-item>
                      </el-breadcrumb>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {{ $t1('文件名称') }}
                    </th>
                    <td colspan="3">{{ attachmentDTO.name }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t1('文件说明') }}</th>
                    <td colspan="3">{{ attachmentDTO.note }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t1('文件大小') }}</th>
                    <td>{{ formatFileSize(attachmentDTO.fileSize) }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t1('单号') }}</th>
                    <td>{{ attachmentDTO.billSn }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t1('单据说明') }}</th>
                    <td colspan="3">{{ attachmentDTO.billInfo }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t1('创建人') }}</th>
                    <td>{{ attachmentDTO.createBy }}</td>
                    <th>{{ $t1('创建时间') }}</th>
                    <td>{{ attachmentDTO.createDate }}</td>
                  </tr>
                  </tbody>
                </table>
              </template>
            </baseTabPane>
            <baseTabPane :label="$t1('文件属性')">
              <template #default>
                <vxe-grid
                  ref="table-m1"
                  class="vxe-tableNo"
                  height="224px"
                  :data="attachmentDTO.fileAttachAttributeDTOs"
                  v-bind="vxeOption"
                  @resizable-change="$vxeTableUtil.onColumnWitchChange"
                  @custom="$vxeTableUtil.customHandle"
                ></vxe-grid>
              </template>
            </baseTabPane>
          </baseTabs>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'propertiesDialog',
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    treeNodeArr: {
      type: Array
    }
  },
  components: {},
  data() {
    return {
      showDialog: true,
      falseValue: false,
      vxeOption: {},
      showContent: true,
      attachmentDTO: {},
      current_prefix: '',
      filePrefix: '',
    };
  },
  computed: {
    pathNameArr() {
      if (this.attachmentDTO.treePathName) {
        return (this.$t1('全部文件') + this.attachmentDTO.treePathName.slice(0, -1)).split(',');
      }
    }
  },
  created() {
    let attachmentDTO = Object.assign({}, this.$attrs.editAttachment);
    this.attachmentDTO = attachmentDTO;
    this.current_prefix = this.attachmentDTO && this.attachmentDTO.serverName ? ('/' + this.attachmentDTO
        .serverName) :
      '';
  },
  mounted() {
    this.getData();
    this.initTableM1();
  },
  methods: {
    dialogClose() {
      this.$emit('update:visiable', false);
    },
    reloadContent() {
      this.getAttributes();
    },
    getData() {
      this.getAttributes();
    },
    getAttributes() {
      this.$http({
        url: this.current_prefix + '/attachment/attribute/list',
        method: 'post',
        data: {
          id: this.attachmentDTO.id
        },
        isLoading: true,
        // modalStrictly: true,
        success: res => {
          this.$set(this.attachmentDTO, 'fileAttachAttributeDTOs', res.objx || []);
        }
      });
    },
    initTableM1() {
      //明细
      var that = this;
      const tableRef = 'table-m1';
      const tableOption = {
        vue: this,
        tableRef: tableRef,
        tableName: 'file_view_ins_propertiesDialog_list-m1',
        columns: [
          {
            type: 'checkbox',
            fixed: 'left',
            width: 48,
            resizable: false
          },
          {
            title: this.$t1('属性名称'),
            field: 'attributeName',
            width: 200
          },
          {
            title: this.$t1('属性值'),
            field: 'attributeValue',
            width: 200
          },
          {
            width: 50,
            fixed: 'right',
            title: '',
            sortable: false
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption = opts;
      });
    },
    formatFileSize(fileSize) {
      fileSize = fileSize || 0;
      if (fileSize < 1024) {
        return fileSize + 'B';
      } else if (fileSize < (1024 * 1024)) {
        var temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + 'KB';
      } else if (fileSize < (1024 * 1024 * 1024)) {
        var temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + 'MB';
      } else {
        var temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + 'GB';
      }
    }
  }
};
</script>
