<template>
    <div class="CloudDisk-R-Center row">
        <el-table :data="dataList" style="width: 100%;"
        ref="multipleTableRef" 
        @selection-change="handleSelectionChange"
        @row-click="selectData"
        row-key="DetailsId">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="基本信息" show-overflow-tooltip min-width="400">
              <template #default="scope">
                <div class="row items-center CloudDisk-R-Img">
                        <el-image
                        class="cursor-pointer row items-center flex-center"
                        style="width: 50px; height: auto"
                        :src="scope.row.FilePath"
                        :preview-src-list="[]"
                        fit=""
                        @click.stop="getImg(scope.row,scope.$index)"
                        >
                        <template #error>
                            <div class="row items-center flex-center" style="height: 100%;">
                                <el-image :src="errImg"></el-image>
                            </div>
                        </template>
                    </el-image>
                    <div class="cloudDownName microsoft q-pl-md">
                        <div class="cloudDownNameH col row items-center cursor-pointer" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId"> 
                            <span class="grow">{{scope.row.FileName}}</span>
                            <IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click.stop="setNameHandler(scope.row)"></IconPencli>
                        </div>
                        <div class="col row items-center" v-else>
                            <el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" />
                            <el-button link size="small" class="q-ml-sm" type="primary" @click.stop="setCloudNameHandler(scope.row)"
                            :loading="editLoading">确认</el-button>
                            <el-button link size="small" style="margin-left: 5px;" @click.stop="setNameHandler">取消</el-button>
                        </div>
                    </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column property="ExtName" label="格式" width="" />
            <el-table-column label="尺寸" min-width="150">
                <template #default="scope">
                    <template v-if="scope.row.WithHeight">{{ scope.row.WithHeight }} px</template>
                </template>
            </el-table-column>
            <el-table-column label="大小" min-width="100">
                <template #default="scope">{{ scope.row.FileSize }} kb</template>
            </el-table-column>
            <el-table-column label="添加时间" min-width="180">
                <template #default="scope">{{ scope.row.CreateDate }}</template>
            </el-table-column>
            <el-table-column align="center" min-width="80">
                <template #header>
                    <el-dropdown trigger="click" >
                        <el-icon class="cursor-pointer" size="16" color="#b1b7cf"><IconSetting /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu class="q-pa-md microsoft">
                                <el-dropdown-item icon="CopyDocument" @click="BatchCopyTo()">复制到</el-dropdown-item>
                                <el-dropdown-item icon="Expand" @click="BatchMoveFile()">移动到</el-dropdown-item>
                                <el-dropdown-item icon="Delete" @click="BatchRemove()">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    
                </template>
                <template #default="scope">
                    <el-dropdown trigger="click">
                        <el-icon class="cursor-pointer" size="16" color="#b1b7cf" @click.stop=""><MoreFilled /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu class="q-pa-md microsoft">
                                <el-dropdown-item icon="CopyDocument" @click.stop="CopyTo(scope.row)">复制到</el-dropdown-item>
                                <el-dropdown-item icon="Expand" @click.stop="MoveFile(scope.row)">移动到</el-dropdown-item>
                                <el-dropdown-item icon="Delete" @click.stop="deleteImg(scope.row)">删除</el-dropdown-item>
                                <el-dropdown-item icon="View" @click.stop="getImg(scope.row,scope.$index)">查看</el-dropdown-item>
                              </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive, watch } from "vue";
    import { ElTable } from 'element-plus'
    import CloudDiskService from "@/services/CloudDiskService";
    import { ApiResult } from "@/configs/axios";
    const props = defineProps({
        dataList:{
            type: Array,
            default: [],
        },
        Parent:{
            type: Object,
            default: {}, 
        },
        params:{
            type: Object,
            default: {}, 
        }
    })
    const emit = defineEmits<{
        (event: 'close'): void,
        (event: 'refreshHandler'): void,
        (event: 'CopyTo'): void,
        (event: 'MoveFile'): void,
        (event: 'getImg'): void,
        (event: 'deleteImg'): void,
        (event: 'MultipleChoice'): void,
        (event: 'BatchRemove'): void,
        (event: 'BatchCopyTo'): void,
        (event: 'BatchMoveFile'): void,
    }>()
    const editorTarget = ref('')
    const nickNam = ref(''||  Number)
    const editLoading = ref(false)
    const errImg = ref(require('@/assets/img/noImg.png') as any)
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref([] as any)

    const handleChildMouseDown = (event) => {
        event.stopPropagation()
    }


    const BatchRemove = () =>{
        emit('BatchRemove')
    }

    const BatchCopyTo = () =>{
        emit('BatchCopyTo')
    }

    const BatchMoveFile = () =>{
        emit('BatchMoveFile')
    }

    const selectData = (row: any, column: any, event: Event) =>{
        if(multipleTableRef.value) multipleTableRef.value!.toggleRowSelection(row)
    }
    const handleSelectionChange = (val: []) =>{
        multipleSelection.value = val.map(x=>{return x})
        emit('MultipleChoice',multipleSelection.value)
    }
    const setCloudNameHandler = async (target:any)=>{
        if(editLoading.value || nickNam.value=='' || !nickNam.value) return
        editLoading.value = true
        let params = {
            Id: target.DetailsId,
            FileName: nickNam.value
        }
        let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
        if (dataRes.data.resultCode==ApiResult.SUCCESS) {
            editorTarget.value = ''
            nickNam.value = ''
            emit('refreshHandler')
        }
        editLoading.value = false
    }
    const setNameHandler = (target:any) =>{
        if(target){
            editorTarget.value = target.DetailsId
            nickNam.value = target.FileName
        }else{
            editorTarget.value = ''
            nickNam.value = ''
        }
    }
    const CopyTo = (row:any) =>{
        emit('CopyTo',row)
    }
    const MoveFile = (row:any) =>{
        emit('MoveFile',row)
    }
    const getImg = (item:any,index:Number) => {
        emit('getImg',item,index)
    }
    // 删除
    const deleteImg = (item:any) => {
        emit('deleteImg',item)
    }

    const toggleSelection = (rows:any,state:undefined) => {
        if(multipleTableRef.value){
            if (rows) {
                rows.forEach((row) => {
                    multipleTableRef.value!.toggleRowSelection(row, state)
                })
            } else {
                if(state) multipleTableRef.value.toggleAllSelection(state)
                else multipleTableRef.value!.clearSelection()
            }
        }
    }

    watch(()=>props,(n,o)=>{
        if(props.Parent.SelectedDatas.length>0) {
            setTimeout(()=>{
                props.Parent.SelectedDatas.forEach(x => {
                    let filterS = props.dataList.filter((y,index)=>{
                        y.index=index
                        return x.DetailsId==y.DetailsId
                    })
                    let index = filterS&&filterS[0]&&filterS[0].index
                    if(index>=0) {
                        toggleSelection([props.dataList[index]],true)
                    }
                });
            },3000)
        }
        if(props.dataList.length>0&&props.Parent.selectAll&&!props.Parent.indeterminate){
            setTimeout(()=>{
                for(let i=0;i<props.dataList.length;i++){
                    let x = props.dataList[i]
                    toggleSelection([x], true)
                }
            },3000)
        }
        
    },{
        deep: true,
        immediate:true
    })

    
    
</script>
<style lang="scss" scoped>
.editor-pencli{
    display: none;
}
.cloudDownNameH:hover .editor-pencli{
    display: block;
}
.CloudDisk-R-Center::v-deep(.el-table__body){
    margin-top: 19px;
}
.CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
    background-color: #f5f7fa;
}
.CloudDisk-R-Center::v-deep(.el-table__header-wrapper){
    position:fixed;
    top: 180px;
    z-index: 2
}
.CloudDisk-R-Center{
    padding-left: 24px;
    padding-bottom: 20px;
}
.CloudDisk-R-Img .el-image{
    background: #f1f2f4;
}
</style>