<template>
    <div class="column full-height" ref="currentRootDom">
      <!-- <div class="q-pl-lg row q-mb-lg">
        <div class="col row items-center q-pl-md">
          <h5 class="row items-center">
            <span class="q-pl-md">
              <span class="pointer">云盘</span>
            </span>
          </h5>
          <div class="select-btn q-pl-lg pointer q-mt-sm">
            <el-icon>
              <RefreshRight
                v-if="!RefreshLoading"
                @click="querySearchGroup(),refreshHandler()"
              />
              <Refresh v-else />
            </el-icon>
          </div>
        </div>
      </div> -->
      <div class="col full-width full-height q-ml-md">
        <div class="CloudDisk-form row full-height">
          <div class="CloudDisk-L">
              <div class="row CloudDisk-L-inquire">
                  <el-input style="width: 123px;" v-model="GName" 
                  placeholder="搜索分组名称" clearable @keyup.enter="querySearchGroup"
                  @input="SearchGroup">
                  </el-input>
                  <el-button  @click="addEditGroup">添加</el-button>
              </div>
              <div class="CloudDisk-L-Center fz14" v-loading="loadingGroup">
                  <div class="CloudDisk-L-Title row flex-between cusor-pointer"
                  v-for="(item,index) in GroupList"
                  :class="[queryObj.CloudGroupId==item.Id?'active':'']">
                      <span class="block" @click="refreshHandler(item)">{{item.GName}}</span>
                      <div class="row" :key="index">
                          <template v-if="item.Id">
                              <el-dropdown class="q-pl-lg CloudDisk-L-TitleR" trigger="click">
                                  <div class="CloudDisk-L-Title-M row items-center flex-center">
                                      <el-icon size="16"><MoreFilled /></el-icon>
                                  </div>
                                  <template #dropdown>
                                      <el-dropdown-menu class="q-pa-md">
                                          <el-dropdown-item @click.stop="EditGroup(item)">
                                              <el-button type="default" link icon="Edit" size="small">重命名</el-button>
                                          </el-dropdown-item>
                                          <el-dropdown-item v-if="!item.IsCanDelete" @click.stop="deleteGroup(item)">
                                              <el-button type="default" link icon="Delete" size="small">删除分组</el-button>
                                          </el-dropdown-item>
                                      </el-dropdown-menu>
                                  </template>
                              </el-dropdown>
                          </template>
                          <div class="CloudDisk-L-TitleR" @click="refreshHandler(item)" v-else></div>
                         <span class="CloudDisk-L-TitleR" @click="refreshHandler(item)" v-if="item.RecordNum>0">{{item.RecordNum?item.RecordNum:''}}
                         </span> 
                      </div>
                      
                  </div>
              </div>
          </div>
          <div class="CloudDisk-R grow">
              <div class="row flex-center CloudDisk-R-inquire">
                  <!-- <el-input v-model="queryObj.FileName" placeholder="请输入图片名称搜索" clearable @keyup.enter="refreshHandler"
                  @input="SearchImg">
                      <template #append>
                          <el-button type="primary" style="color: white;" @click="refreshHandler">搜索</el-button>
                      </template>
                  </el-input> -->
                  <el-input style="max-width:600px" v-model="queryObj.FileName" placeholder="请输入图片名称搜索" class="q-pr-33" clearable
                  @keyup.enter="refreshHandler" @input="SearchImg">
                    <template #append>
                      <div class="Market-select-line absolute"></div>
                      <div class="row items-center pointer">
                          <img src="../../assets/img/home-search.png" width="21" height="21"
                          @click="refreshHandler"/>
                      </div>
                    </template>
                  </el-input>
              </div>
              <div ref="imgDiskRef" class="full-height" style="padding-top: 10px; overflow: auto;"
              :style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'20px':'85px'}">
                  <div class="CloudDisk-R-Center row">
                      <FileInput @change="files => insertImageElement(files)">
                         <div class="CloudDisk-R-Box">
                          <div class="CloudDisk-R-Plus column items-center cusor-pointer">
                              <el-icon class="el-input__icon" size="30px" title="">
                                  <Plus/>
                              </el-icon>
                              <span>添加图片</span>
                          </div>
                          </div> 
                      </FileInput>
                      
                      <template v-for="(item,index) in dataList">
                        <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 user-nickname" 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>
                          
                      </template>
                  </div>
                  <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg">
                    <!-- <img :src="noDataImg(2)" width="118" /> -->
                  </div>
                  <template v-else>
                    <div style="height:40px;" class="no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
                  </template>
              </div>
              <!-- <div v-if="queryObj.pageCount>1" class="q-mt-md" style="display: flex;justify-content: center;">
                  <el-pagination
                  v-model:current-page="queryObj.pageIndex"
                  :page-size="queryObj.pageSize"
                  small-padding
                  layout="prev, pager, next"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  />
              </div> -->
             
          </div>
      </div>
      </div> 
    </div>
      <NewEditCloudDisk
      v-if="dialogFormVisible" 
      :dialogType="dialogType" 
      :addEditMsg="addEditMsg"
      @close="close"
      @success="close(),dialogFormVisible=false,querySearchGroup()"></NewEditCloudDisk>
      <copyMove
      v-if="dialogCMVisible" 
      :dialogType="dialogType" 
      :DetailsId="addEditMsg.Id"
      :GroupId="GroupId"
      :GroupList="GroupAll"
      @close="close"
      @success="close(),dialogCMVisible=false,SearchGroup(),refreshHandler()"></copyMove>

    <el-image-viewer 
      @close="() => { isViewerShow = false }" 
      v-if="isViewerShow" 
      :initial-index="currentImg"
      :url-list="srcList"></el-image-viewer>
      
  </template>
  <script setup lang="ts">
  import { ref, reactive, watch, inject, onMounted, PropType, nextTick } from "vue";
  import { ElMessage,ElImage } from "element-plus";
  import { ArrowLeft,CopyDocument } from "@element-plus/icons-vue";
  import CloudDiskService from "@/services/CloudDiskService";
  import { injectKeyTemplate } from "@/types/injectKey";
  import { useSellTemplateStore, useScreenStore, useUserStore } from "@/store";
  import { storeToRefs } from 'pinia'
  import { ApiResult } from "@/configs/axios";
  import NewEditCloudDisk from '@/components/CloudDisk/NewEdit'
  import copyMove from '@/components/CloudDisk/copyMove'
  import { noDataImg } from "@/utils/common";
  import { useRouter } from "vue-router";
  import AliyunUpload from '@/utils/upload/aliyun'

  const { token, userInfo } = storeToRefs(useUserStore())
  const router = useRouter()
  const currentRoute = router.currentRoute.value
  const parmas = ref({} as any)
  parmas.value = currentRoute.params
  const props = defineProps({
    isPersonage: '' as any,
  })
  const RefreshLoading = ref(false)
  const queryObj = reactive({
    pageIndex: 1,
    pageSize: 71,
    CloudGroupId: '',
    FileName: '',
    total: 0
  })
  if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
  const loading = ref(false as any)
  const dataList = ref([] as Array<any>);
  const currentRootDom = ref()
  const GName= ref('')
  const addEditMsg = reactive({
      Id: '',
      GName: '',
      SortNum: null,
  })
  const dialogFormVisible = ref(false)
  const dialogType = ref(0)
  const loadingGroup = ref(false)
  const GroupList = ref([] as any)
  const GroupAll = ref([] as any)
  const imgDiskRef = ref<any>()
  const editorTarget = ref('')
  const nickNam = ref(''||  Number)
  const GroupId = ref(''|Number)
  const dialogCMVisible = ref(false)
  const editLoading = ref(false)
  
  const currentImg = ref(-1)
  const srcList = ref([] as Array<any>)
  const isViewerShow = ref(false);

  const getImg = (item:any,index:Number) => {
    currentImg.value = index
    isViewerShow.value = true
  }

  const CopyTo = (row:any) =>{
    addEditMsg.Id = row.DetailsId
    GroupId.value = row.CloudGroupId
    dialogType.value = 1
    dialogCMVisible.value = true
  }
  const MoveFile = (row:any) =>{
    addEditMsg.Id = row.DetailsId
    GroupId.value = row.CloudGroupId
    dialogType.value = 2
    dialogCMVisible.value = true
  }
  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) {
      refreshHandler()
    }
    editLoading.value = false
  }
  const setNameHandler = (target:any) =>{
    if(target){
      editorTarget.value = target.DetailsId
      nickNam.value = target.FileName
    }else{
      editorTarget.value = ''
      nickNam.value = ''
    }
  }
  // 删除
