<template>
  <div :class="[fileClass, openClass]">
    <div class="file-name">
      <span v-if="data.editorIng && lockRename" class="rename-icon">
        <i class="el-icon-loading" />
      </span>
      <span v-else class="file-icon">
        <img :src="iconSrc" />
      </span>
      <el-input
        v-show="data.isEditor"
        ref="renameInput"
        v-model="newName"
        size="small"
        @blur="confirmRename"
        @keyup.enter.native="$event.target.blur"
      />
      <span v-show="!data.isEditor" class="file-title">
        {{ data.name }}
      </span>
    </div>
    <div v-if="isFolder && false" class="file-action">
      <el-tooltip
        class="item"
        effect="dark"
        content="新建文件"
        placement="bottom"
      >
        <i class="iconfont iconlujing1708" @click.stop="handleFile" />
      </el-tooltip>
    </div>
    <div v-if="!isFolder && false" class="file-action">
      <el-tooltip
        v-if="showRename"
        class="item"
        effect="dark"
        content="重命名"
        placement="bottom"
      >
        <i class="iconfont iconxiugai3" @click.stop="renameFile" />
      </el-tooltip>
      <el-tooltip
        v-if="showDel"
        class="item"
        effect="dark"
        content="删除"
        placement="bottom"
      >
        <i class="iconfont icon38" @click.stop="delFile" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { deleteFile, renameFile } from "@/api/code";
import { getData } from "@/utils/auth";
import { mapGetters } from "vuex";

export default {
  name: "CodeExplorerRender",
  props: {
    node: {
      type: Object,
      default: () => {},
    },
    data: {
      type: Object,
      default: () => {},
    },
    store: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      newName: "",
      lockRename: false,
    };
  },
  computed: {
    ...mapGetters(["openFileKey", "number", "theme"]),
    // 是否是文件夹
    isFolder() {
      return this.data.isFolder;
    },
    // 文件夹和文件的类名
    fileClass() {
      return this.isFolder ? "folder" : "file";
    },
    // 显示文件和文件夹的图标
    iconSrc() {
      let _default = this.data.language;
      // 作为文件夹的需单独设置
      if (this.isFolder) {
        _default = this.data.expand
          ? `folder-open-${this.theme}`
          : `folder-close-${this.theme}`;
      }
      return require("@/assets/images/code/" + _default + ".svg");
    },
    // 是否显示上传图片按钮
    showUpload() {
      return this.data.name === "assets";
    },
    // 是否显示重名命按钮
    showRename() {
      let parentName = this.node.parent.data.name;
      return (
        !this.isFolder &&
        (parentName === "assets" ||
          parentName === "custom" ||
          parentName === "sections") &&
        false
      );
    },
    // 是否显示删除按钮
    showDel() {
      let parentName = this.node.parent.data.name;
      return this.isFolder || (!this.isFolder && parentName !== "sections");
    },
    currentData() {
      return this.openFileKey ? this.openFileKey : getData();
    },
    openClass() {
      return this.data.key === this.currentData ? "active-open" : "";
    },
  },
  watch: {
    "data.isEditor"() {
      this.$nextTick(() => {
        this.$refs.renameInput.focus();
      });
    },
  },
  methods: {
    handleFile(val) {
      this.$emit("handleFile", this.data, val);
    },
    renameFile() {
      this.newName = this.data.name;
      this.$emit("renameFile", this.data, this.node, true);
    },
    // 提交重命名
    async confirmRename() {
      this.$emit("changeRenameStatus", this.data, this.node, "isEditor", false);
      if (this.newName === this.data.name) {
        this.$emit(
          "changeRenameStatus",
          this.data,
          this.node,
          "editorIng",
          false
        );
        return;
      }
      this.lockRename = true;
      try {
        await renameFile({
          base_name: this.newName,
          key: this.data.key,
          themeId: this.number,
        });
        this.$emit("successRename", this.data, this.node, this.newName);
        this.lockRename = false;
      } catch {
        this.lockRename = false;
      }
    },
    delFile() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deleteFile({
            key: this.data.key,
            themeId: this.number,
          });
        })
        .then(() => {
          this.$emit("delFile", this.data, this.node);
        });
    },
    // 请求成功的方法
    resolveFunc(res, msg) {
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: msg,
          duration: 1000,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss"></style>
