<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">ImageUplader</div>
    </div>
    <h3>图片上传示例</h3>
    <h4>点击相机图标开始上传</h4>
    <div class="container">
      <ImageUploader
        v-model="files"
        post-action="/postImage.action"
        :size="1024 * 1024 * 200"
        @input-file="inputFile"
        :customAction="customAction"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'uploaderExample',
  data () {
    return {
      files: [],
      uploadFiles: []
    }
  },
  watch: {
    files (val) {
      console.log(val)
    }
  },
  methods: {
    async inputFile(newFile, oldFile) {
      console.log('input file: newFile', newFile);
      console.log('input file:oldFile', oldFile);
    },
    customAction () {
      this.$Toast.loading({
        content: '上传中...',
        duration: null,
      });
      return new Promise(resolve => {
        setTimeout(() => {
          this.$Toast.hide();
          this.$Toast.success({
            content: '上传成功',
            duration: 1.2,
            mask: false
          });
          resolve(true);
        }, 1000);
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 16px;
  .uploader {
    width: 100%;
    .upload_button {
      display: inline-block;
      background: #1089FF;
      height: 40px;
      border-radius: 2px;
      color: #FFFFFF;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      b {
        font-weight: normal;
        .ok-icon {
          margin-right: 16px;
        }
      }
      &:active {
        background: #40a9FF;
      }
    }
  }
  .file-list {
    list-style: none;
    padding: 0;
    margin:  16px auto;
    .file {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
      .left, .right {
        width: 50px;
        &.left {
          text-align: left;
          width: 40px;
        }
        &.right {
          text-align: right;
          span {
            font-size: 12px;
            color: #e42c2c;
            background: #f0e4e1;
            padding: 4px;
            border-radius: 4px;
          }
        }
      }
      .middle {
        width: calc(100% - 90px);
        padding: 0 8px;
        .top {
          margin-bottom: 4px;
          .name {
            font-size: 14px;
            color: #333333;
            font-weight: 600;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
          }
        }
        .bottom {
          span {
            font-size: 12px;
            color: #999999;
            &:not(last-child) {
              padding-right: 8px;
            }
          }
        }
      }
    }
  }
}
</style>