<template>
    <div class="CloudDisk-R-Center">
        <Waterfall :list="dataList" 
            :breakpoints="{
            1577:{rowPerView:5},
            1300:{rowPerView:4},
            800:{rowPerView:3},
            500:{rowPerView:2}
            }" 
            :hasAroundGutter="false" :align="'left'"
            rowKey="DetailsId" :gutter="24"
            :loadProps="loadProps"
        >
            <template #item="{ item, url, index }">
                <div style="position: relative;">
                    <el-checkbox style="position: absolute;left: .5vw;top: .1vw;" 
                    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">
                            <LazyImg :url="item.FilePath"
                                    class="rounded" style="display: block;"/>
                        </div>
                        <span class="title block">
                            <el-tooltip effect="dark" :content="item.FileName" placement="bottom">
                                {{item.FileName}}
                            </el-tooltip>
                        </span>
                        <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" 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>
                </div>
            </template>
        </Waterfall>
            
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive, watch } from "vue";
    import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
    import 'vue-waterfall-plugin-next/dist/style.css'
    import CloudDiskService from "@/services/CloudDiskService";
    import { ApiResult } from "@/configs/axios";
    import logo from '@/assets/img/traveldesign.png'
    import error from '@/assets/img/noImg.png'
    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 loadProps = reactive({
        logo,
        error
    })
    const multipleSelection = ref([] as any)

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

    //单击多选框选中
    const checkItem = (val,item)=>{
        item.check = !item.check
    }

    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 = []
        }
    },{
        deep: true,
        immediate:true
    })
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
    max-width: 1577px;
    padding-left: 1.1vw;
}
.CloudDisk-R-Box{
    width: 12.85vw;
    position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
    width: 12.85vw;
    min-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: auto;
    background: #f1f2f4;
    margin-bottom: 9px;
    border-radius: 8px;
    box-shadow: 0px 0px 13px 0px #eee;
    border-color:#eee;
}

.CloudDisk-R-Img .el-image{
    width: 12.85vw;
    border-radius: 8px;
}
.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;
}
::v-deep(.lazy__img[lazy=error]){
    padding: 0;
    width: 12.85vw !important;
}
.MoreClickCenter{
    
}
.MoreClickCenter::after{
    
}
.MoreClick{
    position: absolute;
    right: .5vw;
    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;
}
.waterfall-list{
    overflow: initial;
}
</style>