<template>
  <div class="batch-list">
    <template v-if="dataList.length > 0">
      <div v-for="(item, index) in dataList" :key="index" class="batch-item">
        <p class="batch-item-name">{{item.name}}</p>
        <div class="batch-item-progress">
          <el-progress
            :percentage="item.taskCount == 0 ? 100 : (+((item.finishCount*100/item.taskCount).toFixed(2)))">
          </el-progress>
        </div>
      </div>
    </template>
    <div v-else style="text-align: center;">
      暂无批量处理数据
    </div>
  </div>
</template>
<script>

export default {
  name: "batchList",
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {},
  watch: {}

};

</script>
<style lang="less" scoped>
.batch-list {
  .batch-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .batch-item-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .batch-item-progress {
      display: inline-block;
      width: 300px;
    }
  }
}
</style>
<style lang="less">
</style>