<template>
  <div class="newbi-report-list">
    <div class="top-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item> 我的报告 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="folder-list">
      <el-popover
        placement="right"
        title="添加文件夹"
        trigger="click"
        ref="addform"
      >
        <el-form size="mini" label-width="100px">
          <el-form-item label="文件夹名称">
            <el-input v-model="addForm.folderName"></el-input>
          </el-form-item>
          <el-button
            size="mini"
            style="display: block; margin: 0 auto 10px"
            type="primary"
            @click="addFolder"
          >
            确定
          </el-button>
        </el-form>
        <div class="folder add" slot="reference">
          <div class="btns" style="height: 16px"></div>
          <i
            class="el-icon-plus"
            style="
              font-size: 60px;
              margin: 10px;
              color: #409eff;
              font-weight: 600;
            "
          ></i>
          <div class="name" style="color: #409eff">添加文件夹</div>
        </div>
      </el-popover>
      <div class="folder" v-for="(item, i) of list" :key="i">
        <div class="btns">
          <el-tooltip effect="dark" content="编辑" placement="top">
            <el-popover
              placement="right"
              title="编辑文件夹"
              trigger="click"
              ref="addform"
            >
              <el-form size="mini" label-width="100px">
                <el-form-item label="文件夹名称">
                  <el-input v-model="editForm.folderName"></el-input>
                </el-form-item>
                <el-button
                  size="mini"
                  style="display: block; margin: 0 auto 10px"
                  type="primary"
                  @click="editFolder"
                >
                  确定
                </el-button>
              </el-form>
              <i
                class="el-icon-edit"
                slot="reference"
                @click="onEdit(item)"
              ></i>
            </el-popover>
          </el-tooltip>

          <el-tooltip effect="dark" content="删除" placement="top">
            <i class="el-icon-delete" @click="onDel(item.id)"></i>
          </el-tooltip>
        </div>
        <img src="../../../assets/folder.png" alt="" @click="onGo(item)" />
        <div class="name">{{ item.folderName }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { folderList, folderSave, folderDel } from "../../../api/newbi/bigdata";
export default {
  created() {
    this.getData();
  },
  data() {
    return {
      list: [],
      addForm: { folderName: "" },
      editForm: { id: "", folderName: "" },
    };
  },
  methods: {
    getData() {
      folderList().then((res) => {
        this.list = res.data.data;
      });
    },
    addFolder() {
      if (!this.addForm.folderName) {
        return this.$message({ message: "请填写文件夹名称", type: "warning" });
      }
      folderSave(this.addForm).then((res) => {
        this.$message({ message: "添加成功", type: "success" });
        this.$refs.addform.forEach((i) => i.doClose());
        this.getData();
      });
    },
    onEdit(folder) {
      this.editForm = folder;
    },
    editFolder() {
      if (!this.editForm.folderName) {
        return this.$message({ message: "请填写文件夹名称", type: "warning" });
      }
      folderSave(this.editForm).then((res) => {
        this.$message({ message: "修改成功", type: "success" });
        this.$refs.addform.forEach((i) => i.doClose());
        this.getData();
      });
    },
    onDel(id) {
      this.$confirm("确定删除文件夹吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          folderDel({ ids: id }).then((res) => {
            this.$message({ message: "已删除", type: "success" });
            this.getData();
          });
        })
        .catch(() => {});
    },
    onGo({ id, folderName }) {
      this.$router.push(
        `/newbi/report/report?id=${id}&folderName=${folderName}`
      );
    },
  },
};
</script>
<style lang="scss">
.newbi-report-list {
  box-sizing: border-box;
  .top-wrapper {
    padding: 16px 10px;
    border-bottom: 1px solid #ccc;
  }
  .folder-list {
    height: calc(100% - 54px);
    overflow-y: auto;
    .folder {
      margin: 20px 30px;
      float: left;
      width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid transparent;
      transition: all 0.2s;
      cursor: pointer;
      padding: 10px 0;
      .el-tooltip item {
        margin: 0;
      }
      .btns {
        visibility: hidden;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
      }
      &:hover {
        background-color: #f1f2fd;
        border: 1px solid #a7aae3;
        &.add {
          background-color: transparent;
          border: 1px solid transparent;
        }
        .btns {
          visibility: visible;
        }
      }
      img {
        width: 90px;
        height: 80px;
      }
      .name {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        font-size: 14px;
        padding: 0 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