const deleteImg = (item:any) => {
    let text
    if(item.IsCanDelete) text = '删除此图会影响模板正常使用，将无法恢复，是否确定?'
    else text = '此操作将删除该图，是否确定?'
  ElMessageBox.confirm(
      `${text}`,
      '提示',
      {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      }
  ).then(async () => {
      try {
        loading.value = true
          let dataRes = await CloudDiskService.RemovePPTCloudInfo(item.DetailsId)
          if (dataRes.data.resultCode==ApiResult.SUCCESS) {
                querySearchHandler()
          }
        loading.value = false
      } catch (error) {}
  }).catch(() => {})
  
}


const addEditGroup = () =>{
    dialogFormVisible.value = true
    dialogType.value = 1
}

const close = () =>{
    addEditMsg.Id = ''
    addEditMsg.GName = ''
    addEditMsg.SortNum = null
    dialogFormVisible.value = false
    dialogCMVisible.value = false
    GroupId.value = ''
    dialogType.value = 0
}

const EditGroup = (item:any) =>{
    let data = JSON.parse(JSON.stringify(item))
    addEditMsg.Id = data.Id
    addEditMsg.GName = data.GName
    addEditMsg.SortNum = data.SortNum
    dialogFormVisible.value = true
    dialogType.value = 2
}

