<template>
  <div class="dashboard">
    <!-- 顶部区域 -->
    <header class="dashboard-header">
      <div class="header-content">
        <h1 class="text-gradient">工作台</h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>工作台</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </header>

    <div class="dashboard-content">
      <!-- 左侧个人信息区域 -->
      <div class="left-panel">
        <el-card class="user-card" :body-style="{ padding: '0px' }">
          <div class="user-profile">
            <div class="cover-image"></div>
            <el-avatar :src="avatarUrl" :size="100" class="profile-avatar"></el-avatar>
            <h2 class="profile-name">{{ nickName }}</h2>
            <p class="profile-dept">{{ deptLabel }}</p>
          </div>

          <!-- 常用应用区域 -->
          <div class="apps-section">
            <h3 class="section-title">常用应用</h3>
            <div class="apps-grid">
              <div
                v-for="(fRouter, index) in favoriteRouter"
                :key="fRouter.path"
                class="app-item"
                @mouseenter="hoverIndex = index"
                @mouseleave="hoverIndex = -1"
              >
                <router-link :to="fRouter.path" class="app-link">
                  <svg-icon :icon-class="fRouter.meta.icon" class="app-icon"/>
                  <span class="app-name">{{ subName(fRouter.name) }}</span>
                </router-link>
                <el-button
                  @click="removeRoute(fRouter.id)"
                  class="delete-button"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  v-show="hoverIndex === index"
                ></el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧主要内容区域 -->
      <div class="right-panel">
        <!-- 待审批事项和已入库物资区域 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="approval-card" shadow="hover">
              <div class="approval-header">
                <h3>待审批事项</h3>
                <el-button type="primary" size="small" @click="refreshApprovalRequests">刷新</el-button>
                <el-table :data="spDate" style="width: 100%">
                  <el-table-column prop="operation" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="handleTodo(scope.$index, scope.row)">
                        办理
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="taskName" label="任务名称"></el-table-column>
                  <el-table-column prop="starter" label="发起人"></el-table-column>
                  <el-table-column prop="assignee" label="办理人"></el-table-column>
                  <el-table-column prop="createTime" label="任务创建时间"></el-table-column>
                  <el-table-column prop="startTime" label="流程启动时间"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="approval-card" shadow="hover">
              <div class="approval-header">
                <h3>已入库物资</h3>
                <el-table :data="rkWareNoticeTabBakList" style="width: 100%">
                  <el-table-column prop="id" label="编号" width="80"></el-table-column>
                  <el-table-column prop="goodsName" label="物资名称"></el-table-column>
                  <el-table-column prop="recoil" label="类型" width="100"></el-table-column>
                  <el-table-column prop="acceNum" label="数量" width="80"></el-table-column>
                  <el-table-column prop="unit" label="单位" width="80"></el-table-column>
                  <el-table-column prop="createTime" label="入库日期" width="120"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 数据统计区域 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="stats-section">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card class="chart-card" shadow="hover">
                    <h3>库位利用率</h3>
                    <div ref="teamDistributionChart" style="height: 300px;"></div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="chart-card" shadow="hover">
                    <h3>轻型料箱利用率</h3>
                    <div ref="teamDistributionChart1" style="height: 300px;"></div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="chart-card" shadow="hover">
                    <h3>重型料箱利用率</h3>
                    <div ref="teamDistributionChart2" style="height: 300px;"></div>
                  </el-card>
                </el-col>

              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
        <div class="stats-section">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="stats-card" shadow="hover">
                <div class="stats-header">
                  <h3>今日出库单数</h3>
                  <div class="stats-number">{{ todaySize }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="stats-card" shadow="hover">
                <div class="stats-header">
                  <h3>今日出库金额</h3>
                  <div class="stats-number">{{ todayMoney }} 元</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="stats-card" shadow="hover">
                <div class="stats-header">
                  <h3>本月累计出库金额</h3>
                  <div class="stats-number">{{ monthMoney }} 元</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
          </el-col>

          <el-col :span="12">
            <div class="stats-section">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card class="stats-card" shadow="hover">
                    <div class="stats-header">
                      <h3>今日入库单数</h3>
                      <div class="stats-number">{{ todayRKSize }}</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="stats-card" shadow="hover">
                    <div class="stats-header">
                      <h3>今日入库金额</h3>
                      <div class="stats-number">{{ todayRKMoney }} 元</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="stats-card" shadow="hover">
                    <div class="stats-header">
                      <h3>本月累计入库金额</h3>
                      <div class="stats-number">{{ monthRKMoney }} 元</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="stats-section">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card class="stats-card" shadow="hover">
                    <div class="stats-header">
                      <h3>出入库任务</h3>
                      <div class="stats-content">
                        <div class="stat-item">
                          <h3>出库</h3>
                          <div class="stats-number">{{ ck }}</div>
                        </div>
                        <div class="stat-item">
                          <h3>入库</h3>
                          <div class="stats-number">{{ rk }}</div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="stats-card" shadow="hover">
                    <div class="stats-header">
                      <h3>出入库通知单</h3>
                      <div class="stats-content">
                        <div class="stat-item">
                          <h3>出库</h3>
                          <div class="stats-number">{{ ckTz }}</div>
                        </div>
                        <div class="stat-item">
                          <h3>入库</h3>
                          <div class="stats-number">{{ rkTz }}</div>
                        </div>
                        <div class="stat-item">
                          <h3>出库待审核</h3>
                          <div class="stats-number">{{ ckSh }}</div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="stats-card" shadow="hover">
                    <div class="stats-header">
                      <h3>预警通知</h3>
                      <div class="stats-content">
                        <div class="stat-item">
                          <h3>过保报警</h3>
                          <div class="stats-number">{{ overProtected }}</div>
                        </div>
                        <div class="stat-item">
                          <h3>安全预警</h3>
                          <div class="stats-number">{{ security }}</div>
                        </div>
                        <div class="stat-item">
                          <h3>呆滞预警</h3>
                          <div class="stats-number">{{ overdue }}</div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
        </el-row>


        <!-- 图表区域 -->
        <div class="chart-section">
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <el-card class="chart-card" shadow="hover">
                <div ref="sixMonthAmountChart" style="height: 300px;"></div>
              </el-card>

            </el-col>
            <el-col :span="8">
              <el-card class="chart-card" shadow="hover">
                <div ref="monthlyDistributionChart" style="height: 300px;"></div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="chart-card" shadow="hover">
                <div ref="sixMonthDistributionChart" style="height: 300px;"></div>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <el-card class="chart-card" shadow="hover">
                <div ref="budgetRadarChart" style="height: 300px;"></div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="chart-card" shadow="hover">
                <div ref="usageGaugeChart" style="height: 300px;"></div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="chart-card" shadow="hover">
                <div ref="compareBarChart" style="height: 300px;"></div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import * as echarts from 'echarts';
import axios from 'axios';
import { getMyTodoList } from "@/views/todo/api/myTodoList";
import { listRkWareNoticeTabBaks } from "@/api/system/rkWareNoticeTabBak";

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['favoriteRouter']),
    nickName() {
      return this.$store.state.user.nickName;
    }
  },
  data() {
    return {
      rk : null,
      ck: null,
      rkTz: null,
      ckTz: null,
      ckSh: null,
      security: null,
      overProtected: null,
      overdue: null,
      todaySize: null,
      tmistockSix1: [],
      tmistockSix2: [],
      monthMoney: null,
      todayMoney: null,
      todayRKSize: null,
      monthRKMoney: null,
      todayRKMoney: null,
      hoverIndex: -1,
      deptLabel: '',
      avatarUrl: '',
      responseData: [],
      rkWareNoticeTabBakList: [],
      spDate: [],
      searchParams: {
        taskName: "",
        processName: "",
        pageNum: 1,
        pageSize: 10
      },
      charts: {
        // trendChart1: null,
        sixMonthAmountChart: null,
        monthlyDistributionChart: null,
        teamDistributionChart: null,
        teamDistributionChart1: null,
        teamDistributionChart2: null,
        sixMonthDistributionChart: null,
        budgetRadarChart: null,
        usageGaugeChart: null,
        compareBarChart: null
      },
    };
  },
  mounted() {
    this.deptLabel = this.$store.state.user.dept.length > 0 ? this.$store.state.user.dept[0].label : '';
    this.avatarUrl = this.$store.getters.avatar;
    this.initCharts();
    this.getAllTodoListByParamsAndRender(this.searchParams);
  },
  methods: {

    ...mapActions(['DELETE_ROUTE']),
    removeRoute(index) {
      const ids = index || [];
      this.DELETE_ROUTE(ids);
    },
    subName(name) {
      return name.length > 4 ? name.substring(0, 4) + '...' : name;
    },

    initCharts() {
      this.$nextTick(() => {
        Object.keys(this.charts).forEach(key => {
          this.charts[key] = echarts.init(this.$refs[key]);
        });
        this.updateCharts();
        this.dayAMonthCk();
        this.sixMonthCk();
        this.ckMoneyVS();
        this.monthOutTo();
        this.sixMonthOutTo();
        this.monthYsOut();
        this.totalUse();
        this.dayAMonthRk();
        this.alarmData();
        this.ckRkData();
        this.chart();

      });
    },
    refreshApprovalRequests() {
      this.searchParams.processName = "";
      this.searchParams.taskName = "";
      this.getAllTodoListByParamsAndRender(this.searchParams);
    },
    handleTodo(index, row) {
      console.log("todo", row);
      const { formKey, taskId, businessKey } = row;
      this.$router.push({
        path: `/process/${formKey}/${taskId}?id=${businessKey}&taskName=处理待办`,
        meta: { title: "测试" },
        params: { row }
      })
    },
    getAllTodoListByParamsAndRender(params) {
      const { pageSize = 10, pageNum = 1, processName = "", taskName = "" } = params;
      getMyTodoList({
        pageSize,
        pageNum,
        isAsc: "asc",
        processName,
        taskName
      }).then(res => {
        this.responseData = res;
        console.log(this.responseData.rows)
        this.spDate = this.responseData.rows.slice(0, 3);
      });
      listRkWareNoticeTabBaks(this.queryParams).then(response => {
        this.rkWareNoticeTabBakList = response.rows.map(row => {
          return Object.keys(row).reduce((acc, key) => {
            // 检查每个值，如果为null则替换为''，否则保留原值
            acc[key] = row[key] === 'null' ? '' : row[key];
            return acc;
          }, {});
        });
        this.total = response.total;
        if (this.columns.length === 0) {
          this.columns = response.columns.map(column => {
            // 如果columns中也可能有null值，同样进行处理
            return column === null ? '' : column;
          });
        }
      })
    },
    ckRkData(){
      axios.get('/dev-api/system/LargeScreen/ckRkData')
        .then(response => {
            this.rk = response.data[0];
            this.ck = response.data[1];
            this.rkTz = response.data[2];
            this.ckTz = response.data[3];
            this.ckSh = response.data[4];
        })
    },
    alarmData(){
      axios.get('/dev-api/system/LargeScreen/alarmData')
        .then(response => {
          const mapData = new Map(Object.entries(response.data));
          this.overdue = mapData.get('overdue');
          this.overProtected = mapData.get('overProtected');
          this.security = mapData.get('security');
        })
    },
    dayAMonthCk(){
      axios.get('/dev-api/system/LargeScreen/dayAMonthCk')
        .then(response => {
          // 处理响应数据
          this.todaySize = response.data[0];
          this.todayMoney = response.data[1];
          this.monthMoney = response.data[2];
        })
    },
    dayAMonthRk(){
      axios.get('/dev-api/system/LargeScreen/dayAMonthRk')
        .then(response => {
          // 处理响应数据
          this.todayRKSize = response.data[0];
          this.todayRKMoney = response.data[1];
          this.monthRKMoney = (response.data[2]).toFixed(2)
        })
    },

    sixMonthCk(){
      axios.get('/dev-api/system/LargeScreen/sixMonthCk')
        .then(response => {
          // 处理响应数据
          this.updateSixMonthAmountChart(response.data)
        })
    },
    ckMoneyVS() {
      axios.get('/dev-api/system/LargeScreen/tmistockFB')
        .then(response => {
          // 处理响应数据
          this.updateCompareBarChart(response.data);
        })
    },
    monthOutTo() {
      axios.get('/dev-api/system/LargeScreen/monthOutTo')
        .then(response => {
          // 处理响应数据
          this.updateMonthlyDistributionChart(response.data);
        })
    },
    sixMonthOutTo() {
      axios.get('/dev-api/system/LargeScreen/sixMonthOutAndIn')
        .then(response => {
          // 处理响应数据
          this.updateSixMonthDistributionChart(response.data);
        })
    },

    monthYsOut(){
      axios.get('/dev-api/system/LargeScreen/sixMonthRk')
        .then(response => {
          // 处理响应数据
          this.updateBudgetRadarChart(response.data);
        })
    },

    chart(){
      axios.get('/dev-api/system/LargeScreen/chart')
        .then(response => {
          // 处理响应数据
          this.updateTeamDistributionChart(response.data[2]);
          this.updateTeamDistributionChart1(response.data[1]);
          this.updateTeamDistributionChart2(response.data[0]);
        })
    },

    totalUse(){
      axios.get('/dev-api/system/LargeScreen/tmistockSix1')
        .then(response => {
          // 处理响应数据
          this.tmistockSix1 = response.data;
          console.log(response.data)
        }),
        axios.get('/dev-api/system/LargeScreen/tmistockSix2')
          .then(response => {
            // 处理响应数据
          this.tmistockSix2 = response.data;
            console.log(response.data)
          }),
      axios.get('/dev-api/system/LargeScreen/tmistockSix')
        .then(response => {
          // 处理响应数据
          this.updateUsageGaugeChart(response.data);
        })
    },
    updateCharts() {
      // 这个方法现在是空的，因为我们在各个单独的方法中更新图表
    },

    updateSixMonthAmountChart(data) {
      const option = {
        title: {
          text: '近6个月出库数量/金额',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['金额', '数量'],
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: Object.keys(data)
        },
        yAxis: [
          {
            type: 'value',
            name: '金额',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FF8C00'
              }
            }
          },
          {
            type: 'value',
            name: '出库件数',
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#409EFF'
              }
            }
          }
        ],
        series: [
          {
            name: '金额',
            type: 'bar',
            data: Object.values(data).map(item => item[1]),
            itemStyle: {
              color: '#5dc0e8'
            },
            yAxisIndex: 0
          },
          {
            name: '数量',
            type: 'line',
            data: Object.values(data).map(item => item[0]),
            smooth: true,
            itemStyle: {
              color: '#e87533'
            },
            lineStyle: {
              width: 2
            },
            yAxisIndex: 1
          }
        ]
      };
      this.charts.sixMonthAmountChart.setOption(option);
    },
    updateMonthlyDistributionChart(data) {
      const dataArray = Object.entries(data).map(([name, value]) => ({
        name,
        value: value
      }));
      const totalValue = dataArray.reduce((sum, item) => sum + parseFloat(item.value), 0).toFixed(2);;

      const option = {
        title: [
          {
            text: '本月物资流向',
            left: 'left'
          },
          {
            text: totalValue + '万元',
            left: 'center',
            top: '45%'
          }
        ],
        legend: {
          bottom: 0
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '货值总额',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{c}万元',
              position: 'outside'
            },
            data: dataArray
          }
        ]
      };
      this.charts.monthlyDistributionChart.setOption(option);
    },
    updateTeamDistributionChart(data) {
      const percentage = (data[0] / data[1]) * 100; // 将实际值转换为百分比

      const option = {
        title: {
          text: `${percentage.toFixed(2)}%`, // 显示百分比
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: '#3B8EFF' // 蓝色进度条
              }
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [percentage / 100, '#3B8EFF'], // 进度颜色
                  [1, '#E0E0E0'] // 背景颜色
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: [
              {
                value: percentage // 使用百分比作为值
              }
            ],
            detail: {
              show: true,
              valueAnimation: true,
              offsetCenter: [0, '60%'],
              formatter: function (value) {
                return `${data[0]}/${data[1]}`; // 动态显示实际值和总值
              },
              fontSize: 16,
              color: '#000'
            }
          }
        ]
      };
      this.charts.teamDistributionChart.setOption(option);
    },
    updateTeamDistributionChart1(data) {
      const percentage = (data[0] / data[1]) * 100; // 将实际值转换为百分比

      const option = {
        title: {
          text: `${percentage.toFixed(2)}%`, // 显示百分比
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: '#3B8EFF' // 蓝色进度条
              }
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [percentage / 100, '#3B8EFF'], // 进度颜色
                  [1, '#E0E0E0'] // 背景颜色
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: [
              {
                value: percentage // 使用百分比作为值
              }
            ],
            detail: {
              show: true,
              valueAnimation: true,
              offsetCenter: [0, '60%'],
              formatter: function (value) {
                return `${data[0]}/${data[1]}`; // 动态显示实际值和总值
              },
              fontSize: 16,
              color: '#000'
            }
          }
        ]
      };
      this.charts.teamDistributionChart1.setOption(option);
    },
    updateTeamDistributionChart2(data) {
      const percentage = (data[0] / data[1]) * 100; // 将实际值转换为百分比

      const option = {
        title: {
          text: `${percentage.toFixed(2)}%`, // 显示百分比
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: '#3B8EFF' // 蓝色进度条
              }
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [percentage / 100, '#3B8EFF'], // 进度颜色
                  [1, '#E0E0E0'] // 背景颜色
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: [
              {
                value: percentage // 使用百分比作为值
              }
            ],
            detail: {
              show: true,
              valueAnimation: true,
              offsetCenter: [0, '60%'],
              formatter: function (value) {
                return `${data[0]}/${data[1]}`; // 动态显示实际值和总值
              },
              fontSize: 16,
              color: '#000'
            }
          }
        ]
      };
      this.charts.teamDistributionChart2.setOption(option);
    },
    updateSixMonthDistributionChart(data) {
      const month = this.getPreviousMonths();
      const outData = [];
      const inData = [];

      // 遍历 Map
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          const values = data[key];
          outData.push(values[0]);
          inData.push(values[1]);

        }
      }

      const option = {
        title: {
          text: '近6个月出入库金额(万元)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right:'15%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: month
        },
        series: [
          {
            name: '出库',
            type: 'bar',
            data: outData
          },
          {
            name: '入库',
            type: 'bar',
            data: inData
          }
        ]
      };

      this.charts.sixMonthDistributionChart.setOption(option);
    },
    updateBudgetRadarChart(data) {
      const option = {
        title: {
          text: '近6个月入库数量/金额',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['金额', '数量'],
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: Object.keys(data)
        },
        yAxis: [
          {
            type: 'value',
            name: '金额',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FF8C00'
              }
            }
          },
          {
            type: 'value',
            name: '入库件数',
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#409EFF'
              }
            }
          }
        ],
        series: [
          {
            name: '金额',
            type: 'bar',
            data: Object.values(data).map(item => item[1]),
            itemStyle: {
              color: '#5dc0e8'
            },
            yAxisIndex: 0
          },
          {
            name: '数量',
            type: 'line',
            data: Object.values(data).map(item => item[0]),
            smooth: true,
            itemStyle: {
              color: '#e87533'
            },
            lineStyle: {
              width: 2
            },
            yAxisIndex: 1
          }
        ]
      };
      this.charts.budgetRadarChart.setOption(option);
    },
    updateUsageGaugeChart(data) {
      const month = this.getPreviousMonths();
      const option = {
        title: {
          text: '近六个月库存货值变化(万元)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['总库存','一级库','二级库'],
          right: '10%'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: month
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '总库存',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: data.reverse()
          },
          {
            name: '一级库',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.tmistockSix1.reverse()
          },
          {
            name: '二级库',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.tmistockSix2.reverse()
          },

        ]
      };
      this.charts.usageGaugeChart.setOption(option);
    },
    updateCompareBarChart(data) {
      console.log(data)
      const dataArray = Object.entries(data[0]).map(([name, value]) => ({
        name,
        value,
      }));

      const option = {
        title: {
          text: '库龄分布'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['1个月', '3个月', '6个月', '12个月', '24个月','36个月','36个月以上'],
          bottom: '3%'
    },
        series: [
          {
            name: '库龄分布',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 1200,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'outside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: dataArray
          }
        ]
      };

      this.charts.compareBarChart.setOption(option);
    },
    getPreviousMonths() {
      const months = [];
      const date = new Date();
      date.setMonth(date.getMonth() - 1); // Start with last month

      for (let i = 0; i < 6; i++) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        months.unshift(`${year}-${month}`);
        date.setMonth(date.getMonth() - 1);
      }

      return months;
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  min-height: 100vh;
  background: #f0f2f5;
  padding: 24px;
}

