<template>
  <div class="app-container">
    <el-row :gutter="20">
      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
        <pane size="100">
          <el-col>
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
              <el-form-item label="平台机构" prop="deptId">
                <IeInstitutionSelect v-model="queryParams.deptId" placeholder="请选择平台机构" clearable style="width: 240px" />
              </el-form-item>
              <el-form-item label="代理商" prop="agentId">
                <IeAgentSelect v-model="queryParams.agentId" placeholder="请选择代理商" clearable filterable style="width: 240px" />
              </el-form-item>
              <el-form-item label="开卡时间" prop="openTimeRange">
                <el-date-picker
                  v-model="openTimeRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="info"
                  plain
                  icon="Sort"
                  @click="toggleExpandAll"
                >展开/折叠</el-button>
              </el-col>
              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table
              v-if="refreshTable"
              v-loading="loading"
              :data="statisticsList"
              row-key="id"
              :default-expand-all="isExpandAll"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :row-style="getRowStyle"
            >
              <el-table-column prop="agentName" label="代理商" align="center" min-width="200">
                <template #default="scope">
                  <span v-if="scope.row.leafAgentName && scope.row.leafAgentName !== scope.row.agentName">
                    {{ scope.row.leafAgentName }}
                  </span>
                  <span v-else>{{ scope.row.agentName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="agentId" label="账号" align="center" />
              <el-table-column prop="openCard" label="已开卡" align="center">
                <template #default="scope">
                  <el-link type="primary" @click="handleDetailClick(scope.row, 'openCard')" :underline="false">
                    {{ scope.row.openCard || 0 }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="closeCard" label="已关卡" align="center">
                <template #default="scope">
                  <el-link type="primary" @click="handleDetailClick(scope.row, 'closeCard')" :underline="false">
                    {{ scope.row.closeCard || 0 }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="payCard" label="已缴费" align="center">
                <template #default="scope">
                  <el-link type="primary" @click="handleDetailClick(scope.row, 'payCard')" :underline="false">
                    {{ scope.row.payCard || 0 }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="settlementCard" label="已结算" align="center">
                <template #default="scope">
                  <el-link type="primary" @click="handleDetailClick(scope.row, 'settlementCard')" :underline="false">
                    {{ scope.row.settlementCard || 0 }}
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </pane>
      </splitpanes>
    </el-row>

    <!-- 统计详情弹窗 -->
    <el-dialog
      :title="detailDialogTitle"
      v-model="detailDialogVisible"
      width="90%"
      append-to-body
      :close-on-click-modal="false"
      class="statistics-detail-dialog"
      :before-close="handleDialogClose"
      @opened="handleDialogOpened"
    >
      <div class="dialog-table-wrapper">
        <card-table
          :data="detailCardList"
          :loading="detailLoading"
          :in-dialog="true"
          :hide-actions="true"
          @selectionChange="handleDetailSelectionChange"
          @delete="handleDetailDelete"
        />
      </div>
      <div class="flex justify-end mt-4">
        <Pagination
          :total="detailTotal"
          v-model:page="detailQueryParams.pageNum"
          v-model:limit="detailQueryParams.pageSize"
          @pagination="getDetailList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="CardStatistics">
import { getCardStatistics, getStatisticsDetail, delCards } from "@/api/dz/cards"
import IeInstitutionSelect from '@/components/IeInstitutionSelect/index.vue'
import IeAgentSelect from '@/components/IeAgentSelect/index.vue'
import useAppStore from '@/store/modules/app'
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import CardTable from './components/CardTable.vue'
import Pagination from '@/components/Pagination/index.vue'
import { nextTick } from 'vue'

const { proxy } = getCurrentInstance()
const appStore = useAppStore()

const statisticsList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const openTimeRange = ref([])
const isExpandAll = ref(true)
const refreshTable = ref(true)

const queryParams = reactive({
  deptId: undefined,
  agentId: undefined
})

// 详情弹窗相关
const detailDialogVisible = ref(false)
const detailDialogTitle = ref('')
const detailCardList = ref([])
const detailLoading = ref(false)
const detailTotal = ref(0)
const detailQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  statisticsType: '',
  agentId: null
})

// 统计类型标题映射
const statisticsTypeMap = {
  openCard: '已开卡',
  closeCard: '已关卡',
  payCard: '已缴费',
  settlementCard: '已结算'
}

/** 查询统计列表 */
function getList() {
  loading.value = true
  // 构建查询参数：deptId, agentId, openTimeBegin, openTimeEnd
  const params = {}
  
  // 平台机构
  if (queryParams.deptId) {
    params.deptId = queryParams.deptId
  }
  
  // 代理商
  if (queryParams.agentId) {
    params.agentId = queryParams.agentId
  }
  
  // 开卡时间范围
  if (openTimeRange.value && openTimeRange.value.length === 2) {
    params.openTimeBegin = openTimeRange.value[0]
    params.openTimeEnd = openTimeRange.value[1]
  }
  
  getCardStatistics(params).then(response => {
    // 处理数据，构建层级结构
    const data = response.data || []
    const map = new Map()
    const result = []
    
    // 先按一级代理商分组
    data.forEach(item => {
      const key = item.agentId
      if (!map.has(key)) {
        map.set(key, {
          id: `agent_${item.agentId}`,
          agentId: item.agentId,
          agentName: item.agentName,
          leafAgentId: item.leafAgentId,
          leafAgentName: item.leafAgentName,
          openCard: 0,
          closeCard: 0,
          payCard: 0,
          settlementCard: 0,
          children: []
        })
        result.push(map.get(key))
      }
      
      const parent = map.get(key)
      
      // 如果是一级代理商自己（leafAgentId === agentId 或 leafAgentName === agentName）
      if (item.leafAgentId === item.agentId || item.leafAgentName === item.agentName) {
        parent.openCard += item.openCard || 0
        parent.closeCard += item.closeCard || 0
        parent.payCard += item.payCard || 0
        parent.settlementCard += item.settlementCard || 0
      } else {
        // 子代理商
        parent.children.push({
          id: `leaf_${item.leafAgentId}`,
          agentId: item.agentId,
          agentName: item.agentName,
          leafAgentId: item.leafAgentId,
          leafAgentName: item.leafAgentName,
          openCard: item.openCard || 0,
          closeCard: item.closeCard || 0,
          payCard: item.payCard || 0,
          settlementCard: item.settlementCard || 0
        })
        // 累加到父级
        parent.openCard += item.openCard || 0
        parent.closeCard += item.closeCard || 0
        parent.payCard += item.payCard || 0
        parent.settlementCard += item.settlementCard || 0
      }
    })
    
    // 过滤掉没有子项的父级（如果父级自己也没有数据）
    statisticsList.value = result.filter(item => 
      item.children.length > 0 || item.openCard > 0 || item.closeCard > 0 || item.settlementCard > 0
    )
  }).finally(() => {
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  openTimeRange.value = []
  queryParams.deptId = undefined
  queryParams.agentId = undefined
  handleQuery()
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true
  })
}

/** 设置表格行样式 */
function getRowStyle({ row }) {
  // 如果是子代理商（有 children 或者是子节点）
  if (row.children && row.children.length > 0) {
    return {}
  }
  // 子节点使用浅蓝色背景
  if (row.leafAgentId && row.leafAgentId !== row.agentId) {
    return {
      backgroundColor: '#C4E7F8'
    }
  }
  return {}
}

/** 点击统计数字，显示详情 */
function handleDetailClick(row, statisticsType) {
  // 确定使用的 agentId（优先使用 leafAgentId，如果没有则使用 agentId）
  const agentId = row.leafAgentId || row.agentId
  if (!agentId) {
    proxy.$modal.msgWarning('代理商ID不存在')
    return
  }
  
  detailQueryParams.statisticsType = statisticsType
  detailQueryParams.agentId = agentId
  detailQueryParams.pageNum = 1
  detailQueryParams.pageSize = 10
  
  const agentName = row.leafAgentName || row.agentName || ''
  detailDialogTitle.value = `${agentName} - ${statisticsTypeMap[statisticsType]}详情`
  
  // 先打开弹窗
  detailDialogVisible.value = true
  // 立即加载数据
  getDetailList()
}

/** 查询详情列表 */
function getDetailList() {
  if (!detailQueryParams.agentId || !detailQueryParams.statisticsType) {
    return
  }
  
  detailLoading.value = true
  getStatisticsDetail({
    statisticsType: detailQueryParams.statisticsType,
    agentId: detailQueryParams.agentId,
    pageNum: detailQueryParams.pageNum,
    pageSize: detailQueryParams.pageSize
  }).then(response => {
    console.log('详情接口响应:', response)
    detailCardList.value = response.rows || []
    detailTotal.value = response.total || 0
    console.log('设置后的 detailCardList:', detailCardList.value)
    console.log('设置后的 detailTotal:', detailTotal.value)
  }).catch(error => {
    console.error('获取详情失败:', error)
    proxy.$modal.msgError('获取详情失败')
  }).finally(() => {
    detailLoading.value = false
  })
}

/** 详情列表选择变化 */
function handleDetailSelectionChange(selection) {
  // 可以在这里处理选择逻辑
}

/** 详情列表删除 */
function handleDetailDelete(row) {
  proxy.$modal.confirm(`是否确认删除学习卡号为"${row.cardNo}"的数据项？`).then(() => {
    delCards(row.cardId).then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getDetailList()
      getList() // 刷新统计列表
    })
  })
}

/** 弹窗打开后处理 */
function handleDialogOpened() {
  // 弹窗打开后，确保表格能正确渲染
  // 如果数据还没有加载，则加载数据
  if (detailCardList.value.length === 0 && detailQueryParams.agentId) {
    nextTick(() => {
      getDetailList()
    })
  }
}

/** 弹窗关闭处理 */
function handleDialogClose() {
  detailDialogVisible.value = false
  detailCardList.value = []
  detailTotal.value = 0
}

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

<style scoped>
.app-container {
  padding: 20px;
}

/* 确保 splitpanes 的 pane 可以滚动 */
:deep(.splitpanes__pane) {
  overflow: auto !important;
  height: 100%;
}

/* 确保 el-col 内容正常显示，不被遮挡 */
:deep(.splitpanes__pane .el-col) {
  padding: 0;
  overflow: visible;
}

/* 弹窗中的表格容器 */
.dialog-table-wrapper {
  min-height: 400px;
  max-height: 60vh;
  position: relative;
  overflow: visible;
}

/* 弹窗中的 CardTable 样式调整 - 覆盖绝对定位，使其在弹窗中正常显示 */
:deep(.statistics-detail-dialog .dialog-table-wrapper) {
  position: relative;
  display: block;
  width: 100%;
}

:deep(.statistics-detail-dialog .dialog-table-wrapper > div) {
  position: relative !important;
  height: auto !important;
  min-height: 400px;
  max-height: 60vh;
  width: 100% !important;
}

:deep(.statistics-detail-dialog .dialog-table-wrapper .mt-4) {
  position: relative !important;
  height: auto !important;
  min-height: 400px;
  max-height: 60vh;
  width: 100% !important;
  margin-top: 0 !important;
}

:deep(.statistics-detail-dialog .dialog-table-wrapper .absolute) {
  position: relative !important;
  height: auto !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

:deep(.statistics-detail-dialog .dialog-table-wrapper .el-table) {
  height: auto !important;
  min-height: 400px;
  max-height: 60vh;
  width: 100% !important;
}

:deep(.statistics-detail-dialog .dialog-table-wrapper .el-table__body-wrapper) {
  max-height: calc(60vh - 150px);
  overflow-y: auto !important;
}

/* 确保表格内容可见 */
:deep(.statistics-detail-dialog .el-table__body) {
  display: table-row-group !important;
}
</style>

