<template>
  <div class="modal-content">
    <div class="modal-title">
      图片管理
      <div class="close-button" @click="closeModal">
        <Icon icon="material-symbols:cancel-outline-rounded" :size="30"/>
      </div>
    </div>
    <div class="content-div">
      <div class="photo-item" v-for="(item, index) in photoList" :key="index" @click="changeSelect(selectPhotoList.some(obj => obj.id === item.id)? 1: 2,item)">
        <Image
          :src="`${apiUrl}/${item.filePath}`"
        />
        <div class="select-div">
          <Icon v-if="selectPhotoList.some(obj => obj.id === item.id)" icon="material-symbols-light:check-circle" :size="25" style="color: #18a058;"/>
          <Icon v-else icon="material-symbols-light:check-circle-outline" :size="25" style="color: #cacdcd;"/>
        </div>
      </div>
    </div>
    <div class="button-div">
      <Button  type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
      <Upload
        :multiple="true"
        :accept="'.jpg,.png,.jpeg'"
        :showUploadList="false"
        :custom-request="customRequest"
      >
        <Button  type="primary" :icon="h(UploadOutlined)" style="margin-right: 10px;">上传图片</Button>
      </Upload>
      <Button  type="primary" @click="addPhotoToList">添加到图片列表</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from "vue"
import { imageList, imageUpload, imageDelete } from '@/api/demo/photo'
import { useGlobSetting } from '@/hooks/setting';
import { Image, Button, Upload, Modal } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { photoModalStore } from '@/store/modules/photoModal'
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
import { StorageEnum } from '@/enums/storageEnum'
import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Photos/index.d'
import { ChartFrameEnum, ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { setLocalStorage, getLocalStorage } from '@/utils'

const photoModalStateStore = photoModalStore()
const packagesStore = usePackagesStore()
const { apiUrl } = useGlobSetting();

onMounted(() => {
  getList()
})

const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
const photoList = ref([])
const selectPhotoList = ref([])

const getList = () => {
  imageList().then(res => {
    photoList.value = res
  })
}
const closeModal = () => {
  photoModalStateStore.changeOpenState(false)
}
const changeSelect = (type,item) => {
  switch(type){
    case 1: 
      selectPhotoList.value = selectPhotoList.value.filter(useItem => useItem.id !== item.id);
      break;
    case 2:
      selectPhotoList.value.push(item)
      break
  }
}
const customRequest = (file) => {
  const formData = new FormData()
  formData.append('files', file.file)
  imageUpload(formData).then(res => {
    console.log(res)
    getList()
  })
}
const deleteImage = () => {
  if(selectPhotoList.value.length <= 0){
    window.$message.warning('请选择要被删除的图片')
    return
  }
  Modal.confirm({
    title: '确定要删除选中的图片吗？',
    onOk: async () => {
      let resultId = selectPhotoList.value.map(item => item.id).join(',')
      imageDelete(resultId).then(res => {
        if(res){
          selectPhotoList.value = []
          window.$message.success('删除成功')
          getList()
        }
      })
    },
    onCancel() {
    },
  })
  
}
const addPhotoToList = () =>{
  if(selectPhotoList.value.length <= 0){
    window.$message.warning('请选择要添加到列表的图片')
    return
  }
  const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
  const addNewPhotosList: ConfigType[] = []
  selectPhotoList.value.forEach(item => {
    const newPhoto = {
      ...ImageConfig,
      category: ChatCategoryEnum.PRIVATE,
      categoryName: ChatCategoryEnumName.PRIVATE,
      package: PackagesCategoryEnum.PHOTOS,
      chartFrame: ChartFrameEnum.STATIC,
      title: item.fileName,
      image: `${apiUrl}/${item.filePath}`,
      dataset: `${apiUrl}/${item.filePath}`,
      redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
    }
    userPhotosList.unshift(newPhoto)
    addNewPhotosList.unshift(newPhoto)
  })
  setLocalStorage(StoreKey, userPhotosList)
  packagesStore.addPhotos(addNewPhotosList, 1)
  selectPhotoList.value = []
  closeModal()
}
</script>

<style lang="scss" scoped>
.modal-content{
  width: 1152px;
  height: 700px;
  .modal-title{
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 10px;
    display:flex;
    justify-content: space-between;
    .close-button{
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(0deg);
      transition: 0.5s;
      cursor: pointer;
    }
    .close-button:hover{
      transform: rotate(180deg);
    }
  }
  .content-div{
    // background-color: aqua;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    align-content: flex-start;
    scrollbar-width: none; 
    margin-bottom: 10px;
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .photo-item{
      position: relative;
      width: 150px;
      height: 150px;
      background-color: rgb(24,24,28);
      margin-bottom: 10px;
      margin-right: 10px;
      cursor: pointer;
      .select-div{
        position: absolute;
        bottom: 0px;
        height: 20px;
        width: 100%;
        height: 30px;
        background-color: #00000075;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .button-div{
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