const insertImageElement = async (files: FileList) => {
    let name = files[0].name.split('.')
    const loadingObj = ElLoading.service({
        text:'正在上传图',
        lock:true
    })
    const hash = await calculateFileHash(files[0])
    if(hash!='') {
        await checkedUploadFileExsit(files[0],hash)
    }else{
        await uoloadFileToService(files[0]) 
    }
    loadingObj.close()
}
const checkedUploadFileExsit = async (file:File,hash:any)=>{
    let parms = {
        fname: file.name,
        gid: queryObj.CloudGroupId,
        hi: hash
    }
    const dataRes = await CloudDiskService.CheckCloudInfo(parms)
    if (dataRes.data.resultCode==ApiResult.SUCCESS) {
        queryObj.CloudGroupId = ''
        queryObj.FileName = dataRes.data.data.SourceFileName
        refreshHandler()
    } else {
        if(dataRes.data.message=='不存在此文件!') await uoloadFileToService(file)  
    }
}
const uoloadFileToService = async (file:File)=>{
    let parms = {
        isppt: '1',
        uid: token.value,
        gid: queryObj.CloudGroupId
    }
    let filePath="tripImg/";
    let url  = await AliyunUpload.UploadCloudDisk(file, filePath, parms);
    if(url) {
        querySearchGroup()
        refreshHandler()
    }
}

const calculateFileHash = (file:File, algorithm = 'SHA-256') => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
        if(event && event.target && event.target.result){
            const buffer:any = event.target.result;
            if(crypto && crypto.subtle && crypto.subtle.digest){
                crypto.subtle.digest(algorithm, buffer)
                .then(hashBuffer => {
                    const hashArray = Array.from(new Uint8Array(hashBuffer));
                    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
                    resolve(hashHex);
                })
                .catch(error => resolve(''));
            }else{
                resolve('')
            }
        }else{
            resolve('')
        }
        
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file); // Read only the first 1MB of the file
  });
}


// 删除
const deleteGroup = async (item:any) => {
  ElMessageBox.confirm(
      `此操作将删除该分组，是否确定?`,
      '提示',
      {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      }
  ).then( async () => {
    loadingGroup.value = true
    try {
        let dataRes = await CloudDiskService.RemovePPTCloudGroup(item.Id)
        loadingGroup.value = false
        if (dataRes.data.resultCode == 1) {
            querySearchGroup()
        }
    } catch (error) {}
  }).catch(() => {})
  
}

const SearchGroup = () => {
    if(GName.value=='') querySearchGroup()
}
const querySearchGroup = async () =>{
    if(loadingGroup.value) return
    loadingGroup.value = true
    try {
        let datasRes
        if(props.isPersonage) datasRes = await CloudDiskService.GetPPTCloudList(GName.value);
        else datasRes = await CloudDiskService.GetPPTCloudLists(GName.value);
        if (datasRes.data.resultCode==ApiResult.SUCCESS) {
            GroupList.value = datasRes.data.data.list
            GroupList.value.unshift({
                Id: '',
                GName: '全部',
                RecordNum: datasRes.data.data.TotalNum
            })
            if(!GName.value) GroupAll.value = GroupList.value
        }
        loadingGroup.value = false
    } catch (error) {
        loadingGroup.value = false
    }
    
}

