<template>
  <div>
    <div id="uploadImage" :class="classList">
      <div
        class="upload-list"
        model="singer"
        v-for="(attachment, index) in attachments"
        :key="index"
        style="display: inline-block; vertical-align: middle; float: left"
      >
        <template v-if="$attrs.hideInfo !== true && $attrs.hideInfo !== 'true'">
          <div class="upload-box">
            <ul class="el-upload-list el-upload-list--picture">
              <li tabindex="0" class="el-upload-list__item">
                <div>
                  <div class="el-upload-list__item-thumbnail">
                    <div
                      class="show-video"
                      v-if="hasPreview(attachment)"
                      @click="openPreview(attachment, index)"
                    >
                      <i class="icon-chakan"></i>
                    </div>
                    <p>
                      <el-image
                        :src="getShowUrl(attachment)"
                        @click="openPreview(attachment, index)"
                        :z-index="999999"
                      />
                    </p>
                  </div>
                  <div class="el-upload-list__item-name">
                    <el-tooltip
                      :enterable="false"
                      class="item"
                      effect="dark"
                      :content="getAttachmentName(attachment)"
                      placement="top"
                    >
                      <p v-if="$attrs.hideName !== true">
                        {{ getAttachmentName(attachment) }}
                      </p>
                    </el-tooltip>
                    <p v-if="$attrs.showSize === true || $attrs.showSize === 'true'">
                      {{ formatFileSize(attachment.fileSize) }}
                    </p>
                    <!--                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createBy !== false">
                      {{ attachment.createBy }}</p>-->
                    <p
                      v-if="
                        $attrs.showSortInput !== true &&
                        !dataType &&
                        $attrs.createDate !== false
                      "
                    >
                      {{ attachment.createDate }}
                    </p>
                  </div>
                  <div class="el-upload-input" v-if="$attrs.showSortInput">
                    <base-input-number
                      v-model="attachment.orders"
                      class="button-sty"
                      :placeholder="$t2('序号', 'components.VabUpload.orders')"
                      :scale="0"
                      @change="handleChange"
                    />
                  </div>
                  <div class="el-upload-input" v-if="$attrs.showNameInput">
                    <el-input
                      v-model="attachment.name"
                      class="button-sty"
                      :placeholder="$t2('请输入名称', 'components.VabUpload.name')"
                      :scale="0"
                      @change="handleChange"
                    />
                  </div>
                  <div class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </div>
                  <div
                    class="el-icon-close"
                    @click="deleteFile(index)"
                    v-if="
                      $attrs.edit !== false &&
                      $attrs.edit !== 'false' &&
                      attachment.h5 !== 1 &&
                      $attrs.remove !== false
                    "
                  >
                    <i
                      class="el-tooltip iconfont iconshanchu"
                      aria-describedby="el-tooltip-6144"
                      tabindex="0"
                    ></i>
                  </div>
                  <div class="el-icon-tagEdit" v-if="attachment.h5 !== 1">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="$t2('下载', 'system.button.download')"
                      placement="top"
                    >
                      <i class="el-icon-download" @click="downloadFile(attachment)"></i>
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="$t2('详情', 'components.VabUpload.detail')"
                      placement="top"
                      v-if="
                        attachment &&
                        attachment.id &&
                        $attrs.showProperties !== false &&
                        !dataType
                      "
                    >
                      <i
                        class="iconfont icon-shuxing"
                        @click="openPropertiesDialog(attachment)"
                      ></i>
                    </el-tooltip>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </template>
        <template v-else>
          <a>
            <el-image
              :src="getShowUrl(attachment)"
              @click="openPreview(attachment, index)"
              :z-index="999999"
            />
          </a>
          <a
            href="javascript:void(0);"
            class="del"
            @click="deleteFile(index)"
            v-if="$attrs.edit !== false && $attrs.edit !== 'false' &&
                      $attrs.remove !== false"
            ><i class="el-icon-error"></i
          ></a>
        </template>
      </div>
      <div
        class="el-upload el-upload--picture"
        style="vertical-align: middle; display: inline-block; float: left"
        v-if="$attrs.edit !== false && $attrs.edit !== 'false'"
      >
        <button
          type="button"
          class="avatar-uploader"
          v-if="showUploadBtn"
          @keyup.prevent
          @keydown.enter.prevent
          @click="openUploadDialog()"
          @mouseenter="uploadEnterOver()"
          @mouseleave="uploadEnterLeave()"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </button>
      </div>
    </div>
    <propertiesDialog
      v-if="showPropertiesDialog"
      :visiable.sync="showPropertiesDialog"
      :editAttachment.sync="editAttachment"
      :edit.sync="$attrs.edit"
    ></propertiesDialog>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :initial-index.sync="chooseIndex"
      :url-list="pictureDtoList"
    />
  </div>
</template>

<script>
import { viewMixins } from "./mixins";

export default {
  mixins: [viewMixins],
  components: {
    propertiesDialog: () => import("./propertiesDialog.vue"),
    ElImageViewer: () => import("./image-viewer"),
  },
  computed: {
    classList() {
      // 'upload-img': this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')
      let arr = [];
      if (
        this.dataType ||
        this.$attrs.hideInfo == true ||
        this.$attrs.hideInfo == "true"
      ) {
        arr.push("upload-img");
      }
      let widgetSize = this.$attrs.widgetSize || 2;
      if (widgetSize) {
        let str1 = "widgetSize-" + widgetSize;
        arr.push(str1);
      }
      return arr;
    },
  },
};
</script>
