<template>
  <div class="panel">
    <div class="title">
      <h3>批量生成</h3>
      <fp-button @click="createBatch" style="position:absolute; right: 20px; top: 10px;">创建
      </fp-button>
    </div>
    <div class="list-wrapper">
      <div class="list">
        <div class="batch-item" v-for="item in items" :key="item.id + '-' + item.doneNum " @click="editBatch(item)">
          <h4>{{ item.name }}</h4>
          <p style="color: #606266;">{{ item.doneNum }}/{{ item.num }}</p>
          <el-progress :percentage="~~((item.doneNum/item.num)*100)"></el-progress>
          <div>
            <el-tag @click.stop="removeHandler(item)" style="margin-right: 10px;" type="info" effect="dark" title="删除">删除
            </el-tag>
            <el-tag :type="item.status | statusTypeFilter" effect="dark">{{ item.status|statusFilter }}</el-tag>
            <a v-if="item.status === 2" style="text-decoration: none; margin-left: 10px;" :href="item.path | downLoadUrl"
               @click="downloadHandler" target="_blank">
              <el-tag type="primary" effect="dark" title="点击下载">下载</el-tag>
            </a>
          </div>
        </div>
      </div>
      <fp-empty :data="items"/>
    </div>
  </div>
</template>

<script>

import {mapActions, mapMutations, mapState} from "vuex";
import FpEmpty from "../../common/FpEmpty";
import FpButton from "../../common/FpButton";

export default {
  name: "FpAsideBatch",
  components: {
    FpButton,
    FpEmpty,
  },
  data() {
    return {
      params: {
        name: ''
      },
      timer: null,
    }
  },
  filters: {
    statusTypeFilter(v) {
      let ts = '0info 1primary 2success 3warning'.split(' ')
      if (v >= ts.length) {
        return 'danger';
      }
      return ts[v].slice(1)
    },
    statusFilter(v) {
      let ts = '0暂未开始 1正在处理 2处理完成 3异常结束'.split(' ')
      if (v >= ts.length) {
        return '未知状态';
      }
      return ts[v].slice(1)
    },
    downLoadUrl(v) {
      return (v && !v.startsWith('http')) ? window.API_URL + v : v;
    }
  },
  computed: {
    ...mapState({
      'items': state => state.batch.items,
      'p': state => state.poster.p,
      'editor': state => state.editor,
    })
  },
  created() {
    this.search()
    let that = this;
    this.timer = setInterval(() => {
      that.search();
    }, 5000)
  },
  destroyed() {
    window.clearInterval(this.timer);
  },
  methods: {
    ...mapActions({
      'search': 'batch/getItems',
      'remove': 'batch/remove',
    }),
    ...mapMutations({}),
    searchHandler() {
      this.search()
    },
    editBatch(item) {
      this.editor.showBatch = true
      this.editor.batchPosterId = item.posterId
      this.editor.batchId = item.id
    },
    createBatch() {
      this.editor.showBatch = true
      this.editor.batchPosterId = 0
      this.editor.batchId = 0
    },
    downloadHandler(ev) {
      ev.stopPropagation();
    },
    removeHandler({id}, ev) {
      this.$confirm('确定要删除该批量记录吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove(id).then(() => {
          this.search()
        });
      })
    }
  }
}
</script>

<style scoped>
.title {
  padding: 17px 24px;
  height: 56px;
  box-sizing: border-box;
}

.title h3 {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  font-weight: 500;
  user-select: none;
  padding: 0;
  margin: 0;
}

.list-wrapper {
  overflow-y: auto;
  height: calc(100vh - 111px);
  /*padding: 0px 10px;*/
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.batch-item {
  width: 100%;
  height: 100px;
}


.batch-item {
  border-radius: 4px;
  /*height: 72px;*/
  height: 100px;
  color: #33383e;
  display: -webkit-flex;
  /*display: flex;*/
  display: initial;
  align-items: center;
  cursor: pointer;
  margin: 0 24px 12px;
  user-select: none;
  background-color: #f6f7f9;
  padding: 6px;
}

.batch-item:hover {
  background-color: #33383e33;
}


</style>