const SearchImg = () =>{
    if(queryObj.FileName=='') refreshHandler()
}
  const refreshHandler = (row:any) => {
    // currentRootDom.value.click()
    if(row) queryObj.CloudGroupId = row.Id
    RefreshLoading.value = true;
    queryObj.pageIndex = 1;
    srcList.value = []
    querySearchHandler();
  };

  const querySearchHandler = async () => {
    loading.value = true;
    try {
      if (queryObj.pageIndex == 1) dataList.value = [];
      let pageRes
      if(props.isPersonage) pageRes = await CloudDiskService.GetPPTCloudInfoPage(queryObj);
      else pageRes = await CloudDiskService.GetPPTCloudInfoPages(queryObj);
      if (pageRes.data.resultCode==ApiResult.SUCCESS) {
        let arrList = function (list) {
          list.forEach((x) => {
            x.show = false;
          });
        };
        arrList(pageRes.data.data.pageData);
        let imgs = pageRes.data.data.pageData.map(x=> x.FilePath)
        dataList.value = dataList.value.concat(pageRes.data.data.pageData);
        srcList.value = srcList.value.concat(imgs);
        queryObj.pageCount = pageRes.data.data.pageCount;
      }
      loading.value = false;
      RefreshLoading.value = false;
    } catch (error) {
      ElMessage.error({
        message:'数据加载异常，请刷新页面'
      })
      loading.value = false;
      RefreshLoading.value = false;
    }
  };
  const scrollingHandler = () =>{
    if(imgDiskRef.value && !loading.value){
        let maxHeight = imgDiskRef.value.scrollHeight - imgDiskRef.value.offsetHeight
        let scrollTop = imgDiskRef.value.scrollTop
        if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
            queryObj.pageIndex++
            querySearchHandler()
        }
    }
    
}
querySearchGroup()
querySearchHandler()
onMounted(()=>{
  imgDiskRef.value.addEventListener("scroll", scrollingHandler);
})
  </script>
  <style lang="scss" scoped>
    .CloudDisk-R-inquire::v-deep(.el-button){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* height: 36px; */
}
.CloudDisk-L{
    border-right: 1px solid #E9E9E9;
    padding: 0 20px 22px 0;
}
.CloudDisk-L-inquire{
    margin-bottom: 20px;
}
.CloudDisk-L-inquire .el-input{
    width: 112px;
    /* height: 36px; */
}
.CloudDisk-L-inquire .el-button{
    /* height: 36px; */
    margin-left: 20px;
}
.CloudDisk-L-Title:first-child{
}
.CloudDisk-L-Title{
    padding: 0 10px;
    font-weight: 400;
    font-family: PingFang SC;
    border-radius: 8px;
    margin-bottom: 3px;
}
.CloudDisk-L-Title span:first-child{
    width: 108px;
    padding: 11px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.CloudDisk-L-Title span:last-child{
    color: #BBC7C3;
}
.CloudDisk-L-TitleR{
  padding: 11px 0;
}
.CloudDisk-L-Title-M{
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 6px;
    border: 0 !important;
}
.CloudDisk-L-Title-M:hover{
  background: #BED0FB;
  color: #fff;
}
.CloudDisk-L-Title.active{
    color: #3556F9 ;
    background: #EEF3FF;
}
.CloudDisk-L-Title.active .CloudDisk-L-Title-M{
    /* background: #BED0FB; */
}
.CloudDisk-L-Title:hover{
    background: #EEF3FF ;
}
.CloudDisk-L-Title:hover span:first-child{
    color: #3556F9 ;
}
.CloudDisk-R-inquire{
    padding-left: 24px;
    padding-right: 20px;
}
.CloudDisk-R-inquire .el-input{
    width: 30vw;
    padding-bottom: 10px;
    /* height: 36px; */
}
.CloudDisk-R-Center{
    flex-wrap: wrap;
}
.CloudDisk-R-Plus{
    width: 85px;
    height: 85px;
    border-radius: 8px;
    border: 2px dashed #CECECE;
    color:#cecece;
}
.CloudDisk-R-Plus:hover{
    border-color: #000000;
    color:#000000;
}
.CloudDisk-R-Plus .el-icon{
    margin-top: 13px;
}
.CloudDisk-R-Plus span{
    // font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    // color: #CECECE;
}
.CloudDisk-R-Box{
    width: 87px;
    margin-left: 24px;
    margin-bottom: 24px;
    position: relative;
}
.CloudDisk-R-Img{
    width: 85px;
    height: 85px;
    margin-bottom: 9px;
    border-radius: 8px;
    overflow: hidden;
    /* border:2px solid transparent; */
    /* background: #8790F3; */
    box-shadow: 0px 0px 13px 0px #eee;
    border-radius: 8px;
    border-color:#eee;
}

.CloudDisk-R-Img .el-image{
    width: 85px;
    
}
.title{
    width: 85px;
    line-height: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
.CloudDisk-L-Center{
    height: 95%;
    overflow-y: scroll;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
    width: 85px;
    height: 85px;
    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;
}
.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;
}
.user-nickname .editor-pencli{
    /* visibility: hidden; */
}
.user-nickname:hover .editor-pencli{
    /* visibility:visible; */
}

  </style>
  