<template>
  <el-dialog
    :title="$t2('文件详情', 'components.VabUpload.fileDetail')"
    :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 pageList-dialog wenjian"
    width="672px"
    @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"/>
              {{ $t2('文件详情', 'components.VabUpload.fileDetail') }}
            </div>
            <div class="fr">
              <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData"
                         v-if="$attrs.edit!==false">{{ $t2('保存', 'system.button.save') }}
              </el-button>
            </div>
          </div>
          <baseTabs>
            <baseTabPane :label="$t2('基本信息', 'system.label.baseInfo')">
              <template #default>
                <table class="table-detail">
                  <tbody>
                  <tr>
                    <th>
                      {{ $t2('文件名', 'components.VabUpload.attachmentName') }}
                    </th>
                    <td colspan="3">
                      {{ attachmentDTO.name }}
                    </td>
                  </tr>
                  <tr>
                    <th>{{ $t2('文件大小', 'components.VabUpload.attachmentSize') }}</th>
                    <td>{{ formatFileSize(attachmentDTO.fileSize) }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t2('分辨率', 'components.VabUpload.widthHeight') }}</th>
                    <td>{{ attachmentDTO.widthHeight }}</td>
                  </tr>
                  <tr>
                    <th>{{ $t2('创建人', 'system.label.createBy') }}</th>
                    <td>{{ attachmentDTO._createBy }}</td>
                    <th>{{ $t2('创建时间', 'system.label.createDate') }}</th>
                    <td>{{ attachmentDTO.createDate }}</td>
                  </tr>
                  </tbody>
                </table>
              </template>
            </baseTabPane>
            <baseTabPane :label="$t2('文件属性', 'components.VabUpload.fileAttribute')">
              <template #button>
                <el-button class="button-sty" @click="addItem" icon="el-icon-plus" v-if="$attrs.edit!==false">
                  {{ $t2('新增文件属性', 'components.VabUpload.addFileAttribute') }}
                </el-button>
              </template>
              <template #default>
                <vxe-grid
                  ref="table-m1"
                  height="330px"
                  :data="attachmentDTO.attachmentAttributeDTOs"
                  v-bind="vxeOption"
                  @resizable-change="$vxeTableUtil.onColumnWitchChange"
                  @custom="$vxeTableUtil.customHandle"
                >
                  <template #attributeName="{row,$rowIndex}">
                    <el-form-item :prop="'attachmentAttributeDTOs.' + $rowIndex + '.attributeName'"
                                  :rules="[{ required: true, trigger: 'blur' }]">
                      <el-input v-model="row.attributeName" clearable/>
                    </el-form-item>
                  </template>
                  <template #attributeValue="{row,$rowIndex}">
                    <el-input v-model="row.attributeValue" clearable/>
                  </template>
                  <template #operate="{row,$rowIndex}">
                    <a class="a-link" @click="attachmentDTO.attachmentAttributeDTOs.splice($rowIndex, 1)"
                       v-if="$attrs.edit!==false">
                      <el-tooltip :enterable="false" effect="dark" :content="$t2('删除', 'components.VabUpload.delete')"
                                  placement="top"
                                  popper-class="tooltip-skin">
                        <i class="el-icon-delete"/>
                      </el-tooltip>
                    </a>
                  </template>
                </vxe-grid>
              </template>
            </baseTabPane>
          </baseTabs>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {propertiesMixins} from './mixins';

export default {
  mixins: [propertiesMixins]
};
</script>
