<template>
  <span class="p10">
    <template v-if="edit || !!imageUrl">
      <el-tooltip :enterable="false" effect="dark" :content="fileName" placement="top"
                  popper-class="tooltip-skin" :disabled="!fileName">
        <a class="a-link img num1" @click="openPreview()">
            <el-image v-if="!!imageUrl" :key="imageUrl" :src="imageUrl" :lazy="imageLazy"/>
            <span class="num" v-if="size>1">{{ size }}</span>
        </a>
      </el-tooltip>
      <template v-if="showViewButton">
        <el-tooltip :enterable="false" effect="dark" :content="title" placement="top" popper-class="tooltip-skin">
          <a href="javascript:void(0);" class="a-link nums" @click="openAttachmentDialog">
            <i class="iconfont icon-fujian3"/>
          </a>
        </el-tooltip>
        <template v-if="edit && isUploadEnabled">
          <el-tooltip :enterable="false" effect="dark" :content="$t1('上传')" placement="top"
                      popper-class="tooltip-skin"
          >
          <a href="javascript:void(0);" class="a-link nums" @click="uploadFile">
            <i class="el-icon-upload2"/>
          </a>
        </el-tooltip>
        </template>

      </template>
      <uploadDialog v-if="showUploadDialog" :visiable.sync="showUploadDialog"
                    :rows.sync="rows" :title="title" :edit="edit" :param.sync="option.uploadConfig"
                    :onConfirm="confirmInsertAttachment"/>
    </template>
  </span>
</template>

<script>
import {indexMixin} from './mixins'

export default {
  name: "baseAttachment",
  components: {
    uploadDialog: () => import('./uploadDialog')
  },
  mixins: [indexMixin]
}
</script>

<style scoped>
.p10 .a-link{padding-right:10px;margin-right:10px;}
</style>
