<template>
    <div class="CloudDisk-R-Center row">
        <template v-for="(item,index) in dataList">
            <div style="position: relative;">
                <el-checkbox style="position: absolute;left: 30px;top: 0px;" 
                class="fz14" label="" v-model="item.check" 
                @change="handleSelectionChange(item)"/>
                <el-dropdown trigger="click">
                    <div class="CloudDisk-R-Box cursor-pointer" :key="index">
                        <div class="CloudDisk-R-Img">
                            <el-image :src="item.FilePath" style="width: 100%; height: 100%;"
                            fit="cover"/>
                        </div>
                        <span class="title block">
                          {{item.FileName}}
                        </span>
                    </div>
                    <template #dropdown>
                      <div class="cloudDownName microsoft">
                        <div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId"> 
                          <span class="grow">{{item.FileName}}</span>
                          <IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></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(item)"
                            :loading="editLoading">确认</el-button>
                            <el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
                        </div>
                      </div>
                      <div class="cloudDownText row flex-between">
                        <span>类型</span>
                        <span>图片</span>
                      </div>
                      <div class="cloudDownText row flex-between">
                        <span>格式</span>
                        <span>{{item.ExtName}}</span>
                      </div>
                      <div class="cloudDownText row flex-between" v-if="item.WithHeight">
                        <span>尺寸</span>
                        <span>{{item.WithHeight}} px</span>
                      </div>
                      <div class="cloudDownText cloudDownTextLin row flex-between">
                        <span>大小</span>
                        <span>{{item.FileSize}} kb</span>
                      </div>
                      <el-dropdown-menu class="q-pa-md microsoft">
                        <el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item>
                        <el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item>
                        <el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item>
                        <el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
           
        </template>
    </div>
</template>
<script setup lang="ts">
    import { ref, watch } 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 multipleSelection = ref([] as any)

    const handleSelectionChange = (row: any) =>{
        let filter = props.Parent.SelectedDatas.filter(x=>x.DetailsId==row.DetailsId)
        if(filter.length==0&&row.check) {
            multipleSelection.value.push(row)
            emit('MultipleChoice',multipleSelection.value)
        }else if(!row.check){
            let newFilter = props.Parent.SelectedDatas.filter(x=>x.DetailsId!=row.DetailsId)
            multipleSelection.value = newFilter
            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) {
            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)

    }
    watch(()=>props,(n,o)=>{
        if(n.Parent.SelectedDatas.length==0) multipleSelection.value = []
    },{
        deep: true,
        immediate:true
    })
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
    flex-wrap: wrap;
}
.CloudDisk-R-Box{
    width: 247px;
    margin-left: 24px;
    margin-bottom: 24px;
    position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
    width: 247px;
    height: 247px;
    background: #8790F3;
    box-shadow: 0px 0px 13px 0px #0D3EBC;
    border-radius: 8px;
    border-color:#3556F9;
}
.CloudDisk-R-Box .close-btn{
    position: absolute;
    top: -10px;
    right: 0px;
    width: 20px;
    height: 20px;
    line-height: 12px;
    background: #fff;
    border:1px solid #AFAFAF;
    text-align: center;
    color:#AFAFAF;
    border-radius: 50%;
    z-index: 3;
    display: none;
}
.CloudDisk-R-Box.active2:hover .close-btn{
    display: block;
}
.CloudDisk-R-Img{
    width: 247px;
    height: 247px;
    margin-bottom: 9px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 13px 0px #eee;
    border-radius: 8px;
    border-color:#eee;
}

.CloudDisk-R-Img .el-image{
    width: 247px;
}
.title{
    width: 247px;
    line-height: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
.cloudDownName{
  min-width: 200px;
  padding: 10px 20px 15px 20px;
  font-size: 14px;
  color: #000;
}
.cloudDownText{
  padding: 0 20px 10px 20px;
  font-size: 14px;
}
.cloudDownTextLin{
  border-bottom: 1px solid #F0F0F0;
}
</style>