<template>
  <div class="app-container home">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :span="6" class="card-panel-col">
        <el-card shadow="hover" class="box-card">
          <div class="card-header">
            <span>伙伴商总数</span>
            <el-tag type="primary" effect="light" size="small">实时</el-tag>
          </div>
          <div class="card-body">
            <h2 class="num">1,250</h2>
            <div class="bottom">
              <span class="text-up">较上月 + 5% ↑</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-panel-col">
        <el-card shadow="hover" class="box-card">
          <div class="card-header">
            <span>本月新增入驻</span>
            <el-tag type="success" effect="light" size="small">月度</el-tag>
          </div>
          <div class="card-body">
            <h2 class="num">120</h2>
            <div class="bottom">
              <span class="text-up">较上月 + 12% ↑</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-panel-col">
        <el-card shadow="hover" class="box-card">
          <div class="card-header">
            <span>待处理审批</span>
            <el-tag type="warning" effect="light" size="small">待办</el-tag>
          </div>
          <div class="card-body">
            <h2 class="num" style="color: #e6a23c">15</h2>
            <div class="bottom">
              <span style="color: #909399">需及时处理审批事项</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-panel-col">
        <el-card shadow="hover" class="box-card">
          <div class="card-header">
            <span>合作中项目数</span>
            <el-tag type="info" effect="light" size="small">业务</el-tag>
          </div>
          <div class="card-body">
            <h2 class="num">340</h2>
            <div class="bottom">
              <span class="text-down">较上月 - 2% ↓</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表 -->
    <el-row :gutter="20" class="chart-group">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>近半年新增伙伴商趋势</span>
            </div>
          </template>
          <div ref="lineChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>伙伴商评级分布</span>
            </div>
          </template>
          <div ref="pieChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-row :gutter="20" class="list-group">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>最新入驻伙伴商审批列表</span>
              <el-button style="float: right; padding: 3px 0" type="primary" link>查看更多</el-button>
            </div>
          </template>
          <el-table :data="partnerList" style="width: 100%" :header-cell-style="{ background: '#f8f8f9', color: '#606266' }">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="companyName" label="伙伴商名称" min-width="200" show-overflow-tooltip />
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="level" label="申请评级" align="center">
              <template #default="scope">
                <el-tag :type="getLevelType(scope.row.level)">
                  {{ scope.row.level }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="joinTime" label="申请时间" />
            <el-table-column label="操作" width="150" align="center">
              <template>
                <el-button type="info" link size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, markRaw } from 'vue';
import * as echarts from 'echarts';

const lineChartRef = ref<HTMLElement | null>(null);
const pieChartRef = ref<HTMLElement | null>(null);

let lineChart: echarts.ECharts | null = null;
let pieChart: echarts.ECharts | null = null;

// 表格数据
const partnerList = ref([
  {
    companyName: '上海星瑞科技有限公司',
    contact: '张伟',
    phone: '138****8000',
    level: '战略伙伴',
    status: '待审批',
    joinTime: '2023-11-05 10:23:00'
  },
  {
    companyName: '北京云创集团有限公司',
    contact: '李娜',
    phone: '139****5678',
    level: '核心伙伴',
    status: '已通过',
    joinTime: '2023-11-04 15:45:12'
  },
  { companyName: '深圳速达物流中心', contact: '王强', phone: '137****9999', level: '普通伙伴', status: '已通过', joinTime: '2023-11-02 09:12:30' },
  {
    companyName: '广州联智网络股份有限公司',
    contact: '陈静',
    phone: '136****6666',
    level: '核心伙伴',
    status: '已驳回',
    joinTime: '2023-10-30 14:20:00'
  },
  {
    companyName: '杭州数智信息技术有限公司',
    contact: '刘洋',
    phone: '135****8888',
    level: '战略伙伴',
    status: '已通过',
    joinTime: '2023-10-28 11:10:45'
  }
]);

const getLevelType = (level: string) => {
  switch (level) {
    case '战略伙伴':
      return 'danger';
    case '核心伙伴':
      return 'warning';
    case '普通伙伴':
      return 'info';
    default:
      return 'primary';
  }
};

const initLineChart = () => {
  if (lineChartRef.value) {
    lineChart = markRaw(echarts.init(lineChartRef.value));
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['5月', '6月', '7月', '8月', '9月', '10月']
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '新增伙伴商',
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(64,158,255,0.6)' },
              { offset: 1, color: 'rgba(64,158,255,0.1)' }
            ])
          },
          itemStyle: {
            color: '#409EFF'
          },
          data: [20, 32, 25, 45, 60, 55]
        }
      ]
    };
    lineChart.setOption(option);
  }
};

const initPieChart = () => {
  if (pieChartRef.value) {
    pieChart = markRaw(echarts.init(pieChartRef.value));
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}家 ({d}%)'
      },
      legend: {
        bottom: '0%',
        left: 'center',
        itemWidth: 10,
        itemHeight: 10
      },
      series: [
        {
          name: '伙伴商评级',
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '普通伙伴', itemStyle: { color: '#909399' } },
            { value: 735, name: '核心伙伴', itemStyle: { color: '#E6A23C' } },
            { value: 580, name: '战略伙伴', itemStyle: { color: '#F56C6C' } },
            { value: 484, name: '认证伙伴', itemStyle: { color: '#409EFF' } },
            { value: 300, name: '观察期伙伴', itemStyle: { color: '#C0C4CC' } }
          ]
        }
      ]
    };
    pieChart.setOption(option);
  }
};

const handleResize = () => {
  if (lineChart) {
    lineChart.resize();
  }
  if (pieChart) {
    pieChart.resize();
  }
};

onMounted(() => {
  nextTick(() => {
    initLineChart();
    initPieChart();
    window.addEventListener('resize', handleResize);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  if (lineChart) {
    lineChart.dispose();
  }
  if (pieChart) {
    pieChart.dispose();
  }
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.panel-group {
  margin-bottom: 20px;
}

.box-card {
  border: none;
  border-radius: 8px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #606266;
    font-size: 14px;
    font-weight: 500;
  }

  .card-body {
    margin-top: 15px;

    .num {
      font-size: 30px;
      font-weight: bold;
      margin: 0;
      color: #303133;
    }

    .bottom {
      margin-top: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;

      .text-up {
        color: #f56c6c;
        display: flex;
        align-items: center;
        font-weight: 500;
      }

      .text-down {
        color: #67c23a;
        display: flex;
        align-items: center;
        font-weight: 500;
      }
    }
  }
}

.chart-group {
  margin-bottom: 20px;

  .el-card {
    border: none;
    border-radius: 8px;
  }

  .clearfix {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

.list-group {
  .el-card {
    border: none;
    border-radius: 8px;
  }

  .clearfix {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