.dashboard-header {
  margin-bottom: 24px;

  .header-content {
    h1 {
      font-size: 28px;
      margin-bottom: 8px;
      background: linear-gradient(45deg, #409EFF, #36D1DC);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.dashboard-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
}

.left-panel {
  .user-card {
    height: 100%;
    overflow: hidden;

    .user-profile {
      text-align: center;
      padding: 20px 0;
      position: relative;

      .cover-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .profile-avatar {
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: 4px solid #fff;
        margin-top: 40px;
      }

      .profile-name {
        margin: 16px 0 8px;
        font-size: 20px;
        font-weight: 600;
      }

      .profile-dept {
        color: #606266;
        margin-bottom: 12px;
      }
    }
  }
}

.apps-section {
  margin: 24px 0;
  padding: 0 20px;

  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
  }

  .apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    .app-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
      transition: all 0.3s;
      background-color: #f0f2f5;

      &:hover {
        background-color: #e6e8eb;
        transform: translateY(-2px);
      }

      .app-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #606266;
      }

      .app-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .app-name {
        font-size: 12px;
        text-align: center;
        word-break: break-word;
      }

      .delete-button {
        position: absolute;
        top: -8px;
        right: -8px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      &:hover .delete-button {
        opacity: 1;
      }
    }
  }
}

.right-panel {
  .approval-card,
  .inventory-card,
  .stats-card,
  .chart-card {
    margin-bottom: 20px;

    .el-card__body {
      padding: 20px;
    }
  }

  .stats-section {
    .stats-card {
      .stats-header {
        text-align: center;

        h3 {
          font-size: 16px;
          color: #606266;
          margin-bottom: 10px;
        }

        .stats-number {
          font-size: 24px;
          font-weight: bold;
          color: #409EFF;
        }
      }
    }
  }

  .chart-section {
    .chart-card {
      height: 100%;
    }
  }
}
//.stats-content {
//  display: flex;
//  justify-content: space-between; /* 或 center, space-around 等 */
//  align-items: center;
//}
.stats-content {
  display: flex;
  justify-content: space-around; /* 或 center, space-around 等 */
  align-items: center;
  flex-wrap: wrap; /* 当子元素超出容器宽度时，自动换行 */
}

.stat-item {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;/* 其他样式，如 padding, margin 等 */
}
</style>
