<template>
  <div class="interaction-stats">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <i class="el-icon-s-data"></i>
        交互统计
      </h2>
      <div class="time-selector">
        <el-button
          v-for="(btn, index) in timeButtons"
          :key="index"
          :type="btn.active ? 'primary' : 'default'"
          size="small"
          @click="setTimeRange(btn.value)"
        >
          {{ btn.label }}
        </el-button>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-form :model="filter" label-position="top">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="时间范围" prop="timeRange">
              <el-select v-model="filter.timeRange" placeholder="请选择时间范围" style="width: 100%;">
                <el-option label="最近7天" :value="7"></el-option>
                <el-option label="最近30天" :value="30"></el-option>
                <el-option label="最近90天" :value="90"></el-option>
                <el-option label="最近一年" :value="365"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交互类型" prop="interactionType">
              <el-select v-model="filter.interactionType" placeholder="请选择交互类型" clearable style="width: 100%;">
                <el-option label="全部类型" value=""></el-option>
                <el-option label="查看" value="view"></el-option>
                <el-option label="私信" value="message"></el-option>
                <el-option label="联系" value="contact"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供需类型" prop="supplyType">
              <el-select v-model="filter.supplyType" placeholder="请选择供需类型" clearable style="width: 100%;">
                <el-option label="全部" value=""></el-option>
                <el-option label="供应" value="supply"></el-option>
                <el-option label="需求" value="demand"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作">
              <el-button type="primary" @click="updateStats">更新统计</el-button>
              <el-button type="success" @click="exportStats">导出报告</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <div
        v-for="(stat, index) in statsData"
        :key="index"
        class="stat-card"
        :class="stat.type"
      >
        <div class="stat-header">
          <div class="stat-title">{{ stat.title }}</div>
          <div class="stat-icon" :class="'icon-' + stat.type">
            <i :class="stat.icon"></i>
          </div>
        </div>
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-change" :class="stat.changeType">
          <i :class="stat.changeIcon"></i>
          <span>{{ stat.changeText }}</span>
        </div>
      </div>
    </div>

    <!-- 交互趋势图表 -->
    <div class="chart-section">
      <div class="section-title">
        交互趋势分析
        <small class="text-muted">最近30天交互数据变化</small>
      </div>
      <div class="chart-container" ref="trendChart"></div>
    </div>

    <!-- 交互类型分布 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-section">
          <div class="section-title">交互类型分布</div>
          <div class="chart-container" ref="typeChart" style="height: 300px;"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-section">
          <div class="section-title">用户活跃度分析</div>
          <div class="chart-container" ref="userChart" style="height: 300px;"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 详细交互记录 -->
    <div class="chart-section">
      <div class="section-title">
        交互详情记录
        <small class="text-muted">仅统计会话记录，不监测会话内容</small>
      </div>
      <div class="data-table">
        <el-table :data="interactionList" style="width: 100%">
          <el-table-column label="用户信息" width="200">
            <template slot-scope="scope">
              <div class="user-info">
                <div class="user-avatar">{{ scope.row.userName.charAt(0) }}</div>
                <div>
                  <div class="user-name">{{ scope.row.userName }}</div>
                  <div class="user-year">{{ scope.row.userYear }}届</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="目标用户" width="200">
            <template slot-scope="scope">
              <div class="user-info">
                <div class="user-avatar">{{ scope.row.targetName.charAt(0) }}</div>
                <div>
                  <div class="user-name">{{ scope.row.targetName }}</div>
                  <div class="user-year">{{ scope.row.targetYear }}届</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="交互类型" width="120">
            <template slot-scope="scope">
              <el-tag
                :type="getInteractionTagType(scope.row.type)"
                size="small"
              >
                {{ scope.row.typeText }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="供需信息" width="250">
            <template slot-scope="scope">
              <div class="supply-info">
                <div class="supply-title">{{ scope.row.supplyTitle }}</div>
                <div class="supply-type">{{ scope.row.supplyType }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="交互时间" width="150">
            <template slot-scope="scope">
              <div class="interaction-time">{{ scope.row.time }}</div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="getStatusTagType(scope.row.status)"
                size="small"
              >
                {{ scope.row.statusText }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'InteractionStats',
  data() {
    return {
      timeButtons: [
        { label: '今日', value: 'today', active: false },
        { label: '本周', value: 'week', active: true },
        { label: '本月', value: 'month', active: false },
        { label: '本季度', value: 'quarter', active: false }
      ],
      filter: {
        timeRange: 30,
        interactionType: '',
        supplyType: ''
      },
      statsData: [
        {
          title: '总交互次数',
          value: '1,247',
          changeText: '+12.5% 较上月',
          changeType: 'change-up',
          changeIcon: 'el-icon-arrow-up',
          type: 'blue',
          icon: 'el-icon-chat-dot-round'
        },
        {
          title: '活跃用户数',
          value: '186',
          changeText: '+8.3% 较上月',
          changeType: 'change-up',
          changeIcon: 'el-icon-arrow-up',
          type: 'green',
          icon: 'el-icon-user'
        },
        {
          title: '私信发送量',
          value: '562',
          changeText: '+15.7% 较上月',
          changeType: 'change-up',
          changeIcon: 'el-icon-arrow-up',
          type: 'orange',
          icon: 'el-icon-message'
        },
        {
          title: '成功匹配数',
          value: '89',
          changeText: '+22.1% 较上月',
          changeType: 'change-up',
          changeIcon: 'el-icon-arrow-up',
          type: 'purple',
          icon: 'el-icon-check'
        }
      ],
      interactionList: [
        {
          userName: '张总',
          userYear: '2010',
          targetName: '李经理',
          targetYear: '2015',
          type: 'message',
          typeText: '私信',
          supplyTitle: '寻找技术合作伙伴',
          supplyType: '需求类型',
          time: '2024-01-15 14:30',
          status: 'replied',
          statusText: '已回复'
        },
        {
          userName: '王顾问',
          userYear: '2008',
          targetName: '赵总',
          targetYear: '2012',
          type: 'view',
          typeText: '查看',
          supplyTitle: '投融资咨询服务',
          supplyType: '供应类型',
          time: '2024-01-15 13:45',
          status: 'viewed',
          statusText: '已查看'
        },
        {
          userName: '陈经理',
          userYear: '2018',
          targetName: '孙总',
          targetYear: '2005',
          type: 'contact',
          typeText: '联系',
          supplyTitle: '企业管理咨询',
          supplyType: '供应类型',
          time: '2024-01-15 11:20',
          status: 'processing',
          statusText: '进行中'
        }
      ],
      charts: {
        trendChart: null,
        typeChart: null,
        userChart: null
      }
    }
  },
  mounted() {
    this.initCharts()
    this.$nextTick(() => {
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    setTimeRange(range) {
      this.timeButtons.forEach(btn => {
        btn.active = btn.value === range
      })
      this.updateStats()
    },
    updateStats() {
      console.log('更新统计数据:', this.filter)
      this.$message.success('统计数据已更新')
    },
    exportStats() {
      console.log('导出统计报告')
      this.$message.info('统计报告正在生成，请稍候...')
    },
    getInteractionTagType(type) {
      const typeMap = {
        message: 'primary',
        view: 'success',
        contact: 'warning'
      }
      return typeMap[type] || 'info'
    },
    getStatusTagType(status) {
      const statusMap = {
        replied: 'success',
        viewed: 'info',
        processing: 'primary'
      }
      return statusMap[status] || 'info'
    },
    initCharts() {
      this.initTrendChart()
      this.initTypeChart()
      this.initUserChart()
    },
    initTrendChart() {
      const chartDom = this.$refs.trendChart
      if (!chartDom) return

      this.charts.trendChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderColor: 'transparent',
          textStyle: { color: '#fff' }
        },
        legend: {
          data: ['查看次数', '私信次数', '联系次数'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18', '1/19', '1/20', '1/21']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '查看次数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [45, 52, 48, 61, 55, 67, 72, 68, 75, 81, 77, 89, 95],
            itemStyle: { color: '#3498db' }
          },
          {
            name: '私信次数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [23, 28, 25, 32, 29, 35, 38, 34, 41, 45, 42, 48, 52],
            itemStyle: { color: '#2ecc71' }
          },
          {
            name: '联系次数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [12, 15, 13, 18, 16, 21, 24, 22, 27, 31, 28, 34, 38],
            itemStyle: { color: '#f39c12' }
          }
        ]
      }
      this.charts.trendChart.setOption(option)
    },
    initTypeChart() {
      const chartDom = this.$refs.typeChart
      if (!chartDom) return

      this.charts.typeChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '交互类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 562, name: '私信', itemStyle: { color: '#3498db' }},
              { value: 425, name: '查看', itemStyle: { color: '#2ecc71' }},
              { value: 260, name: '联系', itemStyle: { color: '#f39c12' }}
            ]
          }
        ]
      }
      this.charts.typeChart.setOption(option)
    },
    initUserChart() {
      const chartDom = this.$refs.userChart
      if (!chartDom) return

      this.charts.userChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['低活跃', '中活跃', '高活跃', '超活跃']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              { value: 45, itemStyle: { color: '#95a5a6' }},
              { value: 82, itemStyle: { color: '#3498db' }},
              { value: 41, itemStyle: { color: '#2ecc71' }},
              { value: 18, itemStyle: { color: '#e74c3c' }}
            ],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      this.charts.userChart.setOption(option)
    },
    handleResize() {
      Object.values(this.charts).forEach(chart => {
        if (chart) {
          chart.resize()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.interaction-stats {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  display: flex;
  align-items: center;
  margin: 0;

  i {
    margin-right: 10px;
    color: #3498db;
  }
}

.time-selector {
  display: flex;
  gap: 10px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 4px solid;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  &.blue {
    border-left-color: #3498db;
  }

  &.green {
    border-left-color: #2ecc71;
  }

  &.orange {
    border-left-color: #f39c12;
  }

  &.purple {
    border-left-color: #9b59b6;
  }
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.stat-title {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;

  &.icon-blue { background: #3498db; }
  &.icon-green { background: #2ecc71; }
  &.icon-orange { background: #f39c12; }
  &.icon-purple { background: #9b59b6; }
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;

  &.change-up {
    color: #27ae60;
  }

  &.change-down {
    color: #e74c3c;
  }
}

.chart-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  small {
    font-size: 12px;
    color: #6c757d;
    font-weight: normal;
  }
}

.chart-container {
  height: 350px;
  width: 100%;
}

.data-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
}

.user-year {
  font-size: 12px;
  color: #666;
}

.supply-info {
  max-width: 200px;
}

.supply-title {
  font-weight: 600;
  font-size: 13px;
}

.supply-type {
  font-size: 11px;
  color: #666;
}

.interaction-time {
  font-size: 12px;
}

.text-muted {
  color: #6c757d;
}
</style>
