<template>
  <div class="div w-[100%]" ref="gw">
    <n-scrollbar :style="{ maxHeight: ch - 100 + `px` }" class="list px-3">


      <falls :fileList="list" :count="acount" :bot="bottomLen" pathname="filepath" v-slot="{ file }">
        <div class="img mb-1" @contextmenu="handdlemenu($event, file)" @longpress="handdlemenu($event, file)">
          <n-image height="200px" :src="file.filepath" object-fit="fill" :img-props="{ loading: 'lazy' }" />
        </div>
      </falls>


      <div class="munur" v-if="menuShow" :style="{ position: 'fixed', top: y + 'px', left: x + 'px' }">
        <template v-for="i in menuList">
          <n-button v-if="i.show" type="primary" :tertiary="!i.active" @click="handdleclickmenu(i.id)"
            @mouseenter="handdleentermenu(i.id)" @mouseleave="handdleleavemenu(i.id)">{{ i.name
            }}</n-button>
        </template>
      </div>
      <n-modal v-model:show="showModal" preset="dialog" title="Dialog">
        <template #header>
          <div>提示</div>
        </template>
        <div>
          <div style="text-align: center">{{ currentImg.filename }}</div>
          <n-form-item label="">
            <n-input v-model:value="fileName" placeholder="请输入新的文件名" @keyup.enter="" />
          </n-form-item>
        </div>
        <template #action>
          <n-button @click="handdleClose">取消</n-button>
          <n-button type="primary" @click="updatename">确认</n-button>
        </template>
      </n-modal>
    </n-scrollbar>
    <n-upload multiple action="https://www.hxyouzi.com/api/file/upload" accept="image/*"
      :headers="{ Authorization: token }" :show-file-list="false" :on-finish="fileFinish">
      <n-button type="primary">上传图片</n-button>
    </n-upload>
  </div>
</template>

<script setup>
import falls from '@/components/falls.vue';
import { onMounted } from 'vue';
import cookie from "vue-cookies";


const acount = ref(2)
const bottomLen = ref(20)
// console.log(4444, size.conH);
const list = ref([]);
const token = cookie.get("token");
function fileFinish(file) {
  const res = JSON.parse(file.event.currentTarget.response);
  // console.log(res);
  if (res.code == 1) {
    $msg.success(res.msg);
    getMyfile();
  } else {
    $msg.error(res.msg);
  }
}

async function getMyfile() {
  list.value = [];
  const res = await $http.file.MyFile();
  list.value = res.data;
}

onMounted(() => {
  getMyfile();
});

const menuShow = ref(false);
const x = ref(0);
const y = ref(0);
let imgTimer
const menuList = ref([
  {
    id: 1,
    name: "修改文件名",
    active: false,
    show: true,
  },
  {
    id: 2,
    name: "分享",
    active: false,
    show: true,
  },
  {
    id: 3,
    name: "取消分享",
    active: false,
    show: true,
  },
  {
    id: 4,
    name: "下载",
    active: false,
    show: true,
  },

  {
    id: 5,
    name: "删除",
    active: false,
    show: true,
  },
])
const fileName = ref("");
const showModal = ref(false);
const currentImg = ref({});
function handdlemenu(e, img) {
  menuShow.value = false
  const { clientX, clientY } = e;
  x.value = clientX;
  y.value = clientY;
  menuShow.value = true;
  menuList.value[1].show = !img.share;
  menuList.value[2].show = !!img.share;
  currentImg.value = img;
  console.log(img);
  imgTimer && clearTimeout(imgTimer)
  imgTimer = setTimeout(() => {
    menuShow.value = false
    resetMenuList()
  }, 2000);
}
function handdleclickmenu(id) {
  switch (id) {
    case 1:
      showModal.value = true;
      menuShow.value = false;
      break;
    case 2:
      share(currentImg.value.id)
      break;
    case 3:
      unshare(currentImg.value.id)
      break;
    case 4:
      downloadImg(currentImg.value)
      break;
    case 5:
      remove(currentImg.value.id)
      break;
  }
}
function handdleentermenu(id) {
  menuList.value[id - 1].active = true;
  imgTimer && clearTimeout(imgTimer)
}
function handdleleavemenu(id) {
  menuList.value[id - 1].active = false;
  imgTimer = setTimeout(() => {
    menuShow.value = false
    resetMenuList()
  }, 2000);
}

function resetMenuList() {
  menuList.value = ([
    {
      id: 1,
      name: "修改文件名",
      active: false,
      show: true,
    },
    {
      id: 2,
      name: "分享",
      active: false,
      show: true,
    },
    {
      id: 3,
      name: "取消分享",
      active: false,
      show: true,
    },
    {
      id: 4,
      name: "下载",
      active: false,
      show: true,
    },

    {
      id: 5,
      name: "删除",
      active: false,
      show: true,
    },
  ])
}
async function share(id) {
  menuShow.value = false;
  const res = await $http.file.updateFile(id);
  res.code ? $msg.success(res.msg) : $msg.error(res.msg);
  getMyfile();
}
async function unshare(id) {
  menuShow.value = false;
  const res = await $http.file.unUpdateFile(id);
  res.code ? $msg.success(res.msg) : $msg.error(res.msg);
  getMyfile()
}
async function remove(id) {
  menuShow.value = false;
  const res = await $http.file.delFile(id);
  res.code ? $msg.success(res.msg) : $msg.error(res.msg);
  getMyfile()
}
async function downloadImg(img) {
  let a = document.createElement("a");
  a.download = img.filename;
  a.href = img.filepath;
  a.target = "_BLANK";
  a.click();
}
function handdleClose() {
  fileName.value = "";
  showModal.value = false;
}
async function updatename() {
  if (fileName.value != "") {
    const res = await $http.file.updateName({ id: currentImg.value.id, name: fileName.value });
    res.code ? $msg.success(res.msg) : $msg.error(res.msg);
    handdleClose();
    getMyfile()
  } else {
    $msg.error("文件名不能为空");
  }
}
const pw = 200
const gw = ref(null)
const ch = ref(0)
function arrCount() {
  const cw = gw.value.clientWidth
  ch.value = document.documentElement.clientHeight
  console.log(ch.value,"#########");
  if (cw < 750) {
    acount.value = 2
    // pivW.value = 180
    bottomLen.value = 10
    return
  }
  // pivW.value = 200
  bottomLen.value = 20
  acount.value = Math.floor(cw * 0.95 / (pw + 20))
}

onMounted(() => {
  arrCount()
})
</script>

<style scoped lang="less">
.div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

:deep(.up.n-icon) {
  color: @purple;
}

:deep(.n-upload-trigger) {
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 50px;

  .n-button {
    height: 40px;
  }
}

:deep(.n-upload-trigger) {
  :deep(.n-button) {
    width: 100%;
    height: 36px;
  }
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.munur {
  border-radius: 4px;
  overflow: hidden;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}



:deep(.n-image) {
  display: flex;
  img {
    width: 200px;
    height: auto;
  }
}

.img {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: @ps;
  border: 1px solid #dddddd;
}
</style>
