<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in pathList" :key="index" class="path-item"
              @click="clickCurrentPath(pathList, index)">{{ item
              }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
      <div class="folder">
        <el-scrollbar height="200px">
          <el-row v-for="item in folderList" class="folder-item" @click="handleClickDir(item)">
            <svg-icon :icon-class="selectFilesIcons(item)" class-name='files' />{{ item }}
          </el-row>
        </el-scrollbar>
      </div>
    </el-card>
    <el-row justify="center" align="middle" style="margin-top: 10px;">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Folder">
import { ref, reactive, getCurrentInstance, ComponentInternalInstance, watch } from 'vue';
import useMapStore from '@/store/modules/maps';

const props = defineProps(['folderList', 'pathList'])
const proxy = getCurrentInstance() as ComponentInternalInstance;


// 选择目录
function handleClickDir(item) {
  let list = [];
  list.push(item);
  list = sliceFolder(list);
  proxy.emit('changePath', list)
}
// 格式化目录
function sliceFolder(list) {
  for (let i of list) {
    list = i.split('\\')
  }
  return list
}
// 回退点击的目录
function clickCurrentPath(list, index) {
  let newlist = list.splice(0, index + 1);
  proxy.emit('changeBackPath', newlist)
}
// 确定路径
function confirm() {
  proxy.emit('handleConfirm');
}
// 取消按钮
function cancel() {
  proxy.emit('cancel')
}



function selectFilesIcons(file) {
  const picRegex = /\.(jpg|jpeg|png|gif)$/i;
  const jsonRegex = /\.(json|geojson)$/i;
  const zipRegex = /\.(zip|rar)$/i;
  const docRegex = /\.(xlsx|xls|doc|docx|ppt|pptx|pdf|xmind|md|b3dm|glb|las|db|obj|scp|s3mb|dll|txt|clt|kml)$/i;
  const sysRegex = /\.(sys|ini|exe|link|bin)$/i;
  if (picRegex.test(file)) {
    return 'MaterialSymbolsImage'
  } else if (jsonRegex.test(file)) {
    return 'BiFiletypeJson'
  } else if (zipRegex.test(file)) {
    return 'RiFileZipFill'
  } else if (docRegex.test(file)) {
    return 'MdiFileDocument'
  } else if(sysRegex.test(file)){
    return 'MaterialSymbolsSettings'
  }
  else {
    return 'MaterialSymbolsFolderOpenRounded'
  }
}
</script>

<style scoped lang="scss">
.folder-item {
  cursor: pointer;
  padding: 5px;
}

.folder-item:hover {
  background-color: #ecf5ff;
}

:deep(.el-breadcrumb__inner:hover) {
  color: #409EFF;
  cursor: pointer;
  text-decoration: underline;
}

.files {
  font-size: 18px;
  margin-right: 5px;
}
</style>