<template>
    <div class="default-main current_device" v-loading="loading">
        <!-- <div class="file_path" v-if="dirCheckedList.value && dirCheckedList.value.length != 0">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in dirCheckedList" :key="index">
                    {{ item.prjName }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="device_dir" v-for="(item, index) in dirList" :key="index">
            <img v-if="item.type == 'dir'" src="@/assets/img/wenjianjia.svg" @click="handleIntoDir(item)" />
            <img
                class="device_dir_file"
                v-if="item.type == 'file'"
                src="@/assets/img/wenjian.svg"
                @click="handleIntoDir(item)"
            />
            <p>{{ item.prjName }}>{{ item.prjDataPath }}</p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineProps, defineExpose } from 'vue'
import { getMakeUpData, getAskDirOrFile } from '@/api/cs-harmonic-boot/recruitment.ts'
// const props = defineProps(['lineId'])
const loading = ref(false)
const dirList = ref([])
const route: any = ref({})
const getMakeUpDataList = (row: any) => {
    route.value = row
    loading.value = true
    getMakeUpData(row.id).then(res => {
        console.log(res, '????????????')
        dirList.value = res.data
        loading.value = false
    })
}
// 进入文件夹
const dirCheckedList: any = ref([])
const handleIntoDir = (row: any) => {
    if (dirCheckedList.value.indexOf(row) == -1) {
        dirCheckedList.value.push(row)
    }
    console.log(row, 'hhhhh', dirCheckedList.value)
    const obj = {
        fileType: row.type,
        nDid: route.value.ndid,
        path: row.prjDataPath,
        prjName: row.prjName
    }
    getAskDirOrFile(obj).then(res => {
        console.log(res, '查询3333333333333333')
        dirList.value = res.data
    })
}
onMounted(() => {
    console.log()
    // getMakeUpDataList()
})
defineExpose({ getMakeUpDataList })
</script>
<style lang="scss" scoped>
.current_device {
    width: 100%;
    height: calc(100vh - 200px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    // justify-content: space-between;
    overflow-y: auto;
    .device_dir {
        width: 24.1%;
        height: 120px;
        border: 1px solid #eee;
        margin: 0 0.3%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        .device_dir_file {
            width: 60px;
            height: 60px;
        }
        img {
            width: 50px;
            height: 50px;
        }
        img:hover {
            cursor: pointer;
        }
        p {
            margin-top: 10px;
        }
        // margin:10px;
    }
}
</style>
