<template>
    <div class="CloudDisk-form row">
        <div class="CloudDisk-L">
            <div class="row CloudDisk-L-inquire">
                <el-input v-model="GName" 
                placeholder="搜索分组名称" @keyup.enter="querySearchGroup">
                </el-input>
                <el-button type="primary" @click="addEditGroup">添加</el-button>
            </div>
            <div class="CloudDisk-L-Center fz14">
                <div class="CloudDisk-L-Title row flex-between cusor-pointer"
                v-for="(item,index) in GroupList" :key="index" @click="Search(item)"
                :class="[GroupId==item.Id?'active':'']">
                    <span class="black">{{item.GName}}</span>
                    <div class="row">
                        <template v-if="item.Id">
                            <el-dropdown class="q-pl-lg" trigger="click">
                                <div class="CloudDisk-L-Title-M row items-center flex-center">
                                    <el-icon size="16" :color="GroupId==item.Id?'#3556F9':'#b1b7cf'"><MoreFilled /></el-icon>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu class="q-pa-md">
                                        <el-dropdown-item @click="EditGroup(item)">
                                            <el-button type="default" link :icon="Edit" size="small">重命名</el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click="deleteGroup(item)">
                                            <el-button type="default" link :icon="Delete" size="small">删除分组</el-button>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                       <span v-if="item.RecordNum>0">{{item.RecordNum}}</span> 
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="CloudDisk-R grow">
            <div class="row CloudDisk-R-inquire">
                <el-input v-model="queryObj.FileName" 
                placeholder="请输入图片名称搜索" @keyup.enter="Search">
                </el-input>
            </div>
            <div ref="imgRef">
                <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" color="#CECECE" size="30px" title="">
                                <Plus/>
                            </el-icon>
                            <span>添加图片</span>
                        </div>
                        </div> 
                    </FileInput>
                    
                    <template v-for="(item,index) in dataList">
                        <div class="CloudDisk-R-Box">
                            <div class="CloudDisk-R-Img">
                                <el-image
                                    style="width: 80px; height: 80px"
                                    :src="item.FilePath"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="[item.FilePath]"
                                    :initial-index="4"
                                    fit="cover"
                                    />
                            </div>
                            <span>{{item.FileName}}</span>
                        </div>
                    </template>
                </div>
            </div>
           
        </div>
    </div>
    <el-dialog v-model="dialogFormVisible" 
    :title="dialogTitle" width="340" @close="close">
        <div>
            <el-input v-model="addEditMsg.GName" 
            placeholder="请输入分组名称">
            </el-input>
            <el-input class="q-pt-lg" type="Number" v-model="addEditMsg.SortNum" 
            placeholder="排序">
            </el-input>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="setGroup" :loading="setLoading">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
</template>
<script lang="ts" setup>
import { Plus, Top, Bottom, Delete, Edit  } from "@element-plus/icons-vue";
import { reactive, ref, onMounted} from "vue";
import CloudDiskService from '@/services/CloudDiskService'
import { ElMessage } from "element-plus";
import FileInput from '@/components/FileInput.vue'
import { getImageDataURL } from '@/utils/image'
import AliyunUpload from '@/utils/upload/aliyun'
import { useUserStore } from "@/store";
import { storeToRefs } from 'pinia'

const { token, userInfo } = storeToRefs(useUserStore())

const dialogFormVisible = ref(false)
const dialogTitle = ref('')
const queryObj = reactive({
    pageIndex: 1,
    pageSize: 10,
    CloudGroupId: '',
    FileName: '',
})
const GName= ref('')
const addEditMsg = reactive({
    Id: '',
    GName: '',
    SortNum: null,
})
const GroupId = ref(''|Number)
const imgRef = ref<any>()
const dataList = ref([] as any)
const loading = ref(false)
const GroupList = ref([] as any)

const setLoading = ref(false)
const deleteLoading = ref<any>(null)

const insertImageElement = async (files: FileList) => {
  let parms = {
    isppt: '1',
    uid: token.value,
    gid: GroupId.value
  }
  let filePath="/Upload/User/";
  let name = new Date().getTime()
  let url  = await AliyunUpload.UploadCloudDisk(files[0], `${name}`, parms);
  if(url) Search()
}

const addEditGroup = () =>{
    dialogFormVisible.value = true
    dialogTitle.value = '添加分组名称'
}

