<template>
  <div>
    <div class="form-image-group">
      <div
        class="form-image"
        v-for="(item, index) in fileList"
        :key="index"
        :style="{ width: width == null ? '250px' : width + 'px', height: height == null ? '250px' : height + 'px' }"
      >
        <img v-if="item" :src="getImgUrl(item)" />
        <div class="action" :style="{ width: width == null ? '250px' : width + 'px', height: height == null ? '250px' : height + 'px' }">
          <Icon v-if="!readonly" custom="fa fa-times-circle" @click="removeImage(index)"></Icon>
          <Icon v-if="!readonly && index < fileList.length - 1 && fileList.length > 1" custom="fa fa-arrow-circle-right" @click="forwardImage(index)"></Icon>
          <Icon v-if="!readonly && index > 0 && fileList.length > 1" custom="fa fa-arrow-circle-left" @click="backwardImage(index)"></Icon>
          <Icon custom="fa fa-eye" @click="previewImage(item)"></Icon>
          <Icon custom="fa fa-download" @click="downloadImage(item)"></Icon>
        </div>
      </div>
      <Upload
        v-if="!readonly"
        accept="image/*"
        :action="uploadAction"
        :headers="uploadHeaders"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :on-success="onUploadSuccess"
      >
        <div
          class="form-image"
          v-if="fileList.length < maxCount || maxCount == null"
          :style="{ width: width == null ? '250px' : width + 'px', height: height == null ? '250px' : height + 'px' }"
        >
          <Icon custom="fa fa-plus-circle" color="#999" :style="{ 'font-size': width == null ? '25px' : width / 3 + 'px', cursor: 'pointer' }"></Icon>
        </div>
      </Upload>
      <Input type="text" :value="value" v-show="false" />
    </div>
    <Modal title="预览" v-model="preview" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="70%">
      <div style="text-align: center">
        <a href="#" :download="imageUrl" onClick="return false;">
          <img :src="getImgUrl(imageUrl)" v-if="preview" style="max-width: 100%" />
        </a>
      </div>
      <template slot="footer">
        <Button type="default" custom-icon="fa fa-times" @click="preview = false">{{ $t('Front_Btn_Close') }}</Button>
      </template>
    </Modal>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';

  export default {
    mixins: [mixinPage],
    data() {
      return {
        preview: false,
        imageUrl: null
      };
    },
    props: {
      // 值
      value: {
        type: String
      },
      /**
       * 请求地址
       */
      url: {
        type: String
      },
      // 只读
      readonly: {
        type: Boolean,
        default: false
      },
      // 最大上传数量
      maxCount: {
        type: Number
      },
      // 图片宽度
      width: {
        type: Number
      },
      // 图片高度
      height: {
        type: Number
      }
    },
    computed: {
      // 上传地址
      uploadAction() {
        return this.url == null ? this.uploadURL : this.url;
      },
      // 文件列表
      fileList() {
        let list = [];
        if (this.value && this.value !== '') {
          try {
            list = this.value.split(',');
          } catch (e) {
            // console.log(e);
          }
        }

        return list;
      },
      // 显示列表
      showList() {
        if (this.fileList === []) {
          return [null];
        } else {
          return this.fileList;
        }
      }
    },
    methods: {
      // 上传之前
      beforeUpload() {
        if (this.maxCount != null) {
          let list = this.fileList;
          if (list.length >= this.maxCount) {
            this.error('Front_Msg_Max_Quantity|' + this.maxCount);
            return false;
          }
        }
      },
      // 上传成功
      onUploadSuccess(res, file) {
        let list = this.fileList;

        list.push(file.response.data[0]);

        this.$emit('input', list.join(','));
      },
      // 前移图片
      forwardImage(index) {
        let list = this.fileList;
        if (index < list.length - 1) {
          let id = list.splice(index, 1);
          list.splice(index + 1, 0, id);

          if (list.length === 0) {
            this.$emit('input', null);
          } else {
            this.$emit('input', list.join(','));
          }
        }
      },
      // 后移图片
      backwardImage(index) {
        let list = this.fileList;
        if (index > 0) {
          let id = list.splice(index, 1);
          list.splice(index - 1, 0, id);

          if (list.length === 0) {
            this.$emit('input', null);
          } else {
            this.$emit('input', list.join(','));
          }
        }
      },
      // 移除图片
      removeImage(index) {
        // this.confirm('确定要移除吗？', () => {
        let list = this.fileList;

        list.splice(index, 1);

        if (list.length === 0) {
          this.$emit('input', null);
        } else {
          this.$emit('input', list.join(','));
        }
        // })
      },
      // 预览
      previewImage(item) {
        this.imageUrl = item;
        this.preview = true;
      },
      // 下载
      downloadImage(item) {
        let url = this.getAttachmentUrl(item, item);
        window.location.href = url;
      }
    }
  };
</script>

<style scoped>
  /* 图片 */
  .form-image-group {
    display: flex;
    flex-flow: wrap;
  }

  .form-image-group div + div {
    margin-left: 4px;
  }

  .form-image {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #ccc;
    margin-top: 8px;
  }

  .form-image img {
    max-height: 100%;
    max-width: 100%;
  }

  .form-image .action {
    /* display: block; */
    display: none;
    background-color: #000;
    opacity: 0.75;
    position: absolute;
    float: right;
  }

  .form-image:hover .action {
    display: block;
  }

  .form-image .action i {
    float: right;
    color: #fff;
    font-size: 24px;
    margin-top: 4px;
    margin-right: 4px;
    cursor: pointer;
  }
</style>
