<template>
  <div class="dashboard">
    <!-- Left Column -->
    <div class="column left-column">
      <!-- 五大维修中心预算使用率 -->
      <div class="card">
        <h3 class="card-title">五大维修中心预算使用率</h3>
        <div class="progress-circles">
          <div v-for="(center, index) in maintenanceCenters" :key="index" class="progress-item">
            <div ref="progressCharts" class="progress-chart"></div>
            <span class="center-name">{{ center.name }}</span>
          </div>
        </div>
        <div class="stacked-bars">
          <div v-for="(center, index) in maintenanceCenters" :key="index" class="bar-group">
            <div v-for="(value, i) in center.values" :key="i"
                 class="bar-segment"
                 :style="{ height: `${value}%`, backgroundColor: barColors[i] }">
              {{ value }}
            </div>
          </div>
        </div>
      </div>

      <!-- 五大维修中心本月采领金额 -->
      <div class="card">
        <h3 class="card-title">五大维修中心本月采领金额（万元）</h3>
        <div ref="monthlyPurchaseChart" class="chart"></div>
      </div>

      <!-- 近6个月出库金额 -->
      <div class="card">
        <h3 class="card-title">近6个月出库金额</h3>
        <div ref="sixMonthChart" class="chart"></div>
      </div>
    </div>

    <!-- Middle Column -->
    <div class="column middle-column">
      <!-- 仓库总览 -->
      <div class="card overview-card">
        <h3 class="card-title">仓库总览</h3>
        <div class="overview-content">
          <div class="overview-stats">
            <div class="stat-group">
              <div class="stat-item">
                <span class="stat-label">货值总计</span>
                <span class="stat-value">货值总计{{ totalValue }}万元</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">仓库数量</span>
                <span class="stat-value">{{ warehouseCount }}</span>
              </div>
            </div>
            <div class="stat-group">
              <div class="stat-item">
                <span class="stat-label">本月累计入库金额</span>
                <span class="stat-value">{{ monthlyInbound }}万元</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">本月累计出库金额</span>
                <span class="stat-value">{{ monthlyOutbound }}万元</span>
              </div>
            </div>
          </div>
          <div class="budget-section">
            <div class="budget-info">
              <div class="budget-item">
                <span class="budget-label">本年预算</span>
                <span class="budget-value">{{ yearBudget }}万元</span>
              </div>
              <div class="budget-item">
                <span class="budget-label">已用预算</span>
                <span class="budget-value">{{ usedBudget }}万元</span>
              </div>
            </div>
            <div ref="budgetGauge" class="budget-gauge"></div>
          </div>
        </div>
      </div>

      <!-- 货值分布 -->
      <div class="card">
        <h3 class="card-title">货值分布</h3>
        <div ref="valueDistributionChart" class="chart"></div>
      </div>

      <!-- 本月各仓出入库金额 -->
      <div class="card">
        <h3 class="card-title">本月各仓出入库金额(万元)</h3>
        <div ref="monthlyInOutChart" class="chart"></div>
      </div>

      <!-- 各仓本月出库分布 -->
      <div class="card">
        <h3 class="card-title">各仓本月出库分布</h3>
        <div ref="outboundDistributionChart" class="chart"></div>
      </div>
    </div>

    <!-- Right Column -->
    <div class="column right-column">
      <!-- 全年存货总值 -->
      <div class="card">
        <h3 class="card-title">全年存货总值</h3>
        <div ref="yearlyInventoryChart" class="chart"></div>
      </div>

      <!-- 库存趋势 -->
      <div class="card">
        <h3 class="card-title">库存趋势</h3>
        <div ref="inventoryTrendChart" class="chart"></div>
      </div>

      <!-- 库存明细表 -->
      <div class="card">
        <h3 class="card-title">库存明细表</h3>
        <div class="inventory-table-wrapper">
          <table class="inventory-table">
            <thead>
            <tr>
              <th>物料名称</th>
              <th>规格型号</th>
              <th>单价</th>
              <th>所在仓库</th>
              <th>数量</th>
              <th>金额</th>
              <th>入库日期</th>
              <th>保管期限</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in inventoryItems" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.spec }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.warehouse }}</td>
              <td>{{ item.quantity }}</td>
              <td>{{ item.amount }}</td>
              <td>{{ item.inDate }}</td>
              <td>{{ item.duration }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'WarehouseDashboard',
  data() {
    return {
      maintenanceCenters: [
        { name: '东区维修中心', rate: 60, values: [10, 20, 30, 40] },
        { name: '西区维修中心', rate: 50, values: [15, 25, 35, 45] },
        { name: '南区维修中心', rate: 80, values: [20, 30, 40, 50] },
        { name: '北区维修中心', rate: 90, values: [25, 35, 45, 55] },
        { name: '运营维修中心', rate: 100, values: [30, 40, 50, 60] }
      ],
      barColors: ['#4B96FF', '#41D9D9', '#63CF7E', '#FFC442'],
      totalValue: 854600,
      warehouseCount: 15,
      monthlyInbound: 31100.0,
      monthlyOutbound: 34120.0,
      yearBudget: 1000,
      usedBudget: 800,
      inventoryItems: [
        { id: 1, name: '电机', spec: 'M10', price: 100, warehouse: '东区', quantity: 2, amount: 200, inDate: '2023/12/01', duration: 30 },
        { id: 2, name: '电缆', spec: '200W', price: 150, warehouse: '西区', quantity: 3, amount: 450, inDate: '2023/12/02', duration: 60 },
        { id: 3, name: '控制器', spec: 'C100', price: 200, warehouse: '南区', quantity: 4, amount: 800, inDate: '2023/12/03', duration: 90 }
      ],
      charts: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initAllCharts()
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.charts.forEach(chart => chart.dispose())
  },
  methods: {
    handleResize() {
      this.charts.forEach(chart => chart.resize())
    },
    initAllCharts() {
      this.initProgressCharts()
      this.initBudgetGauge()
      this.initMonthlyPurchaseChart()
      this.initSixMonthChart()
      this.initValueDistributionChart()
      this.initMonthlyInOutChart()
      this.initOutboundDistributionChart()
      this.initYearlyInventoryChart()
      this.initInventoryTrendChart()
    },
    initProgressCharts() {
      this.$refs.progressCharts.forEach((el, index) => {
        const chart = echarts.init(el)
        const option = {
          series: [{
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: { show: false },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: '#4B96FF'
              }
            },
            axisLine: {
              lineStyle: {
                width: 8,
                color: [[1, 'rgba(75, 150, 255, 0.1)']]
              }
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            data: [{
              value: this.maintenanceCenters[index].rate,
              detail: {
                valueAnimation: true,
                offsetCenter: ['0%', '0%']
              }
            }],
            detail: {
              fontSize: 16,
              color: '#fff',
              formatter: '{value}%'
            }
          }]
        }
        chart.setOption(option)
        this.charts.push(chart)
      })
    },
    initBudgetGauge() {
      const chart = echarts.init(this.$refs.budgetGauge)
      const option = {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: '100%',
          progress: {
            show: true,
            width: 18,
            itemStyle: {
              color: '#4B96FF'
            }
          },
          pointer: { show: false },
          axisLine: {
            lineStyle: {
              width: 18,
              color: [[1, 'rgba(75, 150, 255, 0.1)']]
            }
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: {
            valueAnimation: true,
            formatter: '{value}%',
            color: '#fff',
            fontSize: 24,
            offsetCenter: [0, '20%']
          },
          data: [{
            value: 80,
            name: '预算使用率',
            title: {
              offsetCenter: [0, '-20%']
            }
          }]
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initMonthlyPurchaseChart() {
      const chart = echarts.init(this.$refs.monthlyPurchaseChart)
      const option = {
        grid: {
          left: '15%',
          right: '5%',
          top: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          splitLine: {
            lineStyle: { color: '#ffffff10' }
          }
        },
        yAxis: {
          type: 'category',
          data: ['东区', '西区', '南区', '北区', '测试'],
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: [{
          type: 'bar',
          data: [300, 270, 340, 344, 300],
          itemStyle: {
            color: '#4B96FF'
          }
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initSixMonthChart() {
      const chart = echarts.init(this.$refs.sixMonthChart)
      const option = {
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          splitLine: {
            lineStyle: { color: '#ffffff10' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#4B96FF',
            width: 3
          },
          itemStyle: {
            color: '#4B96FF'
          }
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initValueDistributionChart() {
      const chart = echarts.init(this.$refs.valueDistributionChart)
      const option = {
        grid: {
          left: '15%',
          right: '5%',
          top: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          splitLine: {
            lineStyle: { color: '#ffffff10' }
          }
        },
        yAxis: {
          type: 'category',
          data: ['五金工具 50%', '通用电气 15%', '其他 35%'],
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: [{
          type: 'bar',
          data: [50, 15, 35],
          itemStyle: {
            color: function(params) {
              const colors = ['#4B96FF', '#41D9D9', '#63CF7E'];
              return colors[params.dataIndex];
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initMonthlyInOutChart() {
      const chart = echarts.init(this.$refs.monthlyInOutChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库金额', '出库金额'],
          textStyle: { color: '#fff' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['东区', '西区', '南区', '北区', '中区', '东1', '东2', '东3', '东4', '东5', '东6', '东7', '东8', '东9', '东10'],
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          axisLabel: {
            color: '#fff',
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          splitLine: {
            lineStyle: { color: '#ffffff10' }
          },
          axisLabel: { color: '#fff' }
        },
        series: [
          {
            name: '入库金额',
            type: 'bar',
            data: [2000, 1500, 1600, 1200, 1500, 1300, 1400, 1100, 1600, 1700, 1800, 1900, 2100, 2200, 2300],
            itemStyle: { color: '#4B96FF' }
          },
          {
            name: '出库金额',
            type: 'bar',
            data: [1800, 1300, 1400, 1100, 1300, 1200, 1300, 1000, 1500, 1600, 1700, 1800, 2000, 2100, 2200],
            itemStyle: { color: '#41D9D9' }
          }
        ]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initOutboundDistributionChart() {
      const chart = echarts.init(this.$refs.outboundDistributionChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['电机', '五金工具', '通用电气', '其他工具'],
          textStyle: { color: '#fff' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          splitLine: {
            lineStyle: { color: '#ffffff10' }
          },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'category',
          data: ['东区', '西区', '南区', '北区', '中区', '东1', '东2', '东3', '东4', '东5', '东6', '东7', '东8', '东9', '东10'],
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          axisLabel: { color: '#fff' }
        },
        series: [
          {
            name: '电机',
            type: 'bar',
            stack: '总量',
            data: [320, 302, 301, 334, 390, 330, 320, 302, 301, 334, 390, 330, 320, 302, 301],
            itemStyle: { color: '#4B96FF' }
          },
          {
            name: '五金工具',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210, 132, 101],
            itemStyle: { color: '#41D9D9' }
          },
          {
            name: '通用电气',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330, 310, 182, 191],
            itemStyle: { color: '#63CF7E' }
          },
          {
            name: '其他工具',
            type: 'bar',
            stack: '总量',
            data: [150, 212, 201, 154, 190, 330, 410, 212, 201, 154, 190, 330, 410, 212, 201],
            itemStyle: { color: '#FFC442' }
          }
        ]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initYearlyInventoryChart() {
      const chart = echarts.init(this.$refs.yearlyInventoryChart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          textStyle: { color: '#fff' }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            data: [
              { value: 20, name: '东区' },
              { value: 15, name: '西区' },
              { value: 25, name: '南区' },
              { value: 20, name: '北区' },
              { value: 20, name: '中区' }
            ],
            itemStyle: {
              color: function(params) {
                const colors = ['#4B96FF', '#41D9D9', '#63CF7E', '#FFC442', '#FF7D7D'];
                return colors[params.dataIndex];
              }
            },
            label: {
              color: '#fff'
            }
          }
        ]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initInventoryTrendChart() {
      const chart = echarts.init(this.$refs.inventoryTrendChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: '#ffffff30' }
          },
          splitLine: {
            lineStyle: { color: '#ffffff10' }
          },
          axisLabel: { color: '#fff' }
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(75, 150, 255, 0.3)' },
              { offset: 1, color: 'rgba(75, 150, 255, 0)' }
            ])
          },
          lineStyle: {
            color: '#4B96FF',
            width: 3
          },
          itemStyle: {
            color: '#4B96FF'
          }
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    }
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  padding: 10px; /* 减少内边距 */
  gap: 10px; /* 减少列间距 */
  min-height: 100vh;
  background-color: #001529;
  color: #fff;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 减少卡片间距 */
  flex: 1;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 10px; /* 减少卡片内边距 */
  height: auto;
}

.card-title {
  color: #fff;
  font-size: 14px; /* 减小字体 */
  margin-bottom: 10px; /* 减少标题下边距 */
  font-weight: 500;
}

.progress-circles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px; /* 减少底部边距 */
}

.progress-item {
  text-align: center;
}

.progress-chart {
  width: 60px; /* 减小进度图表大小 */
  height: 60px;
  margin-bottom: 4px; /* 减少底部边距 */
}

.center-name {
  font-size: 10px; /* 减小字体 */
  color: #fff;
}

.stacked-bars {
  display: flex;
  justify-content: space-between;
  height: 150px; /* 减小高度 */
  align-items: flex-end;
}

.bar-group {
  width: 30px; /* 减小宽度 */
  display: flex;
  flex-direction: column;
}

.bar-segment {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 10px; /* 减小字体 */
  transition: all 0.3s;
}

.overview-content {
  display: flex;
  gap: 10px; /* 减少间距 */
}

.overview-stats {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 减少间距 */
}

.stat-group {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 减少间距 */
}

.stat-label {
  color: #8c8c8c;
  font-size: 12px; /* 减小字体 */
}

.stat-value {
  color: #4B96FF;
  font-size: 16px; /* 减小字体 */
  font-weight: bold;
}

.budget-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* 减少间距 */
}

.budget-info {
  display: flex;
  gap: 10px; /* 减少间距 */
}

.budget-item {
  text-align: center;
}

.budget-label {
  color: #8c8c8c;
  font-size: 12px; /* 减小字体 */
}

.budget-value {
  color: #4B96FF;
  font-size: 14px; /* 减小字体 */
  font-weight: bold;
}

.budget-gauge {
  width: 180px; /* 减小宽度 */
  height: 120px; /* 减小高度 */
}

.chart {
  height: 250px; /* 减小图表高度 */
}

.inventory-table-wrapper {
  overflow-x: auto;
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px; /* 减小字体 */
}

.inventory-table th,
.inventory-table td {
  padding: 6px; /* 减少内边距 */
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inventory-table th {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-weight: 500;
}

.inventory-table td {
  color: #fff;
}
</style>