const setGroup = async () =>{
    if(!addEditMsg.GName) return ElMessage.warning({
          showClose: true,
          message: `请输入分组名称`,
      })
    setLoading.value = true
    let pageRes = await CloudDiskService.SetPPTCloudGroup(addEditMsg);
    if (pageRes.data.resultCode == 1) {
        dialogFormVisible.value = false
        querySearchGroup()
    }
    setLoading.value = false
}

const close = () =>{
    addEditMsg.Id = ''
    addEditMsg.GName = ''
    addEditMsg.SortNum = null
}

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
    dialogTitle.value ='编辑分组名称'
}

// 删除
const deleteGroup = (item:any) => {
  ElMessageBox.confirm(
      `此操作将删除该分组，是否确定?`,
      '提示',
      {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      }
  ).then(async () => {
      try {
          let queryMsg = {
              TempId: item.TempId
          }
          deleteLoading.value = ElLoading.service({
              lock:true,
              text:'正在处理'
          })
          let dataRes = await CloudDiskService.RemovePPTCloudGroup(item.Id)
          if (dataRes.data.resultCode == 1) {
              querySearchGroup()
          }
          deleteLoading.value.close()
          deleteLoading.value = null
      } catch (error) {}
  }).catch(() => {})
  
}


const querySearchGroup = async () =>{
    try {
        let datasRes = await CloudDiskService.GetPPTCloudList(GName.value);
        if (datasRes.data.resultCode == 1) {
            GroupList.value = datasRes.data.data
            let total = 0
            for(let i=0;i<GroupList.value.lenght;i++){
                total+=GroupList.value[i].RecordNum
            }
            GroupList.value.unshift({
                Id: '',
                GName: '全部',
                RecordNum: total
            })
        }
    } catch (error) {
        
    }
}

const Search = (item:any) =>{
    if(item) GroupId.value = item.Id
    queryObj.pageIndex = 1
    querySearchHandler()
}

const querySearchHandler = async () =>{
    loading.value = true
    try {
        if(queryObj.pageIndex == 1) dataList.value =[]
        let pageRes = await CloudDiskService.GetPPTCloudInfoPage(queryObj);
        if (pageRes.data.resultCode == 1) {
            let arrList = function(list){
                list.forEach(x=>{
                    x.checked = false
                })
            }
            arrList(pageRes.data.data.pageData)
            dataList.value = dataList.value.concat(pageRes.data.data.pageData);
            queryObj.pageCount = pageRes.data.data.pageCount;
        }
        setTimeout(()=>{
            loading.value = false
        },300)
    } catch (error) {
        loading.value = false
    }
}

const scrollingHandler = () =>{
    if(imgRef.value && !loading.value){
        let maxHeight = imgRef.value.scrollHeight - imgRef.value.offsetHeight
        let scrollTop = imgRef.value.scrollTop
        if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
            queryObj.pageIndex++
            querySearchHandler()
        }
    }
    
}

querySearchGroup()

onMounted(()=>{
    imgRef.value.addEventListener("scroll", scrollingHandler);
})
</script>
<style lang="scss" scoped>
.CloudDisk-L{
    border-right: 1px solid #E9E9E9;
    padding: 22px 22px 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: 11px 10px;
    font-weight: 400;
    font-family: PingFang SC;
    border-radius: 8px;
    margin-bottom: 3px;
}
.CloudDisk-L-Title span:first-child{
    width: 108px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.CloudDisk-L-Title span:last-child{
    color: #BBC7C3;
}
.CloudDisk-L-Title-M{
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 6px;
}
.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{
    padding: 22px 0 0 0;
}
.CloudDisk-R-inquire{
    padding-bottom: 20px;
    padding-left: 24px;
}
.CloudDisk-R-inquire .el-input{
    width: 100%;
    height: 36px;
}
.CloudDisk-R-Center{
    flex-wrap: wrap;
}
.CloudDisk-R-Plus{
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px dashed #000000;
}
.CloudDisk-R-Plus .el-icon{
    margin-top: 13px;
}
.CloudDisk-R-Plus span{
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}
.CloudDisk-R-Box{
    width: 80px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 26px;
    margin-bottom: 24px;
}
.CloudDisk-R-Img{
    width: 80px;
    height: 80px;
    margin-bottom: 9px;
}
.CloudDisk-R-Img .el-image{
    border-radius: 8px;
}
.CloudDisk-L-Center,.CloudDisk-R-Center{
    max-height: 400px;
}
</style>