<template>
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a
        href="#"
        class="dropdown-toggle"
        data-toggle="dropdown"
        role="button"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <i id="faImage" class="fa fa-cloud-download" title="下载" />
      </a>
      <ul class="dropdown-menu">
        <template v-if="fileDownloads && fileDownloads.length > 0">
          <li
            v-for="item in fileDownloads"
            :key="item.taskId"
          >
            <span>
              <span class="time">{{ item.fileName }}</span>
              <ProgressBar
                :id="item.taskId"
                :ref="item.taskId"
              />
              <span
                v-if="item.status == '200'"
                style="color: green"
              >下载完成</span>
              <span
                v-if="item.status == '500'"
                style="color: red"
              >下载失败</span>
            </span>
          </li>
        </template>
        <li v-else>
          <a>没有下载内容</a>
        </li>
      </ul>
    </li>
  </ul>
</template>


<script>

import ProgressBar from '../widget/ProgressBar.vue';

export default {

  components: {
    ProgressBar,
  },
  data: function () {
    return {
    };
  },
  computed: {
    fileDownloads: function () {
      return this.$store.state.downloadStore.fileDownloads;
    },
    count: function () {
      return this.$store.state.downloadStore.count;
    },
  },
  watch: {
    fileDownloads: {
      handler: function (newVal) {
        if (newVal) {
          //跳到顶部
          window.scrollTo(0, 0);
          $('#faImage').addClass('animate__animated animate__bounceInUp');
          setTimeout(function () {
            $('#faImage').removeClass('animate__animated animate__bounceInUp');
          }, 1000);
          this.$nextTick(() => {
            //此处使用这个可以等节点渲染后再获取节点
            var refs = this.$refs;
            newVal.forEach(function (item1) {
              if (item1.isStart == false) {
                item1.isStart = true;
                refs[item1.taskId][0].download(item1);
              }
            });
          });
        }
      },
      deep:true,
    },
  },

  methods: {

  },
};
</script>





<style>
/* animate.css 			96.4 kB */
/* 动画样式，来源于animate.css组件库，2024-05-09，为了提高前端的加载速度，删除了animate.css，直接使用用到的样式。 */
/* 整个项目就这一个地方用到这个动画 */

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
</style>