<template>
  <div class="code-main">
    <div class="code-main-explorer">
      <x-code-explorer class="file-tree" :diff-key="diffKey" :theme-id="themeId" @delLeftFile="closeTab" />
    </div>
    <div class="code-main-editor">
      <x-code-editor />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDataArr, setDataArr, removeData, removeDataArr } from "@/utils/auth"

export default {
  data() {
    return {
      themeId: '',
      diffKey: {
        key: '',
        id: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'dataArr',
      'number',
      'openFileKey'
    ])
  },
  created() {
    this.themeId = this.$route.params.id
    if (this.number && this.number !== this.themeId) {
      this.dataArr = []
      setDataArr(JSON.stringify([]))
    }
  },
  methods: {
    closeTab(key) {
      let tabs = this.dataArr;
      let activeName = this.tabName;
      if (activeName === key) {
        tabs.forEach((tab, index) => {
          if (tab.key === key) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.key;
            }
          }
        });
      }
      this.tabName = activeName;
      this.$store.commit(
        "SET_DATA_ARR",
        tabs.filter((tab) => tab.key !== key)
      );
      //删除localstorage对应tab
      let Arr = JSON.parse(getDataArr());
      Arr[this.themeId] = Arr[this.themeId].filter((item) => item.key !== key);
      setDataArr(JSON.stringify(Arr));
      if (this.openFileKey === key) {
        this.$store.commit('SET_OPEN_FILE_KEY', '')
      }
      this.$message({
        message: "删除文件成功！",
        type: "success",
        duration: 1000
      });
    },
  }
}
</script>

<style>

</style>
