<template>
  <CModal :visible="visible" @close="close(false)">
    <CModalHeader>
      <CModalTitle>文件夹选择</CModalTitle>
    </CModalHeader>
    <CModalBody>
      <CModalTitle>
        当前文件夹：
        <span class="path">{{ path_text }}</span>
        <button class="btn-secondary btn btn-sm" @click="go_up" :title="返回">
          <font-awesome-icon icon="turn-up" />
        </button>
      </CModalTitle> 
    </CModalBody>
    <CModalBody>
      <div v-if="multiple">
        <input type="checkbox" v-model="check_all" @change="toggle_check_all"/>
        <span class="subFolder">全选/反选</span>
      </div>
      <div v-if="loading">
        loading...
      </div>
      <div v-else>
        <CListGroupItem class="filename" v-for="e,i in entries" :key="i" @click="toggle_file(e, true)">
          <input type="checkbox" :disabled="dironly && !e.dir" @change="toggle_file(e, false)" v-model="e.checked" />
          <a v-if="e.dir" href="#" class="subFolder" @click="go_down(e.name)">
            {{ e.name }}
          </a> 
          <span v-else class="subFolder">{{ e.name }}</span>
        </CListGroupItem>
      </div>
    </CModalBody>
    <CModalBody>
      <button class="btn btn-primary "  @click="submit">确认</button><!--nextstep btn-next-->
      <button class="btn btn-primary "  @click="close(false)">取消</button>
    </CModalBody>
  </CModal>
</template>

<script>
export default {
  name: 'FileSelector',
  props: ['fsdriver', 'multiple', 'dironly'],
  components: {
  },
  data: function () {
    return {
      visible: false,
      check_all: false,
      loading: false,
      cur_folder_path_c: this.cur_folder_path,
      path: [],
      entries: [],
    };
  },
  computed: {
    path_text() {
      return '/' + this.path.join('/');
    },
  },
  methods: {
    toggle_file(entry, neg) {
      if (this.dironly && !entry.dir) return;
      if (neg) {
        entry.checked = !entry.checked;
      }
      if (!this.multiple && entry.checked) {
        for (var e of this.entries) {
          if (e.name != entry.name) {
            e.checked = false;
          }
        }
      }
    },
    async reload() {
      console.log("reload");
      this.check_all = false;
      this.loading = true;
      console.log(this.fsdriver);
      this.entries = await this.fsdriver.list(this.path_text);
      console.log(this.entries);
      this.loading = false;
    },
    show: async function() {
      this.visible = true;
      this.reload();
    },
    hide: function() {
      this.visible = false;
    },
    close: function(ok) {
      this.visible = false;
      this.$emit('close', ok);
    },

    toggle_check_all(e) {
      for (var x of this.entries) {
        x.checked = e.target.checked;
      }
    },

    go_up() {
      this.path.pop();
      this.reload();
    },

    go_down(name) {
      this.path.push(name);
      this.reload();
    },

    submit: function(){
      var r = [];
      var prefix = this.path_text;
      if (!prefix.endsWith("/")) {
        prefix += "/";
      }
      if (prefix.startsWith("/")) {
        prefix = prefix.substr(1);
      }
      for (var x of this.entries) {
        if (!x.checked) {
          continue;
        }
        r.push(prefix + x.name);
      }
      this.$emit('ok', r);
      this.hide()
    },
  },

  created() {
  },
  mounted() {
  },
  updated() {
  },
}
</script>

<style scoped>
button {
  margin-right: 1rem;
}
.path{
  margin-left: 0.5rem;
  margin-right: 2rem;
}
.subFolder{
  margin-left: 1rem;
}
.badge{
  margin-right:0.5rem;
}
.filename {
  overflow: hidden;
  word-break: break-all;
}

</style>
