<template>
  <div class="app-container">
    <el-card class="container">
      <template #header>
        <div class="card-header-left">
          <span>常用报表</span>
        </div>
        <div class="card-header-right">
          <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="(obj.reportType === 1 ? 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="(element.reportType === 1 ? 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-left">
                  <span v-if="!group.showEdit">{{ group.groupName }}</span>
                  <el-input v-else
                    v-model="group.groupName"
                    ref="groupNameRef"
                    @blur="groupNameBlur(group)"></el-input>
                </div>
                <div class="card-header-right">
                  <el-button type="primary"
                    text
                    @click="changeGroupName(group)">
                    重命名
                  </el-button>
                  <el-button type="danger"
                    text
                    @click="removeGroupName(group)">
                    删除
                  </el-button>
                </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 class="add-group">
            <el-button type="primary"
              @click="addGroups">
              <el-icon>
                <Plus />
              </el-icon>
              新增分组
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getReportListAPI, getReportListBySelfAPI, getReportListByGroupAPI, addReportGroupAPI, editReportGroupAPI, deleteReportGroupAPI } from '@/api'
import draggable from 'vuedraggable'
const { proxy } = getCurrentInstance()
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()

// 修改分组名-触发
const changeGroupName = (group) => {
  group.showEdit = true
  nextTick(() => {
    proxy.$refs['groupNameRef'][0].focus()
  })
}
// 修改分组名-确认
const groupNameBlur = async (group) => {
  group.showEdit = false
  await editReportGroupAPI({
    groupId: group.groupId,
    groupName: group.groupName,
    categoryName: '供应链报表'
  })
}

// 删除分组
const removeGroupName = (group) => {
  // 判断组内还有下属表，给提示不让删除
  if (group.items.length > 0) {
    proxy.$message.error('分组内还有报表，无法删除，可重命名')
    return
  }
  // 确认删除吗？
  proxy.$modal.confirm('确认删除分组"' + group.groupName + '"？').then(async () => {
    // 把当前分组的报表放到左侧
    await deleteReportGroupAPI(group.groupId)
    reportList.value = reportList.value.concat(group.items)
    const index = groups.value.indexOf(group)
    groups.value.splice(index, 1)
  })
}
// 新增分组
const addGroups = async () => {
  await editReportGroupAPI({
    groupName: '新分组',
    categoryName: '供应链报表',
    items: []
  })

  // 获取分组
  await getReportList({
    categoryName: '供应链报表'
  })
}
</script>

<style scoped
  lang="scss">
  .container {
    padding-top: 0;
    

    ::v-deep(.el-card__body){
      max-height: 100%;
      overflow-y: auto;
    }

    .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;
          display: flex;
          align-items: center;
          gap: 10px;
        }
      }
    }
  }

  /* card 头部 */
  ::v-deep(.el-card__header) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-header-right {
      .el-button {
        margin: 0;
        padding: 10px;
      }
    }
  }

  /* 自定义报表分组弹窗 */
  ::v-deep(.el-dialog) {

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

      .left {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding-top: 20px;

        .link_item {
          display: flex;
          align-items: center;
          margin-bottom: 15px;

          span {
            /* 超出宽度不换行，省略号 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

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

      /* 编辑区 */
      .right {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .group-container {
          padding-right: 20px;



          .group_card {
            margin-top: 20px;

            .link_item {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              span {
                /* 超出宽度不换行，省略号 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

            }

            .dragging-item {
              background-color: #a1ccf2;
            }
          }
        }

        .add-group {
          margin-top: 20px;

          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
</style>