<template>
  <div>
    <el-dialog
      title="选择文件夹"
      :visible.sync="Visible"
      width="40%"
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="folder-list" v-if="folderList.length">
        <div class="folder-item-box" v-for="v in folderList" :key="v.id">
          <div class="control">
            <div class="flex flexc">
              <i
                class="el-icon-edit-outline pointer green mb10"
                @click="handleEdit(v)"
              ></i>
              <i
                class="el-icon-delete pointer delete"
                @click="handleDel(v.id)"
              ></i>
            </div>
          </div>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div
              :class="[
                'folder-item',
                'flex',
                'flexc',
                'aic',
                'jca',
                { active: v.id === categoryId },
              ]"
              @click="categoryId = v.id"
            >
              <div class="folder-img-box flex aic jcc">
                <i class="iconfont icon-folder"></i>
              </div>
              <el-tooltip :content="v.categoryName" placement="top">
                <p class="folder-name tac">{{ v.categoryName }}</p>
              </el-tooltip>
            </div>
          </el-card>
        </div>
      </div>
      <el-empty v-else description="暂无文件夹"></el-empty>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">关 闭</el-button>
        <el-button
          :loading="loading"
          size="small"
          type="primary"
          @click="handleOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增文件夹 -->
    <AddFolders
      ref="AddFolders"
      :addFolderVisible.sync="addFolderVisible"
      @addSuccess="getMatterFolderList"
    ></AddFolders>
  </div>
</template>

<script>
import { getMatterFolderList, delMatterFolder } from "@/api/matter";
import { batchSaveDatumToCategory } from "@/api/materials";
import AddFolders from "./AddFolders.vue";
export default {
  components: {
    AddFolders,
  },
  props: {
    folderListVisible: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      categoryId: "", // 选中文件夹
      matterId: "", // 事项id
      folderList: [], // 分类列表
      materialList: [], // 材料列表
      loading: false,
      addFolderVisible: false,
    };
  },
  computed: {
    Visible: {
      get() {
        return this.folderListVisible;
      },
      set(val) {
        this.$emit("update:folderListVisible", val);
      },
    },
  },
  created() {},
  methods: {
    // 获取事项文件夹列表
    async getMatterFolderList() {
      let res = await getMatterFolderList({
        page: 1,
        size: -1,
        matterId: this.matterId,
      });
      if (res.data.code == 1) {
        this.folderList = res.data.data.data;
      }
    },
    // 确定
    async handleOk() {
      if (!this.categoryId) {
        this.$message.warning("请勾选文件夹");
        return;
      }
      this.loading = true;
      let arr = this.materialList.map((v) => {
        return {
          categoryId: this.categoryId,
          materialId: v.id,
          materialName: v.materialName,
        };
      });
      let res = await batchSaveDatumToCategory(arr);
      let { code, msg } = res.data;
      this.loading = false;
      if (code === 1) {
        this.$message.success(msg);
        this.$emit("addSuccess");
        this.handleClose();
      }
    },
    // 新增
    onAdd(materialList, matterId) {
      this.materialList = materialList;
      this.matterId = matterId;
      this.getMatterFolderList();
    },

    // 重置
    handleRest() {
      this.categoryId = "";
    },
    // 关闭
    handleClose() {
      this.categoryId = "";
      this.loading = false;
      this.Visible = false;
    },
    // 删除文件夹
    handleDel(id) {
      this.$confirm("此操作将删除该文件夹，是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(async () => {
          let res = await delMatterFolder({ id });
          let { code, msg } = res.data;
          if (code === 1) {
            this.$message.success(msg);
            this.getMatterFolderList();
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 编辑文件夹
    handleEdit(row) {
      this.$refs.AddFolders.onEdit(row);
      this.addFolderVisible = true;
      console.log(row);
    },
  },
};
</script>

<style lang="less" scoped>
.folder-list {
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  .folder-item-box {
    width: 100%;
    height: 140px;
    position: relative;
    .control {
      top: 10px;
      right: 10px;
      position: absolute;
      display: none;
    }
    i {
      font-size: 18px;
    }
    &:hover {
      .control {
        display: block;
      }
    }
  }
  .folder-item {
    width: 100%;
    height: 140px;
    cursor: pointer;

    .icon-folder {
      font-size: 50px;
      color: #fca134;
    }
    .folder-img-box {
      width: 80px;
      height: 80px;
      background-color: rgba(250, 147, 45, 0.1);
      border-radius: 4px;
    }
    .folder-name {
      width: 100%;
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .active {
    .folder-img-box {
      background-color: rgba(24, 143, 255, 0.1);
    }
    .icon-folder {
      color: #188fff;
    }
    .folder-name {
      color: #1890ff;
    }
  }
}
/deep/.el-checkbox__input {
  position: absolute !important;
}
</style>
