<template>
  <div class="app-container">
    <el-card class="container">
      <template #header>
        <div class="card-header">
          <span>常用报表</span>
          <el-button class="custom"
            type="primary"
            link
            @click="visible = true">
            自定义
          </el-button>
        </div>
      </template>
      <div v-for="item in groups"
        class="group_item">
        <div>
          <p class="group_name">
            <el-icon color="blue"
              size="18">
              <Folder />
            </el-icon>
            <span>
              {{ item.groupName }}
            </span>
          </p>
          <div class="link_wrap">
            <div class="link_item"
              v-for="obj in item.items">
              <el-icon color="green"
                size="16">
                <Document></Document>
              </el-icon>
              <el-link :href="baseURL + obj.previewUrl"
                target="_blank">{{ obj.reportName }}</el-link>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog title="编辑常用报表"
      v-model="visible"
      draggable overflow>
      <div class="wrap">
        <div class="left">
          <draggable v-model="reportList"
            group="reports"
             ghost-class="dragging-item-left"
            item-key="id">
            <template #item="{ element }">
              <div class="link_item">
                <el-icon color="green"
                  size="16">
                  <Document></Document>
                </el-icon>
                <el-link :href="baseURL + element.previewUrl"
                  target="_blank">{{ element.reportName }}</el-link>
              </div>
            </template>
          </draggable>
        </div>
        <div class="right">
          <div class="group-container">
            <el-card v-for="group in groups"
              :key="group.id"
              class="group_card"
              :style="{ width: '100%' }">
              <template #header>
                <div class="card-header">
                  <span>{{ group.groupName }}</span>
                </div>
              </template>
              <draggable v-model="group.items"
                group="reports"
                ghost-class="dragging-item"
                item-key="id"
                @change="groupChange">
                <template #item="{ element }">
                  <div class="link_item">
                    <el-icon color="green"
                      size="16">
                      <Document></Document>
                    </el-icon>
                    <el-link :href="baseURL + element.previewUrl"
                      target="_blank">{{ element.reportName }}</el-link>
                  </div>
                </template>
              </draggable>
            </el-card>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getReportListAPI, getReportListBySelfAPI, getReportListByGroupAPI, addReportGroupAPI } from '@/api'
import draggable from 'vuedraggable'
const visible = ref(false)
const groups = ref([])

const baseURL = ref(import.meta.env.VITE_APP_REPORT_URL + '/report')
const reportList = ref([])
const getReportList = async () => {
  // 积木报表
  const { data } = await getReportListAPI({
    categoryName: '财务报表'
  })
  // 其他报表
  const { data: otherData } = await getReportListBySelfAPI()
  reportList.value = data.concat(otherData)

  // 右侧分组列表
  const res = await getReportListByGroupAPI({
    categoryName: '财务报表'
  })
  groups.value = res.data
  // 左侧报表里要删除右侧里面有的了，用 reportId 来判断
  reportList.value = reportList.value.filter(item => {
    return !groups.value.some(group => group.items.some(groupItem => groupItem.reportId === item.reportId))
  })
}

// 拖入拖出+顺序改变
const groupChange = async (e) => {
  groups.value.forEach(o => {
    o.id = o.groupId
  })
  await addReportGroupAPI(groups.value)
}
getReportList()
</script>

<style scoped
  lang="scss">
  .el-card__header {
    .custom {
      float: right;
      padding: 3px 0;
    }
  }

  .group_item {
    .group_name {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 800;
    }

    .link_wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 0 0 0 20px;

      .link_item {
        padding: 10px 0;
        width: 25%;
        /* 超出宽度文字省略号 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

  }


  .link_item {
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .group_card {
    margin-top: 20px;
  }

  .wrap {
    display: flex;
    gap: 20px;
    width: 100%;
    height: 100%;

    .left {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    .right {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }

  /* 添加拖拽时的样式 */
  .dragging-item-left {
    background-color: transparent;
  }
  .dragging-item {
    background-color: #a1ccf2;
  }

</style>