<template>
    <div class="CloudDisk-R-Center row">
        <template v-for="(item,index) in dataList">
            <div style="position: relative;">
                <el-checkbox style="position: absolute;left: 2vw;top: .2vw;" 
                class="fz14" label="" v-model="item.check" @click.stop="item.check=!item.check"/>
                <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">
                            <template #error>
                                <div class="row items-center" style="height: 100%;">
                                    <el-image :src="errImg"></el-image>
                                </div>
                            </template>
                        </el-image>
                    </div>
                    <span class="title block">
                        <el-tooltip effect="dark" :content="item.FileName" placement="bottom">
                            {{item.FileName}}
                        </el-tooltip>
                    </span>
                </div>
                <el-popover placement="bottom" :width="230" trigger="click" @mousedown.stop="handleChildMouseDown">
                    <template #reference>
                        <div class="MoreClick row items-center cusor-pointer" @mousedown.stop="handleChildMouseDown"><el-icon size="13"><MoreFilled /></el-icon></div>
                    </template>
                    <div class="MoreClickCenter column" @mousedown.stop="handleChildMouseDown">
                        <div class="cloudDownName microsoft">
                        <div class="col row items-center user-nickname q-pl-sm" style="color:#000;" v-if="editorTarget!=item.DetailsId"> 
                            <span class="grow text-left">{{item.FileName}}</span>
                            <IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click.stop="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.stop="setCloudNameHandler(item)"
                            :loading="editLoading">确认</el-button>
                            <el-button link size="small" style="margin-left: 5px;" @click.stop="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>
                        <div class="common q-pt-xs microsoft">
                            <div class="row items-center cloudDownControls" @click.stop="CopyTo(item,index)">
                                <el-icon size="15px" theme="filled">
                                    <CopyDocument></CopyDocument>
                                </el-icon>
                                <span class="q-pl-md">复制到</span>
                            </div>
                            <div class="row items-center cloudDownControls" @click.stop="MoveFile(item,index)">
                                <el-icon size="15px" theme="filled">
                                    <Expand></Expand>
                                </el-icon>
                                <span class="q-pl-md">移动到</span>
                            </div>
                            <div class="row items-center cloudDownControls" @click.stop="deleteImg(item,index)">
                                <el-icon size="15px" theme="filled">
                                    <Delete></Delete>
                                </el-icon>
                                <span class="q-pl-md">删除</span>
                            </div>
                            <div class="row items-center cloudDownControls" @click.stop="getImg(item,index)">
                                <el-icon size="15px" theme="filled">
                                    <View></View>
                                </el-icon>
                                <span class="q-pl-md">查看</span>
                            </div>
                        </div>
                    </div>
                </el-popover>
            </div>
           
        </template>
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive, watch, computed, onMounted, onBeforeUnmount } 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 errImg = ref(require('@/assets/img/noImg.png') as any)
    
    const handleChildMouseDown = (event) => {
        event.stopPropagation()
    }

    //单击多选框选中
    const checkItem = (val,item)=>{
        item.check = !item.check
        let str = item.DetailsId;
        let i = props.Parent.SelectedDatas.indexOf(str)  // 判断选中列表中是否包含这个点击的div
        console.log(val,item,i);
        if (i < 0) {
            // multipleSelection.value.push(item);  // 如果不包含就加进去
        } else {
            // multipleSelection.value.splice(i, 1);  // 如果包含就删
        }
    }
    
    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,index:Number) =>{
        emit('CopyTo',row)
    }
    const MoveFile = (row:any,index:Number) =>{
        emit('MoveFile',row)
    }
    const getImg = (item:any,index:Number) => {
        emit('getImg',item,index)
    }
    // 删除
    const deleteImg = (item:any,index:Number) => {
        emit('deleteImg',item)

    }
    watch(()=>props,(n,o)=>{
        if(n.Parent.SelectedDatas.length==0) multipleSelection.value = []
        else multipleSelection.value = n.Parent.SelectedDatas
    },{
        deep: true,
        immediate:true
    })
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
    flex-wrap: wrap;
}
.CloudDisk-R-Box{
    width: 12.85vw;
    margin-left: 1.25vw;
    margin-bottom: 24px;
    position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
    width: 12.85vw;
    height: 12.85vw;
    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: 12.85vw;
    height: 12.85vw;
    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: 12.85vw;
}
.title{
    width: 12.85vw;
    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: 0 0 10px 0;
  font-size: 14px;
  color: #000;
}
.cloudDownText{
    padding: 0 5px 10px 5px;
  font-size: 14px;
}
.cloudDownTextLin{
  border-bottom: 1px solid #F0F0F0;
}
.user-nickname span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}
.MoreClickCenter{
    
}
.MoreClickCenter::after{
    
}
.MoreClick{
    position: absolute;
    right: .8vw;
    top: .7vw;
    background: #fff;
    border-radius: 10px;
    padding: 0 3px;
}
.MoreClick .el-icon{
    color: #b1b7cf ;
}
.MoreClick:hover {
    background: #8790F3;
}
.MoreClick:hover .el-icon{
    color: #fff;
}
.cloudDownTextLin{
  border-bottom: 1px solid #F0F0F0;
}
.cloudDownControls{
    padding: 10px 5px;
    cursor: pointer;
}
.cloudDownControls:hover{
    background: #dedcff;
    color: $el-color-primary;
}
</style>