<template>
  <div class="c-progress-list">
    <div
      v-for="file in files"
      :key="file.id"
      class="l-flex--row c-progress-list__item"
    >
      <div
        class="l-flex__none c-sibling-item o-thumbnail has-bg"
        :style="{ 'background-image': file.url }"
      />
      <div class="l-flex__auto l-flex--col c-sibling-item">
        <div class="c-progress-list__tip">
          <div class="l-flex__auto c-progress-list__name u-ellipsis">{{ file.name }}</div>
          <div class="l-flex__none c-progress-list__percent">{{ file.percentage }}%</div>
        </div>
        <el-progress
          :class="[file.status]"
          :percentage="file.percentage"
          :stroke-width="2"
          :show-text="false"
        />
      </div>
      <div class="l-flex__none c-progress-list__icon">
        <i
          v-if="!file.valid"
          class="el-icon-refresh u-pointer"
          @click="retry(file)"
        />
        <i
          class="el-icon-error u-pointer"
          @click="del(file)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  State,
  removeFile,
  retry,
  addListener,
  removeListener
} from '@/utils/upload'

export default {
  name: 'FileProgress',
  data () {
    return {
      files: []
    }
  },
  created () {
    addListener('change', this.onChange)
  },
  beforeDestroy () {
    removeListener('change', this.onChange)
  },
  methods: {
    onChange (files) {
      this.files = files.map(this.transform)
    },
    transform (file) {
      const { id, name, state, valid, percentage, url } = file
      return {
        id,
        name,
        valid,
        percentage,
        url: url ? `url("${url}")` : 'none',
        status: state === State.SUCCESS
          ? 'is-success'
          : valid
            ? 'is-processing'
            : state === State.UPLOADING
              ? 'is-exception'
              : 'is-warning'
      }
    },
    retry ({ id }) {
      retry(id)
    },
    del ({ id }) {
      removeFile(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.c-progress-list {
  display: flex;
  flex-direction: column;
  overflow: auto;

  &__item {
    padding: 6px 0;
    color: $gray;
    border-bottom: 1px solid $gray--light;

    &:first-child {
      border-top: 1px solid $gray--light;
    }
  }

  &__tip {
    display: flex;
    align-items: flex-end;
    padding-bottom: 6px;
    line-height: 1;
  }

  &__name {
    min-width: 0;
    color: $gray--dark;
    font-size: 16px;
  }

  &__percent {
    width: 60px;
    padding-left: 10px;
    font-size: 12px;
    text-align: right;
  }

  &__icon {
    margin-left: 10px;
    width: 74px;
    padding: 0 16px 0 0;
    text-align: right;

    i {
      padding: 6px;
    }

    i + i {
      margin-left: 6px;
    }
  }

  .is-processing {
    ::v-deep {
      .el-progress-bar__outer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-size: 3em 3em;
        background-image: linear-gradient(
          90deg,
          transparent 0em,
          transparent 1em,
          $blue 1em,
          $blue 2em,
          transparent 2em,
          transparent 3em,
          $blue 3em
        );
        animation: move 0.3s linear infinite;
      }

      .el-progress-bar__inner {
        background-color: $blue;
      }
    }
  }

  .is-warning {
    ::v-deep el-progress-bar__inner {
      background-color: $warning;
    }
  }
}

@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 3em 0;
  }
}
</style>
