<template>
  <div class="dashboard-container">
    <div class="left-content">
      <div
        class="entry"
        @click="()=>{
          $router.push({ path: '/menuIndex' })
        }"
      >
        <svg-icon icon-class="home" />
        进入系统主菜单
      </div>
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="title">
            菜单快捷入口
          </div>
          <svg-icon icon-class="setting" />
        </div>
        <div class="menu-grid">
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m1" />
            <div>经营异常</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/illegalQuery'
              })
            }"
          >
            <svg-icon icon-class="m2" />
            <div>严重违法</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m3" />
            <div>市场主体除名</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m3" />
            <div>批量吊销</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m4" />
            <div>撤销登记</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m5" />
            <div>联合惩戒</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m6" />
            <div>年报管理</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m6" />
            <div>智慧认领</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m7" />
            <div>强制注销</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m7" />
            <div> 综合查询</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m8" />
            <div>组织架构</div>
          </div>
          <div
            class="menu-item"
            @click="()=>{
              $router.push({
                path: '/aiccs/comprehensive/abnMarket'
              })
            }"
          >
            <svg-icon icon-class="m8" />
            <div>系统管理</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="main-content">

      <div class="todo-and-card">
        <!-- 待办事项总览 -->
        <div class="todo-header">
          <span class="title">待办事项总览</span>
          <span class="tag normal">正常 <span class="color">12</span></span>
          <span class="tag overdue">超期 <span class="color">42</span></span>
          <span class="tag soon-overdue">即将超期 <span class="color">122</span></span>
        </div>

        <!-- 统计卡片 -->
        <div class="card-group">
          <div class="stat-card">
            <div class="icon">
              <svg-icon icon-class="d1" />
            </div>
            <div class="info">
              <div class="card-icon">经营异常</div>
              <div class="card-num">12</div>
            </div>
          </div>
          <div class="stat-card">

            <div class="icon">
              <svg-icon icon-class="d2" />
            </div>
            <div class="info">
              <div class="card-icon">严重违法</div>
              <div class="card-num">0</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="icon">
              <svg-icon icon-class="d3" />
            </div>
            <div class="info">
              <div class="card-icon">联合惩戒</div>
              <div class="card-num">12</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="icon">
              <svg-icon icon-class="d1" />
            </div>
            <div class="info">
              <div class="card-icon">撤销登记</div>
              <div class="card-num">12</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="icon">
              <svg-icon icon-class="d2" />
            </div>
            <div class="info">
              <div class="card-icon">市场除名</div>
              <div class="card-num">0</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="chart-container">
        <!-- 柱状图 -->
        <div class="chart-item bar-chart">
          <div class="chart-title">各市经营异常主体数量对比</div>
          <div id="barChart" class="chart-box" />
        </div>
        <!-- 环形图 -->
        <div class="chart-item pie-chart">
          <div class="chart-title">经营异常主体类型分布</div>
          <div id="pieChart" class="chart-box" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BusinessAbnormalDashboard',
  data() {
    return {
      barChart: null,
      pieChart: null
    }
  },
  mounted() {
    this.initBarChart()
    this.initPieChart()
    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', () => {
      this.barChart.resize()
      this.pieChart.resize()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.barChart.resize()
      this.pieChart.resize()
    })
  },
  methods: {
    // 初始化柱状图
    initBarChart() {
      const chartDom = document.getElementById('barChart')
      this.barChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [
            '呼和浩特市', '包头市', '呼伦贝尔市', '兴安盟', '通辽市', '赤峰市',
            '锡林郭勒盟', '乌兰察布市', '鄂尔多斯市', '巴彦淖尔市', '乌海市', '阿拉善盟'
          ],
          axisLabel: {
            rotate: 45,
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: '数量（家）',
          nameTextStyle: { fontSize: 12 }
        },
        series: [
          {
            data: [
              250000, 200000, 160000, 100000, 140000, 190000,
              90000, 130000, 210000, 100000, 70000, 60000
            ],
            type: 'bar',
            itemStyle: {
              color: function(params) {
                // 渐变蓝色系
                const colors = [
                  '#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a',
                  '#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a'
                ]
                return colors[params.dataIndex]
              }
            }
          }
        ]
      }
      this.barChart.setOption(option)
    },
    // 初始化环形图
    initPieChart() {
      const chartDom = document.getElementById('pieChart')
      this.pieChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: { fontSize: 12 }
        },
        series: [
          {
            name: '主体类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 25, name: '企业' },
              { value: 65, name: '个体工商户' },
              { value: 10, name: '农民专业合作社' }
            ],
            color: ['#409eff', '#66b1ff', '#a0cfff']
          }
        ]
      }
      this.pieChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  width: 100%;
  background: #f5f7fa;
  padding: 20px 12px;
  .left-content{
    .entry{
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3296FA;
      cursor: pointer;
      box-shadow: 0px 2px 6px 0px #DDDDDD;
      background: #FFFFFF;
      .svg-icon{
        margin-right: 12px;
      }
    }
    // 左侧菜单样式
    .sidebar {
      margin-top: 15px;
      width: 234px;
      background: #fff;
      padding: 16px;
      box-shadow: 0px 2px 6px 0px #DDDDDD;

      .sidebar-header {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
        position: relative;
        margin-left: 14px;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &::before{
          content: "";
          position: absolute;
          left: -8px;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 14px;
          border-radius: 1px;
          background: #3296FA;
        }
      }

      .menu-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        .menu-item {
          text-align: center;
          background: #FFFFFF;
          border-radius: 8px;
          color: #666;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 12px 0;
          font-size: 12px;
          &:hover {
            box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
          }
          .svg-icon{
            margin-bottom: 6px;
          }
        }
      }
    }
  }

  // 右侧主内容
  .main-content {
    flex: 1;
    padding: 0 20px 20px 20px;
    overflow-y: auto;

    .todo-and-card{
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px #DDDDDD;
      padding: 16px 13px;
      margin-bottom: 20px;
      // 待办事项头部
      .todo-header {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        padding-left: 15px;

        .title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          position: relative;
          margin-right: 94px;
          &::before{
            content: "";
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 14px;
            border-radius: 1px;
            background: #3296FA;
          }
        }

        .tag {
          padding: 4px 8px;
          border-radius: 12px;
          font-size: 14px;
          .color{
            margin-left: 14px;
          }

          &.normal {
            .color{
              color: #409eff;
            }
          }

          &.overdue {
            .color{
              color: #f56c6c;
            }
          }

          &.soon-overdue {
            .color{
              color: #e6a23c;
            }
          }
        }
      }

      // 统计卡片组
      .card-group {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;

        .stat-card {
          background: #fff;
          border-radius: 8px;
          padding: 35px 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
          .icon{
            background: #EBF5FF;
            border-radius: 65px;
            padding: 4px;
            border: 4px solid #FFFFFF;
            box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
            .svg-icon{
              width: 60px;
              height: 60px;
            }
          }
          .info{
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            .card-icon {
              font-size: 16px;
              color: #666;
              margin-bottom: 10px;
            }

            .card-num {
              font-size: 32px;
              font-weight: bold;
              color: #409eff;
            }
          }
        }
      }
    }

    // 图表容器
    .chart-container {
      display: flex;
      gap: 20px;
      height: 400px;

      .chart-item {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

        &.bar-chart {
          flex: 3;
        }

        &.pie-chart {
          flex: 1;
        }

        .chart-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-bottom: 10px;
        }

        .chart-box {
          width: 100%;
          height: calc(100% - 30px);
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .chart-container {
    flex-direction: column;
    height: auto !important;

    .chart-item {
      height: 400px;
      margin-bottom: 20px;
    }
  }
}
</style>
