<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>