<template>
    <div class="CloudDisk-R-Center row" v-if="dataList.length>0">
        <el-table :data="dataList" style="width: 100%;"
        ref="multipleTableRef">
            <el-table-column type="selection" width="55" 
            @selection-change="handleSelectionChange"/>
            <el-table-column label="基本信息" show-overflow-tooltip min-width="200">
              <template #default="scope">
                <div class="row items-center">
                        <el-image
                        class="cursor-pointer"
                        style="width: 50px; height: auto"
                        :src="scope.row.FilePath"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[]"
                        :initial-index="4"
                        fit="contain"
                        @click="getImg(scope.row,scope.$index)"
                        >
                        <template #error>
                            <el-image :src="errImg"></el-image>
                        </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="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="setCloudNameHandler(scope.row)"
                            :loading="editLoading">确认</el-button>
                            <el-button link size="small" style="margin-left: 5px;" @click="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 align="center" min-width="80">
                <template #header>
                    <el-icon>
                        <IconSetting></IconSetting>
                    </el-icon>
                </template>
                <template #default="scope">
                    <el-dropdown trigger="click" >
                        <el-icon class="cursor-pointer" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu class="q-pa-md microsoft">
                                <el-dropdown-item icon="CopyDocument" @click="CopyTo(scope.row)">复制到</el-dropdown-item>
                                <el-dropdown-item icon="Expand" @click="MoveFile(scope.row)">移动到</el-dropdown-item>
                                <el-dropdown-item icon="Delete" @click="deleteImg(scope.row)">删除</el-dropdown-item>
                                <el-dropdown-item icon="View" @click="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 } from "vue";
    import CloudDiskService from "@/services/CloudDiskService";
    import { ApiResult } from "@/configs/axios";
    const props = defineProps({
        dataList:{
            type: Array,
            default: [],
        },
        Parent:{
            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,
    }>()
    const editorTarget = ref('')
    const nickNam = ref(''||  Number)
    const editLoading = ref(false)
    const errImg = ref(require('@/assets/img/noImg.png') as any)
    const multipleSelection = ref([] as any)

    const handleSelectionChange = (val: []) =>{
        multipleSelection.value = val.map(x=>{return x.DetailsId})
    }
    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)

    }
</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: 8px;
}
.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;
}
</style>