<template>
  <HomeContainer :customStyle="{ background: 'none', padding: '0' }">
    <!-- 页面标题 -->
    <view class="page-title">近15天违禁品查获情况群体消息推送</view>
    
    <!-- 违禁品TOP3重点关注提示 -->
    <view class="section">
      <view class="section-title">1. 近15天移交公安违禁品TOP3</view>
      <view class="section-description">
        重点关注违禁品提示：需重点关注的违禁品主要包括{{prohibitedItemTips}}，各岗位需严格按照安检标准，对相关违禁品进行重点核查，杜绝漏检。
      </view>
      <StatisticTable 
        :columns="prohibitedItemColumns" 
        :data="prohibitedItemData" 
        :blankData="'0'"
        class="statistic-table" />
    </view>

    <!-- 藏匿部位TOP3检查提示 -->
    <view class="section">
      <view class="section-title">2. 近15天故意隐匿物品藏匿部位TOP3</view>
      <view class="section-description">
        藏匿部位检查提示：需着重注意{{concealmentTips}}的情况，检查时需细致排查，杜绝隐匿夹带。
      </view>
      <StatisticTable 
        :columns="concealmentPositionColumns" 
        :data="concealmentPositionData" 
        :blankData="'0'"
        class="statistic-table" />
    </view>

    <!-- 高发通道TOP3管控提示 -->
    <view class="section">
      <view class="section-title">3. 近15天移交公安违禁品高发通道TOP3</view>
      <view class="section-description">
        高发通道管控提示：需着重注意{{highRiskChannelTips}}这三个高发通道，需安排经验丰富的员工上岗，重点关注各通道的安检操作规范，加强相关通道的巡视检查频次，确保安检质量，杜绝违规操作和漏检情况。
      </view>
      <StatisticTable 
        :columns="highRiskChannelColumns" 
        :data="highRiskChannelData" 
        :blankData="'0'"
        class="statistic-table" />
    </view>
  </HomeContainer>
</template>

<script>
import HomeContainer from '@/components/HomeContainer.vue'
import StatisticTable from '@/components/statistic-table/statistic-table.vue'
import { getPushMessage } from '@/api/home-new/home-new'

export default {
  name: 'MessagePush',
  components: {
    HomeContainer,
    StatisticTable
  },
  data() {
    return {
      // 违禁品表格列配置
      prohibitedItemColumns: [
        { props: 'rank', title: '排名' },
        { props: 'category', title: '违禁品类别（一二级分类合并）' },
        { props: 'count', title: '查获数量（件）' }
      ],
      // 藏匿部位表格列配置
      concealmentPositionColumns: [
        { props: 'rank', title: '排名' },
        { props: 'position', title: '藏匿部位（一二级分类合并）' },
        { props: 'count', title: '隐匿次数（次）' }
      ],
      // 高发通道表格列配置
      highRiskChannelColumns: [
        { props: 'rank', title: '排名' },
        { props: 'channel', title: '通道编号（航站楼+区域）' },
        { props: 'count', title: '移交公安数量（件）' }
      ],
      // 表格数据
      prohibitedItemData: [],
      concealmentPositionData: [],
      highRiskChannelData: [],
      // 原始数据
      prohibitedItemsTop3: [],
      concealmentPositionsTop3: [],
      highRiskChannelsTop3: []
    }
  },

  async onLoad() {
    await this.fetchPushMessageData()
  },

  computed: {
    // 违禁品提示文本
    prohibitedItemTips() {
      if (!this.prohibitedItemsTop3 || this.prohibitedItemsTop3.length === 0) {
        return '';
      }
      
      const items = this.prohibitedItemsTop3.slice(0, 3).map(item => {
        const category = `${item.categoryNameOne || ''}${item.categoryNameTwo ? '/' + item.categoryNameTwo : ''}`;
        return category;
      });
      
      return items.join('、');
    },
    
    // 藏匿部位提示文本
    concealmentTips() {
      if (!this.concealmentPositionsTop3 || this.concealmentPositionsTop3.length === 0) {
        return '';
      }
      
      const positions = this.concealmentPositionsTop3.slice(0, 3).map(item => {
        const position = `${item.positionNameOne || ''}${item.positionNameTwo ? '/' + item.positionNameTwo : ''}`;
        return position;
      });
      
      return positions.join('、');
    },
    
    // 高发通道提示文本
    highRiskChannelTips() {
      if (!this.highRiskChannelsTop3 || this.highRiskChannelsTop3.length === 0) {
        return '';
      }
      
      const channels = this.highRiskChannelsTop3.slice(0, 3).map(item => {
        const channel = `${item.terminalName || ''}${item.areaName ? '/' + item.areaName : ''}${item.channelName ? '/' + item.channelName : ''}`;
        return channel;
      });
      
      return channels.join('、');
    }
  },

  methods: {
    // 获取推送消息数据
    async fetchPushMessageData() {
      try {
        const response = await getPushMessage()
        console.log('推送消息响应:', response)
        if (response && response.data) {
          const { concealmentPositionsTop3, highRiskChannelsTop3, prohibitedItemsTop3 } = response.data
          
          // 保存原始数据用于计算属性
          this.prohibitedItemsTop3 = prohibitedItemsTop3 || []
          this.concealmentPositionsTop3 = concealmentPositionsTop3 || []
          this.highRiskChannelsTop3 = highRiskChannelsTop3 || []
          
          // 处理违禁品数据
          this.prohibitedItemData = this.formatProhibitedItemsData(this.prohibitedItemsTop3)
          
          // 处理藏匿部位数据
          this.concealmentPositionData = this.formatConcealmentPositionsData(this.concealmentPositionsTop3)
          
          // 处理高发通道数据
          this.highRiskChannelData = this.formatHighRiskChannelsData(this.highRiskChannelsTop3)
        }
      } catch (error) {
        console.error('获取推送消息失败:', error)
      }
    },

    // 格式化违禁品数据
    formatProhibitedItemsData(items) {
      return items.map((item, index) => ({
        rank: `TOP${index + 1}`,
        category: `${item.categoryNameOne || ''}${item.categoryNameTwo ? '/' + item.categoryNameTwo : ''}`,
        count: item.seizureCount || 0
      }))
    },

    // 格式化藏匿部位数据
    formatConcealmentPositionsData(positions) {
      return positions.map((item, index) => ({
        rank: `TOP${index + 1}`,
        position: `${item.positionNameOne || ''}${item.positionNameTwo ? '/' + item.positionNameTwo : ''}`,
        count: item.concealmentCount || 0
      }))
    },

    // 格式化高发通道数据
    formatHighRiskChannelsData(channels) {
      return channels.map((item, index) => ({
        rank: `TOP${index + 1}`,
        channel: `${item.terminalName || ''}${item.areaName ? '/' + item.areaName : ''}${item.channelName ? '/' + item.channelName : ''}`,
        count: item.transferToPoliceCount || 0
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222222;
  text-align: center;
  margin: 32rpx 0 48rpx 0;
  line-height: 48rpx;
}

.section {
  margin-bottom: 48rpx;
  padding: 0 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
  line-height: 44rpx;
}

.section-description {
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  margin-bottom: 24rpx;
  background: #f8f9fa;
  padding: 24rpx;
  border-radius: 16rpx;
  
}

.statistic-table {
  margin-top: 16rpx;
}
</style>