<template>
  <div id="trash">
    <el-popover placement="top-start" trigger="hover" content="一键清除废弃标签值">
      <div slot="reference" class="trash" @click="dialogVisible = true">
        <el-badge :value="trashList.length > 99 ? '99+' : trashList.length" class="badge">
          <i class="iconfont icon-delete trashIcon"></i>
        </el-badge>
      </div>
    </el-popover>
    <el-dialog title="删除标签" :visible.sync="dialogVisible" width="600px" @open="dialogOpen" @closed="dialogClosed">
      <el-alert title="标签删除时，同步将标签从会员信息上删除。" type="warning" show-icon :closable="false" style="width: 535px;margin-bottom:20px"> </el-alert>
      <header>已选择待删除的标签/标签值</header>
      <ul class="tagBox">
        <li v-for="item in trashList" :key="item.tagItemId" class="tagItem">
          {{ item.tagItemName }}
          <i class="iconfont icon-guanbi1 delIcon" @click="delCheckTag(item.tagItemId)"></i>
        </li>
      </ul>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doClean" :disabled="!trashList.length">{{ delTime > 0 ? getDelTime() : '删除' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getProgress, getTrashList, isCleanTrashList, cleanTrashList, delTrashList } from '@/request/api';

export default {
  name: 'trash',
  data() {
    return {
      progress: 0,
      trashList: [],
      dialogVisible: false,
      delTime: 0,
      interval: undefined
    };
  },
  mounted() {
    this.getProgress();
  },
  methods: {
    getProgress() {
      getProgress().then(res => {
        const { errorCode, message } = res;
        if (errorCode != 1) return this.$message.error(message);
        this.getTrashList();
      });
    },
    getTrashList() {
      getTrashList().then(res => {
        const { errorCode, message, result = [] } = res;
        if (errorCode != 1) return this.$message.error(message);
        this.trashList = result;
        this.progress = result.length;
      });
    },
    dialogOpen() {
      this.getTrashList();
      isCleanTrashList().then(res => {
        const { errorCode, message, result } = res;
        if (errorCode != 1) return this.$message.error(message);
        this.delTime = result;
        result &&
          (this.interval = setInterval(_ => {
            this.delTime -= 1000;
          }, 1000));
      });
    },
    dialogClosed() {
      if (this.interval) clearInterval(this.interval);
      this.getProgress();
    },
    getDelTime() {
      let s = parseInt((this.delTime % (1000 * 60)) / 1000);
      let m = parseInt((this.delTime % (1000 * 60 * 60)) / (1000 * 60));
      let h = parseInt((this.delTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      return `倒计时: ${h}h:${m}min:${s}s`;
    },
    doClean() {
      if (this.delTime > 0) return this.$message.error('当前有正在删除的标签/标签值，删除完成后才能再次操作删除任务');
      cleanTrashList().then(res => {
        const { errorCode, message } = res;
        if (errorCode != 1) return this.$message.error(message);
        this.$message.success('已开始执行');
        this.dialogVisible = false;
        this.getProgress();
        this.$emit('beginClean')
      });
    },
    delCheckTag(tagItemId) {
      delTrashList({ tagItemId }).then(res => {
        const { errorCode, message } = res;
        if (errorCode != 1) return this.$message.error(message);
        this.getTrashList();
        this.$message.success('移除成功');
      });
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding-top: 13px;
}
/deep/ .el-dialog__footer {
  padding-bottom: 20px;
}
/deep/ .el-alert .el-alert__title {
  color: #303133;
}
/deep/ .el-alert__icon {
  font-size: 14px;
}
.trash {
  position: fixed;
  right: 29px;
  bottom: 370px;
  height: 44px;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  font-size: 14px;
  padding: 8px 10px 8px 0;
  background-color: #fff;
  color: #2F54EB;
  box-shadow: 0 0 7px #7795b152;
  cursor: pointer;
  transition: 0.4s;
  width: 46px;
  .trashIcon {
    display: block;
    font-size: 24px;
    margin: 0 8px 0 10px;
  }
  span {
    display: flex;
    align-items: center;
    margin-top: -2px;
    white-space: nowrap;
  }
}
header {
  color: #303133;
  font-weight: 700;
}
.tagBox {
  display: flex;
  flex-wrap: wrap;
  .tagItem {
    position: relative;
    margin-top: 16px;
    margin-right: 8px;
    padding: 3px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    font-size: 13px;
    color: #2f54eb;
    background: #dee3fc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .delIcon {
    font-size: 14px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    margin-left: 3px;
    justify-content: center;
    cursor: pointer;
    position: relative;
    top: 1px;
    &:hover {
      border-radius: 50%;
      background: #bcc9fe;
    }
  }
}
/deep/ .badge .el-badge__content.is-fixed {
  right: 22px;
}
</style>
