<!-- 可递归菜单 -->
<template>
    <div style="height: 100%;">
      <!-- 如果有子菜单，则渲染子菜单 -->
      <el-submenu style="height: 100%;" v-if="item.children && item.children.length > 0" :index="item.routerName" >
        <template slot="title">
          {{ item.title  }}
          <!-- 二级菜单【未回价】显示未回价数量 -->
          <span v-if="isUnreturnedPriceMenu && unreturnedCount > 0" class="push-value-badge">{{ unreturnedCount }}</span>
          <!-- 二级菜单【预估单】显示预估总数 -->
          <span v-if="isEstimatePendingMenu && estimateCounts.total > 0" class="push-value-badge">{{ estimateCounts.total }}</span>
          <!-- 二级菜单【查勘列表】显示查勘跟进中数量 -->
          <span v-if="isSurveyListMenu && surveyFollowCount > 0" class="push-value-badge">{{ surveyFollowCount }}</span>
          <!-- 二级菜单【报告制作】显示报告总数 -->
          <span v-if="isReportProduceMenu && reportProduceCounts.total > 0" class="push-value-badge">{{ reportProduceCounts.total }}</span>
        </template>
        <!-- 递归调用MenuItem组件 -->
        <menu-item v-for="(child, index) in item.children" :key="index" :item="child" class="menu-custom"></menu-item>
      </el-submenu>

      <!-- 如果没有子菜单，则渲染菜单项 -->
      <el-menu-item v-else :index="item.routerName" class="menu-custom">
        {{ item.title }}
        <!-- 三级菜单【未回价列表】显示未回价数量 -->
        <span v-if="isUnreturnedPriceListMenu && unreturnedCount > 0" class="push-value-badge">{{ unreturnedCount }}</span>
        <!-- 三级菜单【待制作】(预估)显示预估待制作数量 -->
        <span v-if="isEstimatePendingListMenu && estimateCounts.pending > 0" class="push-value-badge">{{ estimateCounts.pending }}</span>
        <!-- 三级菜单【二审待制作】(预估)显示预估二审数量 -->
        <span v-if="isSecondReviewListMenu && estimateCounts.secondReview > 0" class="push-value-badge">{{ estimateCounts.secondReview }}</span>
        <!-- 三级菜单【三审待制作】(预估)显示预估三审数量 -->
        <span v-if="isThirdReviewListMenu && estimateCounts.thirdReview > 0" class="push-value-badge">{{ estimateCounts.thirdReview }}</span>
        <!-- 三级菜单【待签章】(预估)显示预估待签章数量 -->
        <span v-if="isSignListMenu && estimateCounts.sign > 0" class="push-value-badge">{{ estimateCounts.sign }}</span>
        <!-- 三级菜单【跟进中】(查勘)显示查勘跟进中数量 -->
        <span v-if="isSurveyFollowMenu && surveyFollowCount > 0" class="push-value-badge">{{ surveyFollowCount }}</span>
        <!-- 三级菜单【待制作】(报告)显示报告待制作数量 -->
        <span v-if="isReportPendingMenu && reportProduceCounts.pending > 0" class="push-value-badge">{{ reportProduceCounts.pending }}</span>
        <!-- 三级菜单【二审待制作】(报告)显示报告二审待制作数量 -->
        <span v-if="isReportSecondReviewMenu && reportProduceCounts.secondReview > 0" class="push-value-badge">{{ reportProduceCounts.secondReview }}</span>
        <!-- 三级菜单【三审待制作】(报告)显示报告三审待制作数量 -->
        <span v-if="isReportThirdReviewMenu && reportProduceCounts.thirdReview > 0" class="push-value-badge">{{ reportProduceCounts.thirdReview }}</span>
      </el-menu-item>
    </div>
  </template>

  <script>
  import "@/styles/globalSetting.less";
  import { EventBus } from '@/libs/eventBus'
  import socket from '@/libs/socket'
  import { post } from '@/libs/request'
  import { getEstimatePendingCount, getSurveyFollowCount, getReportProduceCount } from '@/api/businessManage/inquiry'
  export default {
    name: 'MenuItem',
    props: {
      item: Object
    },
    data() {
      return {
        unreturnedCount: 0,
        estimateCounts: {
          pending: 0,
          secondReview: 0,
          thirdReview: 0,
          sign: 0,
          total: 0
        },
        surveyFollowCount: 0,
        reportProduceCounts: {
          pending: 0,
          secondReview: 0,
          thirdReview: 0,
          total: 0
        }
      }
    },
    computed: {
      // ==================== 回价项目 ====================
      // 判断是否是一级菜单【回价项目】
      isHuiJiaMenu() {
        return this.item.routerName === 'priceReturn' || this.item.title === '回价项目'
      },
      // 判断是否是二级菜单【未回价】
      isUnreturnedPriceMenu() {
        return this.item.routerName === 'unreturnedPrice' || this.item.title === '未回价'
      },
      // 判断是否是三级菜单【未回价列表】- 使用routerName唯一标识
      isUnreturnedPriceListMenu() {
        return this.item.routerName && this.item.routerName.includes('unreturnedPrice') ||
               this.item.title === '未回价列表'
      },

      // ==================== 预估项目 ====================
      // 判断是否是一级菜单【预估】- 只有当不是预估单时才匹配
      isEstimateMenu() {
        return (this.item.routerName === 'estimate' || this.item.title === '预估') &&
               !this.isEstimatePendingMenu
      },
      // 判断是否是二级菜单【预估单】
      isEstimatePendingMenu() {
        return this.item.routerName === 'estimateMake-estimate' || this.item.title === '预估单'
      },
      // 判断是否是三级菜单【待制作】(预估)-使用routerName区分，避免与报告制作下的待制作混淆
      isEstimatePendingListMenu() {
        return this.item.routerName === 'estimateMake-estimateWaitMakeList' ||
               this.item.routerName && this.item.routerName.includes('estimateWaitMakeList')
      },
      // 判断是否是三级菜单【二审待制作】(预估)-使用routerName区分
      isSecondReviewListMenu() {
        return this.item.routerName === 'estimateMake-estimateWaitMakeApprovalList' ||
               this.item.routerName && this.item.routerName.includes('estimateWaitMakeApprovalList')
      },
      // 判断是否是三级菜单【三审待制作】(预估)-使用routerName区分
      isThirdReviewListMenu() {
        return this.item.routerName === 'estimateMake-estimateWaitMakeApprovalThirdList' ||
               this.item.routerName && this.item.routerName.includes('estimateWaitMakeApprovalThirdList')
      },
      // 判断是否是三级菜单【待签章】(预估)
      isSignListMenu() {
        return this.item.routerName === 'estimateMake-estimateWaitSignSignList' ||
               this.item.routerName && this.item.routerName.includes('estimateWaitSignSignList') ||
               this.item.title === '待签章'
      },

      // ==================== 查勘项目 ====================
      // 判断是否是一级菜单【查勘项目】
      isSurveyMenu() {
        return this.item.routerName === 'surveyManage-surveyManage' ||
               this.item.routerName === 'survey' ||
               this.item.title === '查勘项目' ||
               this.item.title === '查勘'
      },
      // 判断是否是二级菜单【查勘列表】
      isSurveyListMenu() {
        return this.item.routerName && this.item.routerName.startsWith('surveyManage-') ||
               this.item.title === '查勘列表'
      },
      // 判断是否是三级菜单【跟进中】(查勘)-使用routerName确保是查勘模块下的
      isSurveyFollowMenu() {
        return this.item.routerName === 'surveyManage-surveyWaitFollowList' ||
               (this.item.title === '跟进中' && this.item.routerName && this.item.routerName.includes('survey'))
      },

      // ==================== 报告项目 ====================
      // 判断是否是一级菜单【报告项目】
      // isReportMenu() {
      //   return this.item.routerName === 'report' ||
      //          this.item.title === '报告项目' ||
      //          this.item.title === '报告制作'
      // },
      // 判断是否是二级菜单【报告制作】
      isReportProduceMenu() {
        return this.item.routerName && this.item.routerName.startsWith('report-') ||
               this.item.title === '报告制作'
      },
      // 判断是否是三级菜单【待制作】(报告)-使用routerName区分，避免与预估单下的待制作混淆
      isReportPendingMenu() {
        return this.item.routerName === 'waitMake'
      },
      // 判断是否是三级菜单【二审待制作】(报告)-使用routerName区分
      isReportSecondReviewMenu() {
        return this.item.routerName === 'waitApproval'
      },
      // 判断是否是三级菜单【三审待制作】(报告)-使用routerName区分
      isReportThirdReviewMenu() {
        return this.item.routerName === 'waitApprovalThird'
      }
    },
    mounted() {
      // 获取所有数据，确保每个菜单项都能显示正确的数值
      // 回价相关菜单
      this.fetchUnreturnedCount()
      // 预估相关菜单 - 包含预估模块下的所有菜单
      this.fetchEstimateCount()
      // 查勘相关菜单 - 包含查勘模块下的所有菜单
      this.fetchSurveyFollowCount()
      // 报告相关菜单 - 包含报告模块下的所有菜单
      this.fetchReportCount()

      // 保存回调引用用于销毁时移除
      this.eventBusCallback = (count) => {
        this.unreturnedCount = count
        console.log('EventBus收到未回价数量更新:', count, '当前item:', this.item.name || this.item.title)
      }

      this.socketCallback = (data) => {
        if (data && data.refresh) {
          // 收到刷新事件，只有回价相关菜单才主动获取数据
          if (this.isHuiJiaMenu || this.isUnreturnedPriceMenu || this.isUnreturnedPriceListMenu) {
            this.fetchUnreturnedCount()
          }
        } else if (data && data.count !== undefined) {
          this.$set(this, 'unreturnedCount', data.count)
          console.log('WebSocket收到未回价数量更新:', data.count, '当前item:', this.item.name || this.item.title)
        }
      }

      // 预估制作数量回调
      this.estimateEventBusCallback = (counts) => {
        this.$set(this, 'estimateCounts', counts)
      }

      this.estimateSocketCallback = (data) => {
        if (data && data.refresh) {
          // 收到刷新事件，只有预估相关菜单才主动获取数据
          if (this.isEstimateMenu || this.isEstimatePendingMenu || this.isEstimatePendingListMenu || this.isSecondReviewListMenu || this.isThirdReviewListMenu || this.isSignListMenu) {
            this.fetchEstimateCount()
          }
        } else if (data && data.pending !== undefined) {
          this.$set(this, 'estimateCounts', data)
          console.log('WebSocket收到预估制作数量更新:', data, '当前item:', this.item.name || this.item.title)
        }
      }

      // 查勘跟进中数量回调
      this.surveyEventBusCallback = (count) => {
        this.$set(this, 'surveyFollowCount', count)
      }

      this.surveySocketCallback = (data) => {
        if (data && data.refresh) {
          // 收到刷新事件，只有查勘相关菜单才主动获取数据
          if (this.isSurveyMenu || this.isSurveyListMenu || this.isSurveyFollowMenu) {
            this.fetchSurveyFollowCount()
          }
        } else if (data && data.count !== undefined) {
          this.$set(this, 'surveyFollowCount', data.count)
          console.log('WebSocket收到查勘跟进中数量更新:', data.count, '当前item:', this.item.name || this.item.title)
        }
      }

      // 报告制作数量回调
      this.reportEventBusCallback = (counts) => {
        this.$set(this, 'reportProduceCounts', counts)
      }

      this.reportSocketCallback = (data) => {
        if (data && data.refresh) {
          // 收到刷新事件，只有报告相关菜单才主动获取数据
          if (this.isReportMenu || this.isReportProduceMenu || this.isReportPendingMenu || this.isReportSecondReviewMenu || this.isReportThirdReviewMenu) {
            this.fetchReportCount()
          }
        } else if (data && data.pending !== undefined) {
          this.$set(this, 'reportProduceCounts', data)
        }
      }

      // 监听EventBus事件
      EventBus.$on('updateUnreturnedCount', this.eventBusCallback)
      EventBus.$on('updateEstimatePendingCount', this.estimateEventBusCallback)
      EventBus.$on('updateSurveyFollowCount', this.surveyEventBusCallback)
      EventBus.$on('updateReportProduceCount', this.reportEventBusCallback)

      // 监听WebSocket事件
      socket.on('updateUnreturnedCount', this.socketCallback)
      socket.on('updateEstimatePendingCount', this.estimateSocketCallback)
      socket.on('updateSurveyFollowCount', this.surveySocketCallback)
      socket.on('updateReportProduceCount', this.reportSocketCallback)
    },
    beforeDestroy() {
      // 移除监听
      EventBus.$off('updateUnreturnedCount', this.eventBusCallback)
      socket.off('updateUnreturnedCount', this.socketCallback)
      EventBus.$off('updateEstimatePendingCount', this.estimateEventBusCallback)
      socket.off('updateEstimatePendingCount', this.estimateSocketCallback)
      EventBus.$off('updateSurveyFollowCount', this.surveyEventBusCallback)
      socket.off('updateSurveyFollowCount', this.surveySocketCallback)
      EventBus.$off('updateReportProduceCount', this.reportEventBusCallback)
      socket.off('updateReportProduceCount', this.reportSocketCallback)
    },
    methods: {
      async fetchUnreturnedCount() {
        try {
          const res = await post('admin/Pending/getUnreturnedPriceCount')
          if (res && res.code === 1 && res.data) {
            this.$set(this, 'unreturnedCount', res.data.count)
          }
        } catch (error) {
          console.error('获取未回价数量失败:', error)
        }
      },
      async fetchEstimateCount() {
        try {
          const res = await getEstimatePendingCount()
          if (res && res.code === 1 && res.data) {
            this.$set(this, 'estimateCounts', res.data)
          }
        } catch (error) {
          console.error('获取预估数量失败:', error)
        }
      },
      async fetchSurveyFollowCount() {
        try {
          const res = await getSurveyFollowCount()
          if (res && res.code === 1 && res.data) {
            this.$set(this, 'surveyFollowCount', res.data.count)
          }
        } catch (error) {
          console.error('获取查勘跟进中数量失败:', error)
        }
      },
      async fetchReportCount() {
        try {
          console.log('===== nxMenu 获取报告制作数量 =====')
          const res = await getReportProduceCount()
          console.log('报告制作数量接口返回:', JSON.stringify(res, null, 2))
          if (res && res.code === 1 && res.data) {
            const data = res.data
            console.log('待制作:', data.pending, '二审:', data.secondReview, '三审:', data.thirdReview, '总数:', data.total)
            this.$set(this, 'reportProduceCounts', data)
          }
        } catch (error) {
          console.error('获取报告制作数量失败:', error)
        }
      }
    }
  }
  </script>
<style lang="less" scoped>
  .menu-custom  {
    color: var(--menu-font-color);
  }
  :deep .el-menu-item.is-active {
    background-color: var(--bg-color);
  }
  :deep .el-menu-item.is-active.menu-custom {
    color: var(--main-color);
  }
  .push-value-badge {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    font-size: 12px;
    color: #fff;
    background-color: #f56c6c;
    border-radius: 10px;
    margin-left: 8px;
    text-align: center;
  }
  .push-dot-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #f56c6c;
    border-radius: 50%;
    margin-left: 8px;
    margin-top: 4px;
  }
</style>
