<template>
    <el-dialog v-model="show" v-loading="loading" :show-close="false" 
    :close-on-press-escape="false" :close-on-click-modal="false" 
    style="width: 260px;">
        <template #header>
            <div class="row overflow-hide">
                <div>
                    <img v-if="details.FileType>0" class="q-px-md" 
                        :src="details.FileType==1?datas.pdfImg:datas.adsImg" 
                        style="height: 43px;" />
                    <img v-else class="q-px-md" 
                        src="@/assets/img/file.png" 
                        style="height: 43px;" />
                </div>
                <div class="q-pl-md col">
                    <div class="row flex-center">
                        <el-tooltip
                        placement="top-start">
                            <template #content><div class="text-center" style="width: 200px;">{{details.FileName}}</div></template>
                            <div class="TreeFile-Title pointer">{{details.FileName}}</div>
                        </el-tooltip>
                    </div>
                    <div class="text-small text-5B5D62 q-pt-sm">
                        <template v-if="details">
                            创建者：{{details.CreateName}}
                        </template>
                        <div v-else class="row items-center">
                            <div class="TreeFile-Title text-sm pointer">恢复文件</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </template>
        
        <div class="TreeFile-container">
            <!-- <el-input class="q-pb-md q-px-md" v-model="filterText" placeholder="关键词检索文件夹" />
            <el-tree 
            ref="treeRef"
            :data="dataList" 
            :props="defaultProps" 
            node-key="FileId"
            default-expand-all
            show-checkbox 
            check-strictly
            :filter-node-method="filterNode"
            @check="handleTreeNodeClick"/>-->
            <el-tree-select
            placeholder="请选择文件"
            node-key="FileId"
            :props="defaultProps" 
            v-model="datas.FolderId"
            :data="dataList"
            check-strictly
            :render-after-expand="false"
            style="width: 220px"
            filterable
            @current-change="handleTreeNodeClick"
            class="auto-width-tree" 
            />
            
        </div>
        
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="()=>closedhandler()">关闭</el-button>
                <el-button :disabled="datas.FolderId==null" type="primary" @click="()=>save()"> 保存恢复 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ApiResult } from '@/configs/axios';
import OrgService from '@/services/OrgService';
import { ref,reactive,watch } from 'vue';
import { View,Download,EditPen,Delete } from '@element-plus/icons-vue';
import { ElMessage,ElTree } from 'element-plus';
import FolderService from "@/services/FolderService";

    const props = defineProps({
        details:{
            type:Object,
            required:''
        },
        selectedDatas:{
            type: Array,
            required:[]
        },
        setFileList:{
            type: Array,
            required:[]
        },
        fileType: {
            type:Number,
            required: 1
        },
        fileId:{
            type: Number,
            required: '' 
        }
    })
    const emit = defineEmits<{
        (event: 'close'): void,
        (event: 'success'): void
    }>()

    interface Tree {
        [key: string]: any
    }
    const filterText = ref('')
    const treeRef = ref<InstanceType<typeof ElTree>>()
    const defaultProps = {
        children: 'ChildList',
        label: 'FileName',
        disabled: 'disabled',
    }
    const datas = reactive({
        pdfImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708337830000_43.png',
        adsImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png',
        fileList: [] as Tree[],
        FolderId: null as Number,
        FolderObj: {},
        checkedKeys: null as any
    })
    const show=ref(true)
    const loading = ref(true)
    const deleteLoading = ref<any>(null);
    const dataList=ref([])

    const closedhandler=()=>{
        emit('close')
    }
    const handleTreeNodeClick = (data:any) => {
        datas.FolderObj = data
    }
    const filterNode = (value: string, data: Tree) => {
        if (!value) return true
        return data.FileName.includes(value)
    }
    const save = () => {
        let title = props.details.FileName
        ElMessageBox.confirm(`此操作将${title}恢复到${datas.FolderObj.FileName?datas.FolderObj.FileName:'根目录'}，是否确定?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
            try {
                let queryMsg = {
                    Id: props.details.FileId,
                    FolderId: datas.FolderId,
                    FileType: props.details.FileType
                };
                deleteLoading.value = ElLoading.service({
                    lock: true,
                    text: "正在处理",
                });
                let pageRes = await FolderService.UpdateTripOtherStatus(queryMsg);
                if (pageRes.data.resultCode == ApiResult.SUCCESS) {
                    ElMessage({
                        showClose: true,
                        message: `恢复文件成功`,
                        type: "success",
                    });
                    emit('close')
                    emit('success')
                } else {
                    ElMessage({
                        showClose: true,
                        message: `恢复文件失败`,
                        type: "warning",
                    });
                }
                deleteLoading.value.close();
                deleteLoading.value = null;
            } catch (error) {}
            })
            .catch(() => {});
        }

    const getFile = async () => {
        let querys = {
            FileType: props.details.FileType>0?props.details.FileType:props.details.FolderType
        }
        let pageRes = await FolderService.GetMyFolderTree(querys);
        if (pageRes.data.resultCode == ApiResult.SUCCESS) {
            dataList.value = pageRes.data.data
        }
    }

    

    watch(filterText, (val) => {
        treeRef.value!.filter(val)
    })

    getFile()
</script>
<style scoped>
    .TreeFile-Title{
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 15px;
        position: relative;
    }
    .TreeFile-Title.text-sm{
        font-size: 12px;
    }
    .TreeFile-container th{
        padding: 0 10px 5px 10px;
        border-bottom: 1px solid #f6f6f6;
        background: #fff;
        position: sticky;
        top: 0px;
        z-index: 2;
    }
    .TreeFile-container td{
        padding:  8px 10px;
        border-bottom: 1px solid #f6f6f6;
    }
    .TreeFile-table {

    }
</style>