<template>
  <!-- 我的看板 -->
  <div class="myBoard-container">
    <div class="list">
      <div class="list-item" v-for="item in boardLsit" :key="item.id" @click="previewHandle(item)">
        <div class="item-operation">
          <div class="operation-item">
            <img @click.stop="deleteHandle(item)" src="~@/assets/images/ai/icon-delet.png" alt="" />
          </div>
          <div class="operation-item">
            <img @click.stop="editHandle(item)" src="~@/assets/images/ai/icon-edit.png" alt="" />
          </div>
        </div>
        <img :src="item.indexImage" class="item-cover" alt="" />
        <div class="item-name">{{ item.projectName }}</div>
      </div>
    </div>
    <div class="pagination">
      <n-pagination
        :page="paginat.page"
        :page-size="paginat.limit"
        :item-count="paginat.count"
        :page-sizes="[12, 24, 36, 48]"
        @update:page="changePage"
        @update:page-size="changeSize"
        show-size-picker
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { goDialog, httpErrorHandle } from '@/utils'
import { openNewWindow, previewPath } from '@/utils'
import { useRouter } from 'vue-router'
import { projectListApi, deleteProjectApi } from '@/api/path'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

const chartEditStore = useChartEditStore()
let boardLsit = ref([])

const router = useRouter()

const paginat = reactive({
  // 当前页数
  page: 1,
  // 每页值
  limit: 12,
  // 总数
  count: 10
})

const fetchList = async () => {
  const res = await projectListApi(paginat)
  boardLsit.value = res.data
  paginat.count = res.data.count
  console.log(boardLsit.value)
}
// 修改页数
const changePage = _page => {
  paginat.page = _page
  fetchList()
}
// 修改大小
const changeSize = _size => {
  paginat.limit = _size
  fetchList()
}
// 删除处理
const deleteHandle = cardData => {
  goDialog({
    type: 'delete',
    promise: true,
    onPositiveCallback: () =>
      new Promise(res => {
        res(
          deleteProjectApi({
            ids: cardData.id
          })
        )
      }),
    promiseResCallback: res => {
      if (res.code === 200) {
        window['$message'].success(window['$t']('global.r_delete_success'))
        fetchList()
        return
      }
      httpErrorHandle()
    }
  })
}
// 编辑处理
const editHandle = cardData => {
  if (!cardData) return
  chartEditStore.setEdit(true)//编辑状态默认只请求一次接口，不定时请求
  router.push(`/board/` + cardData.id)
}
// 预览处理
const previewHandle = cardData => {
  openNewWindow(previewPath(cardData.id))
}
onMounted(() => {
  console.log('进入')
  fetchList()
})
</script>

<style lang="scss" scoped>
.myBoard-container {
  box-sizing: border-box;
  height: 100vh;
  padding: 20px 20px 0 20px;
  .list {
    max-height: 92%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .list-item {
      cursor: pointer;
      box-sizing: border-box;
      //一行三列   间隔 - 多余的平均分
      width: calc((100% / 4) - (20px * 1) + (20px / 4));

      background: #282a31;
      padding: 15px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .item-operation {
        display: flex;
        flex-direction: row-reverse;
        gap: 6px;
        .operation-item {
          padding: 3px 6px;
          border-radius: 6px;
          img {
            height: 13px;
            width: 13px;
          }
        }
        .operation-item:hover{
          background-color: #18181c;
         
        }
      }
      .item-cover {
        display: block;
        flex: 1;
        width: 100%;
        border-radius: 6px;
      }
      .item-name {
        font-size: 16px;
        color: #ffffff;
        font-weight: 500;
        font-family: 'AlibabaPuHuiTi-Medium';
      }
    }
  }
  .pagination {
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
